ReacType 6.0: Your favorite React prototyping tool just got social
WHAT IS REACTYPE?
ReacType is a prototyping tool that allows new and seasoned developers to visualize React architecture through a user-friendly drag-and-drop interface that generates code dynamically in a real-time code preview. This application is a great educational tool for new developers by virtue of the live code preview, which shows how React components are constructed. For seasoned developers, why reinvent the wheel every time you make a new React application? ReacType abstracts away the logic behind creating boilerplate code, creating a streamlined process for developers to generate a React application skeleton with speed and simplicity. In the public dashboard, published ReacType templates can be downloaded or imported directly into the user’s canvas. Users can also upload their own templates where they can be liked, commented on, and downloaded by other developers.
HOW DOES IT WORK?
Upon launch, ReacType opens with an empty canvas where users can intuitively drag and drop HTML tags and components onto the canvas. Users can nest appropriate items, create multiple instances of components, and rearrange any item on the canvas.
All changes are reflected in the live code editor and the visualization tree, which depicts the parent-to-child relationship of the components.
For in-progress or completed templates, users can save their work, storing templates in a private dashboard. The new dashboard tab also displays a grid of other users’ published projects that can be downloaded, liked, and commented on.
Furthermore, if a public project is downloaded, it’s saved to the private dashboard and can be imported directly onto the canvas. Once a template is complete, users can export React components in Typescript, Next.js, or Gatsby.js as a starter template with a fully functional application file structure into their IDE of choice.
NEW FEATURES IN REACTYPE 6.0
- Dashboard: gives users the option to publish templates to a public dashboard and download other users’ published templates
- Undo and Redo functionality
- Added keyboard shortcuts to make ReacType more accessible
- HTML Form tag nesting allows users to architect realistic forms
DASHBOARD OF PUBLISHED PROJECTS
The new dashboard in ReacType 6.0 has private and public components, introducing a way to collaborate in the application for the first time. The private dashboard displays the user’s saved ReacType templates which can optionally be published to the public dashboard. The public dashboard is a social platform of users’ published projects, which can be liked, commented on, downloaded, and imported directly onto a user’s own canvas. Published templates can additionally be sorted by date, rating, and username. All features and functionality of the dashboard are completely operable through keyboard key bindings and comply with the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1 standard on accessibility, furthering our goal at ReacType to provide accessibility to all users.
GET INVOLVED
So, where can I find this app? You can download ReacType by visiting our Github or by visiting our website where you’ll find all the information you need to get started. We are always looking for ways to make ReacType better, and we’d love to hear from you! Please submit any issues or contribute to the open-source project on our Github.
ReacType 6.0 Engineers and Co-Authors:
