cramhead / structor

An advanced GUI editor for React

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

• Structor as playground for React Applications

Videos

• Videos on Structor Market

Existing projects on GitHub

• material-ui-prepack
• bootstrap-prepack
• structor-starter-prepack

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 project
  • git clone https://github.com/ipselon/material-ui-prepack.git for Material UI project
  • git clone https://github.com/ipselon/structor-starter-prepack.git for starter project
• Go to appeared folder:
  • cd bootstrap-prepack for Bootstrap project
  • cd material-ui-prepack for Material UI project
  • cd 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 in scripts 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)