Guide · Open source
How to use Reactide: install, run the simulator and inspect components
Updated · written with AI from the project's own documentation and checked against our catalogue data
Reactide is a cross-platform desktop application for writing React web apps. It combines a live-reloading browser simulator, a visual component tree that shows props and state, and an integrated terminal in one window. This guide shows you how to install it from source, set up the simulator for your project, and use the component tree and terminal.
Reactidereactide/reactide · ★ 10.5k · MIT Install options & downloads Quick start
- 1Check prerequisites. Install Node.js and npm, and Git.
- 2Clone and check out the release branch. Clone the reactide repository and run git checkout 3.0-release.
- 3Install and build. Run npm install, then npm run webpack-production.
- 4Start Reactide. Run npm start to open Reactide in developer mode.
- 5Point the config at your app. In reactide.config.js, set the .html and .js entry points to your project files.
- 6Start the simulator. Run npm run reactide-server in the terminal to enable the live simulator.
What you need before installing Reactide
Reactide is installed by cloning the repository and building it yourself. The README lists two prerequisites: Node.js and npm, and Git.
Reactide is in active development, and the README notes that the latest release is labeled beta. Expect some rough edges.
- Node.js and npm
- Git
Install Reactide and run it in developer mode
Clone the reactide/reactide repository, then run the commands below from the project folder in your terminal. This checks out the 3.0 release branch, installs dependencies, builds the production bundle, and starts the app in developer mode.
git checkout 3.0-release
npm install
npm run webpack-production
npm startBuild a packaged desktop app instead
The README also describes bundling the Electron app as a native desktop application. Run the same checkout, install and build steps, then run the electron-packager script. Afterwards, open the release-builds folder inside the Reactide folder and double-click the Reactide executable.
git checkout 3.0-release
npm install
npm run webpack-production
npm run electron-packagerSet up the live simulator for your project
The simulator needs to know where your app starts. Open the reactide.config.js file and change the .html and .js entry points to the relative paths of your files.
Then, in the terminal, start the Reactide server. The README says the simulator and component tree work for all React applications. For more detail on webpack and dev-server setup, the README points to the example project in the example folder.
- Open reactide.config.js and set the .html and .js entry points to your files' relative paths.
- Run npm run reactide-server in the terminal.
npm run reactide-serverUse the component tree to inspect props and state
The visual component tree loads and updates based on the components in your working directory. For each component, it shows information about props and state. You can move through a live view of your project's structure to see parent-child relationships.
The component tree works out of the box once Reactide can find your app's entry point, which you provide in reactide.config.js.
- See how components are nested in your app.
- Check the props and state of each component.
- Trace parent-child relationships in complex projects.
Use the integrated terminal and live reloading
Reactide includes a terminal for running commands. It uses bin/bash on Unix and cmd on Windows. You can run npm scripts and other commands without leaving the app.
As you change code, the live reloading updates the simulator in the development environment, so you don't need to switch to a separate browser window. Reactide also integrates with Create React App for project boilerplate configuration.
- Terminal uses bin/bash on Unix and cmd on Windows.
- Live reloading updates the simulator as your project changes.
- Create React App integration is available for boilerplate setup.
What people use it for
- Watch a React app update live in the simulator while editing components.
- Find which parent component passes props to a deeply nested child.
- Check the state held by each component in a complex project.
- Run npm scripts and build tools from the built-in terminal in the same window.
Frequently asked questions
Is Reactide free?
Yes. Reactide is released under the MIT licence, and its source code is on GitHub at reactide/reactide. The README does not mention paid plans.
What do I need to install Reactide?
The README lists Node.js and npm, and Git as prerequisites. You install Reactide by cloning the repository and building it with npm.
Is Reactide stable enough for production work?
The README says Reactide is in active development and that the latest release is labeled beta. It is not described as a stable, supported release, so teams that need stability should weigh that carefully.
Does Reactide work with Create React App?
The README says Reactide offers integration with Create React App for faster project boilerplate configuration. It also says the simulator and component tree work for all React applications.
What are alternatives to Reactide?
The project's comparable tools are Visual Studio Code, WebStorm, and React Developer Tools. Those are general code editors or browser extensions, while Reactide focuses on React apps with a simulator, component tree and terminal in one window.
Which config file do I edit to run the simulator?
Edit reactide.config.js and change the .html and .js entry points to the relative paths of your project files. Then run npm run reactide-server in the terminal.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Reactide suits React developers who want the editor, preview, component tree and terminal in one desktop window, and who are comfortable running npm commands and editing a config file. It is in active development and the latest release is beta, so teams that need a stable, supported tool or a full-featured general code editor should pick something like Visual Studio Code or WebStorm instead.
Install options & downloads