A visual prototyping tool for React developers

comprehensive type checking with TypeScript

and flexible exporting in Classic React, Next.js, or Gatsby.js

Download Now Take the Tutorial

ReacType 12.0

Create Your React App

ReacType is a prototyping tool that allows users to visualize their application architecture dynamically, employing a drag-and-drop canvas display and an interactive, real-time component code preview. The user can create components by dragging instances of these components and HTML elements onto the canvas. This architecture can then be published on a dashboard and exported as TypeScript files to be used as a starter template for any repository. The dashboard displays the user’s saved templates and published ReacType templates, providing a social platform where templates can be liked, commented on, and imported directly into the user’s canvas.

Download ReacType


(Ubuntu, Fedora, CentOS, OpenSUSE)

Features

Live Code Preview

See your code preview update in real time as you build. React hooks are enabled for application lifecycle management. Dynamically render functional components using a live code editor. User's can hook event listeners to components and see them render in real time.

NextJS

Add Next.js specific Link and Image components to link components to user-created pages and take advantage of Next.js image optimization.

React Router

Easily create routes with the Switch and Link router elements.

State Management

Hooks and Context API are enabled to handle your state across components

Export Test Suites

With the click of a checkbox, you can export your components with Jest and Enzyme tests for not just React, but Next and Gatsby apps as well! The exported folder will include pre-configured Webpack, Jest, and Typescript files along with tests for your project.

Integrated CSS Editor with Live Demo

Copy & paste existing stylesheets or create live in the CSS Editor. As you create new instances and add styling, watch as your code dynamically renders a live demo.

Context Manager

Create, update, and delete context that you can later assign to specific components. A tree will allow you to visualize the context hierarchy.

Compatibility With Next.js and Gatsby.js

Prototype React components compatible with Gatsby.js and Next.js applications to take advantage of server-side rendering and other features of these popular frameworks

Interactive Dashboard

Collaborate with others through the new interactive dashboard

D3 Visualization

View dynamically created components/HTML elements in the component tree