ReacType is a rapid prototyping tool built on Electron 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.io to learn more about the product.
Follow @ReacType on Twitter for important announcements.
If you want to read about using ReacType, the User Manual is free and available online now.
-
MacOS Download the latest release
After opening the dmg and dragging ReacType into your Applications folder, ctrl+click the icon and select 'Open' from the context menu to run the app. This extra step is necessary since we don't have an Apple developer license yet. If you are given a warning that Apple could not scan the app. Please follow these steps -
Windows Download the latest release
- Added event listeners: Users can now add event listeners to elements in the customization tab and view a list of added events. The list can be edited to remove events, and the live code preview will show the events being added and updated.
- Delete buttons added: Delete buttons have been added to canvas components and elements for easier removal. Users can now delete elements or components directly by focusing on them and mouse-clicking the delete button.
- Live code preview and component tree update: When users drag-and-drop components and elements, the live code preview and component tree are automatically updated to reflect the changes in real-time.
- Major UI enhancement: The user interface has undergone a major change, including a sliding effect for the left and bottom panels to maximize user visibility. The styling has been unified and the display of the canvas hierarchy has been made more prominent for improved clarity.
- And more: See change log for more details on what was changed from the previous versions as well as plans for upcoming features!
Here is the main file structure:
- Fork and Clone Repository.
- Open project directory
- Install dependencies.
npm install- If there is a dependency issue during installation, try switching to Node version v16.0.0 and then install. If the dependency issue still persists, try using the
--legacy-peer-depsflag instead.
npm install --legacy-peer-deps- To run the production build
npm run prod- To run tests
npm run test- To run the development build
npm run dev-
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- Open exported project directory
- Install dependencies
npm install- Build the app
npm run build- Start an instance
npm run start- Open browser and navigate to localhost at specified port
Typescript, React.js, Redux, Javascript, D3.js, Node.js (Express), HTML, CSS/SASS, GraphQL, Next.js, Gatsby.js, Electron, SQL, NoSQL, Webpack, TDD (Jest, Enzyme and React Testing Library), OAuth 2.0, Travis CI
Here is the up to date list of all co-developers of this product. Please visit our contribution documentation for more information on how you can contribute to ReacType!
This project is licensed under the MIT License - see the LICENSE.md file for details.