Structor - visual GUI editor for React.
Structor is a fast and handy tool for the visual construction of User Interface from pre-created components.
Introduction
Videos
Existing projects on GitHub
Articles
- Using React Router inside of components
- Structor's component model representation
- Shortcuts
- Troubleshooting
Requirements
- node.js 5.x
- npm 3.8.x
Getting started
Structor is a tool which helps to create UI in a Web application. So, the first thing that you need - clone or download one of the existing Web application projects from GitHub.
Clone project from GitHub:
- Clone one of existing projects (BTW, you can request your own structure of Structor project with own generators, just write to us):
git clone https://github.com/ipselon/bootstrap-prepack.git
for Bootstrap projectgit clone https://github.com/ipselon/material-ui-prepack.git
for Material UI projectgit clone https://github.com/ipselon/structor-starter-prepack.git
for starter project
- Go to appeared folder:
cd bootstrap-prepack
for Bootstrap projectcd material-ui-prepack
for Material UI projectcd structor-starter-prepack
for starter project
- Install dependencies:
npm install
Or download & unpack:
- Go to Structor Market http://helmetrex.com, choose suitable project.
- Download package on localhost and unpack it in some empty folder.
- cd to this folder and run
npm install
command.
Install Stuctor
If you are going to work in Structor with many projects, it's better to install Structor globally. But if you do not have an access to install globally or your environment has issues with global paths (see #56 issue), you can install and run Structor locally.
Global installation
npm install structor -g
Local installation
npm install structor
- Add the following line into
package.json
file inscripts
section:
"structor": "structor"
Run Structor
Being in project's folder run from command line:
- In case Structor installed globally:
structor
- In case Structor installed locally:
npm run structor
Tips
- To run with different port:
structor -p <port>
- To specify different project's working directory:
structor -d <path_to_project_dir>
- To in verbose mode:
structor -v
License
Apache License, Version 2.0 (Apache-2.0)