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

To enter Tutorial Mode navigate to 'Help' -> 'Tutotial'
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.
Upload an image to use as template by clicking the button on the bottom left corner or through the windows menu under 'File -> Open Image'
To add a new component, type its name in the upper left panel, in the field 'Add 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 toggle the component to be class or functional click the 'Class?' switch and it will repopulate the code preview to reflect the change.
To toggle the component to be stateful click the 'State?' switch and it will repopulate the code preview to reflect the change. The application exported will use the 'useState' hook to allow for functional components to be stateful as well.
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 name for the prop, 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 edit code while in code preview press 'ENTER EDIT MODE'.

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 edit a component's name, double click on the component's name, and press escape to cancel.
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.