Skip to content
🧪 Prototyping Tool for exporting React/Typescript Applications!
TypeScript JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__mocks__ base electron config May 18, 2019
src Merge pull request #133 from ChristianEdwardPadilla/master May 27, 2019
.babelrc typescript working with babel and electron including App.tsx, tested … May 18, 2019
.eslintrc.json small config changes May 18, 2019
.gitignore
.npmignore changed application logo and made changes to main.js May 18, 2019
.travis.yml base electron config May 18, 2019
LICENSE.md added in license, readme, added in zoom factor to electron May 18, 2019
README.md Update README.md May 18, 2019
electron-builder.yml adam is now the maintainer May 18, 2019
main.js fixed unmerged files May 18, 2019
package-lock.json last working windoes version May 18, 2019
package.json add syntax highlighting May 18, 2019
postcss.config.js base electron config May 18, 2019
tsconfig.json Update tsconfig.json Jun 2, 2019
tslint.json
webpack.config.development.js final merge May 18, 2019
webpack.config.production.js Have enabled cross platform application export May 18, 2019
yarn.lock add syntax highlighting May 18, 2019

README.md

ReacType

PRs Welcome License: MIT

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.

Image of ReacType Application

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.

Gif of adding

  • 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.

Gif of code preview & tree

  • 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.

Gif of attr & props

  • 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.

Contributors

Christian Padilla @ChristianEdwardPadilla

Tolga Mizrakci @tolgamizrakci

Shlomo Porges @shlomoporges

Adam Singer @spincycle01

Nel Malikova @gmal1

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.

You can’t perform that action at this time.