Giter Site home page Giter Site logo

react-ui-builder's Introduction

Description

Join the chat at https://gitter.im/ipselon/react-ui-builder

The visual tool for prototyping UI for ReactJS components and Web applications. In the builder you can easily combine available components with each other, and see how they look and feel right on a Web page. Then you can generate a source code of new ReactJS component from the combination.

Tightly integrated with ReactJS Component Exchange. Visit the project gallery for more information.

Features

  • Easily prototype UI of any complexity with available ReactJS components.
  • Generate source code for new ReactJS component from any combination of other components.
  • Edit source code in other IDEs, the changes automatically will be reflected in the builder workspace.
  • Include and use any third-party components or even jQuery plugins in the builder.
  • Publish own projects on ReactJS Component Exchange site.
  • Create static site with prepared HTML which allows to deploy static content into Web hosting immediately.

Installation

npm install react-ui-builder -g

For upgrading of version it is better to uninstall and then install:

npm uninstall react-ui-builder -g

Running

Builder runs as a webserver.

react-ui-builder

Usage

  1. Go to http://localhost:2222/builder in browser.

  2. Browse gallery of published projects.

  3. Clone project you liked by specifying ABSOLUTE path to local folder where you want to see the source code of the project. This folder should exist and be empty.

  4. Cloning and preparing of the project will take some time. Most time will be spent by npm installer, builder starts the installation of dependent npm modules automatically after project is downloaded.

  5. Now you can compose components on page, consider page as a desk where you combine components with each other.

Migration projects for React UI Builder from v0.2.11 to v0.3.0

Please write a letter to support(at)helmetrex.com For every project you will get a support.

Documentation

To get familiar with the builder's interface and how it works please visit ReactJS Component Exchange project gallery

Release Notes

0.3.4

  • Builder's config moved to cookies, consequently user account doesn't have to be administrator on local OS.
  • Now templates for static-site and live-preview HTML and Page components are in the source code of project bundle.
  • Bugs fixed:
    • Notes for newly created component were not created
    • Page doesn't scroll to previous place while reloading after successful webpack compilation

React UI Builder needs support

If you think that it's worth to pledge small amount of money to development of the builder, please become our patron, visit: the page on Patreon

Find our patrons here

react-ui-builder's People

Contributors

boulosdib avatar gitter-badger avatar ipselon avatar reggi avatar theofidry avatar vasanthk avatar vedmalex avatar vincentfretin avatar

Stargazers

 avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.