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.

New with version 2.0:

React Native mode for iOS/Android app design
Hooks integration with functional components
History navigation
Tutorial mode
New keyboard shortcuts
Editable code preview
Prop value designation for component children

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.
Linux users: run the application as a super user in order to read and write files.

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.
Switch to React Native mode to change the interface to a mobile app development environment
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.