Skip to content
Get packs

Reactide

A desktop IDE for building React web apps, with a live simulator and component tree.

GitHub Download v3.0-beta
Stars
10.5k
Forks
613
Licence
MIT
Language
JavaScript
Last update
3.8 years ago
Type
Dev tool

No commits in over a year — check for forks or alternatives before adopting.

What it is

Reactide is a cross-platform desktop application for writing React web apps. It bundles a live-reloading browser simulator, a visual component tree that shows props and state, and an integrated terminal, so developers don't have to keep switching between an editor, a browser, and a server. The README says it is in active development.

  • Live-preview a React component as you edit it, without switching to a browser
  • Browse a project's component tree and see props and state for each component
  • Run build and project commands from the built-in terminal
  • Set up a React project with Create React App integration

Great for

  • Developers who build React apps and want the editor, preview, and terminal in one window
  • Developers who want to inspect component hierarchy and props/state visually
  • Developers who already use Create React App or webpack-based projects
  • People comfortable running npm commands and editing a config file

Not ideal for

  • People who are not writing React, since the tooling is specific to React apps
  • Teams needing a stable, supported release: the README describes the project as in active development and the latest release is labeled beta
  • Developers who need a full-featured general code editor, since the README does not describe editing features beyond the terminal, simulator, and component tree
Step-by-step guide: how to use ReactideInstall, first run, examples, tips and FAQs
Reactide vs Redux DevTools

How to get it

  1. 1

    Clone and build from source

    You'll need: Node.js and npm · Git

    Check out the 3.0 release branch

    git checkout 3.0-release

    Install dependencies

    npm install

    Build the production bundle

    npm run webpack-production

    Start in developer mode

    npm start
  2. 2

    Run it

    • Run the install and build commands from the README, then run npm start to launch developer mode.
    • Open the reactide.config.js file in your React project and point the .html and .js entry points to your files.
    • In your project directory, run npm run reactide-server to start the simulator.
    • Check the component tree to view the parent-child structure of your app.
  3. 3

    Get the most out of it

    • Use Create React App integration for faster project boilerplate setup, per the README
    • Point the component tree at your app entry point in reactide.config.js so it loads automatically
    • Look at the example project in the example folder to see a working webpack and dev-server setup
    • Use the integrated terminal for build tools and file system commands without leaving the IDE

Downloads

Source code (.zip)master branch · straight from GitHubRelease v3.0-beta2 files incl. Reactide-3.0.0.dmgOfficial website & docsreactide.io

Strengths

  • Purpose-built for React, with a simulator and component tree aimed at that workflow
  • Live reloading shown in the README keeps the edit-and-preview loop in one place
  • Open source under the MIT license

Trade-offs

  • Last code push in the metadata is January 2023, and the release is a beta, so maintenance status is unclear
  • Setup requires manual steps: editing reactide.config.js and running npm commands
  • The README is truncated and gives few details on editing features or supported platforms beyond Electron builds

How it compares

ProjectStarsTypeLevelUpdatedBest for
reactide (this)10.5kDev toolintermediate3.8 years agoDevelopers who build React apps and want the editor, preview, and terminal in one window
pear-desktop34kAppbeginner4 days agoPeople who want YouTube Music in a standalone desktop window
redux-devtools-extension13.4kDev toolbeginner3.0 years agoJavaScript developers debugging Redux state in a web app
Lepton10.3kAppbeginner4 days agoDevelopers who already keep snippets as GitHub Gists or GitLab snippets
nvm95.7kDev toolbeginner8 days agoDevelopers who work on several Node.js projects that need different versions
pnpm37kDev toolbeginner4 days agoDevelopers working in Node.js projects who want faster installs and less disk use

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.