ReactION

Concept

React IDE inside your VS Code editor

ReactION's hot-reloading HTML previewer and component visualizer helps you streamline your React development workflow.

From Tree to Codes

ReactION will open up the React file that is associated with the particular component on the tree view when you click it.

Color Coded

the React tree nodes will have different colors based on its current state and props, including the latest component change.

Debug your React

Time through different state changes of your React application.

Demo

Demo of current product

ReactION is open source and in active development.
Contribute with us on GitHub!

No Setup

ReactION requires NO modification to your codebase, but installing the VS Code extension.

Live Edits

Ability to edit components on the HTML preview and see the component hierarchy on the side panel.

Hover Feature

Hover over the tree nodes to see the component's props and/or state.

Embedded Browser

Embedded browser view is available in the Command Palette under "ReactION: Embedded Webview".

About Us

ReactION was born out of an interest in streamlining the React developer workflows, from their inception to release.

We were exceptionally keen to target the demographic of beginner- to intermediate-level developers who are trying to get a better understanding of React’s inner workings (e.g., components, their state data, and mutual inter-relations in the component tree).

In addition, all of us are no strangers to the laborious process of spinning up an external browser to view the fruits of incremental code changes.

With these two concerns in mind, and acknowledging the pervasive use of VS Code among developers, we set out to create an IDE that would allow users to see - in real-time - the visualized component state of their React projects AND the rendered browser output - all within the VS Code development environment.