ReactION's hot-reloading HTML previewer and component visualizer helps you streamline your React development workflow. ReactION is currently in active development so we welcome any constructive feedback or contributions to this product. Please follow this repo for contribution guidelines and our development road map.

1. Works with any React application - ReactION supports React 16.1+ (including React Fiber) and React Router v4.
2. Visualize your app - ReactION shows the current structure of your application in real time with hot reloading.
3. Preview your HTML - Live render of your App through the in-editor HTML preview in sync with the tree view.
4. 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.
5. Gain quick insights into your React tree state - the React tree nodes will have different colors based on its current state and props, including the latest component change.
6. Debug your React - With ReactION, you can travel through different state changes of your React application

• Make sure you have Google Chrome installed on your computer. Also, our extension currently only runs in VS Code environment, so make sure you are using VS Code as the code editor.
• Also, you will need a React application. Feel free to fork and clone our sample app here!

• No setup required! ReactION requires NO modification to your codebase, but installing the VS Code extension.
• React Fiber Tree structure shown inside VS Code (Powered by Chrome Headless).
• Ability to edit components on the HTML preview and see the component hierarchy on the side panel.
• Alternatable theme based on user preference (i.e., Light and Dark).

• In-editor HTML preview in sync with the tree view
• Clicking on the node triggering associated React component file
• Re-rendering on save
• Node color difference based on its status
• Time Traveling your React application

1. Clone the repo and run npm install
2. Run npm run build
3. Open VS Code Extension mode by pressing F5 or ctr+5
4. When a new VS Code window pops up, open the React code file that you want to run the extension on
5. npm start your React file and run your application in localhost:3000 (default)
6. Run the main extension by clicking on the ReactION logo on the side panel or ReactION:Launch
7. Run the embedded HTML webview version with the command cmd + shift + p then ReactION: Embedded Webview
8. Enjoy the tree view!

You can download the extension directly from the Marketplace.

You can change the following default settings in the Configuration file:

• React Tree View Theme
• Change the server port that ReactION listens to
• Change whether or not to have an external Chrome instance

You can configure ReactION's default settings through the ReactION-config.json file as such:

{
  "system": "darwin",
  "executablePath": "",
  "localhost": "localhost:3000",
  "headless_browser": false,
  "headless_embedded": true,
  "reactTheme": "dark"
}

• TypeScript - For the codebase
• Node.js - File system, testing, core extension functionality
• Puppeteer - Headless Chrome browser
• WebSockets - Connection between HTML and tree view
• React - Webview
• React-D3-Tree - Visualize components
• Mocha - Testing
• Love ❤️

ReactION is currently in beta release. Please let us know about bugs and suggestions at the issue section. Feel free to fork this repo and submit pull requests!

Andy Tran | Carson Chen | Daniel Wu | Jinsung Park

Yoojin Jung

MIT - check out license page for more details