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.
