ReacType is a rapid prototyping tool that allows users visualize their application architecture dynamically, employing a drag-and-drop canvas display and an interactive, real-time component code preview that can be exported as a React app 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!
Visit reactype.dev to learn more about the product.
Follow @ReacType on Twitter for important announcements.
Changes with Version 18.0.0
- Collaboration Rooms: Implemented rooms that allow developers to collaborate together on a project. Note: The collaboration room is a beta version and still needs to be improved for larger scaling.
- User List: Designed and built a user list that updates in real-time as clients join and exit.
- Typescript Conversion: Typescript coverage is now increased to ~90%.
- Cleanup: Removed unused code, fixed bugs, and refactored existing code to improve performance,
- And more: See the change log for more details on what was changed from the previous versions, as well as plans for upcoming features!
File Structure of ReacType Version 18.0.0
Here is the main file structure:
Please refer to the Excalidraw provided by ReacType Version 14.0 for more details: https://excalidraw.com/#json=JKwzVD5qx6lsfiHW1_pQ9,XJ6uDoehVu-1bsx0SMlC6w
Run ReacType using CLI
- Fork and Clone Repository.
- Open the project directory.
- Install dependencies.
- To run the production build
npm run prod
- To run tests
npm run test
- To run the development build
npm run dev
Note that a .env with DEV_PORT, and a NODE_ENV flag (=production or development) are needed.
Please note that the development build is not connected to the production server.
npm run devshould spin up the development server from the server folder of this repo. For additional information, the readme is here. Alternatively, you can select "Continue as guest" on the login page of the app, which will not use any features that rely on the server (authentication and saving project data.)
To run the development build of electron app
npm run dev npm run electron-dev
Run Exported App
- Open exported project directory
- Install dependencies
- Build the app
npm run build
- Start an instance
npm run start
- Open browser and navigate to localhost at specified port
This project is licensed under the MIT License - see the LICENSE.md file for details.