christianedwardpadilla / reactype

Prototyping Tool for React/Typescript Applications

ReacType

ReacType is a visual prototyping tool for developers employing React component architecture alongside the comprehensive type checking of TypeScript. In other words, you can draw prototypes and export React / Typescript code!

ReacType allows the user to visualize their application architecture dynamically, employing a canvas display, an application tree, and a real-time component code preview. The user can create components and load instances of these components, as well as nested HTML elements, onto the canvas. This architecture can then be exported as TypeScript application files to be used as a starter template for any repository.

Download for MacOS, Windows, Linux.

• Mac users: for now you might need to go to your security settings to allow the app run on your system as we do not have an Apple license yet.

How to use

• Open the application to start a new project. It will open in the root App component, with its name listed in the left panel and the component represented by the white box on the canvas.
• To add a new component, type its name in the upper left panel, in the field 'Add class component', and press enter.
• To render a component instance to the screen, first select the component, or parent, that the instance will be rendered within. This selected component will be represented in a new canvas view, with its own white box. Then press the plus button next to the component name. An instance, or child, representation will appear on the canvas.
• To add draggable HTML elements, select the image icons on the lower left panel.

• The bottom panel allows the user to toggle between 4 different views: a tree diagram of the application, a real-time preview of the exportable code, a form to enter component props, and a form to add HTML attributes.

• Props can be added to each component within its tab on bottom panel. Enter in a key-value pair, select its data type and press the bottom 'ADD PROP'.
• HTML Element Attributes of class name and ID can be added to each HTML element after an HTML element has been rendered to the canvas.

• To delete a child or instance from the canvas, select the desired instance and either press the delete key.
• To delete a component, click the 'DELETE' button of the desired component in the left panel.
• To start over, select the blue 'CLEAR WORKSPACE' button in the left panel. This will clear the entire application.

To Export Files

• Once finished setting up the application template, press the green 'EXPORT PROJECT' button at the bottom of the left panel and choose between two options to export your files:
  1. Export the component files into a components folder. This option will allow a developer to add these files to an existing project.
  2. Export a new project with TypeScript config files and the component files. This option will allow a developer to immediately begin a new project.

Authors

Christian Padilla @ChristianEdwardPadilla

Tolga Mizrakci @tolgamizrakci

Shlomo Porges @shlomoporges

Adam Singer @spincycle01

To Run Your Own Version

• Fork and Clone Repository.
• Open project directory
• Install dependencies

yarn install

• Run application

yarn start

• For development experience, in one terminal...

yarn run dev

• and on another terminal.

yarn run electron

License

This project is licensed under the MIT License - see the LICENSE.md file for details.