It supports ES6, Flow and TypeScript and works with Create React App out of the box. The auto-generated usage docs can help Styleguidist function as a documentation portal for your team’s different components.

4. React component playground

Built by Formidable labs, component-playground is a component for rendering React components with editable source and live preview.

It’s built for fast and easy setup and integration, with a babel-standalone build. It has a larger bundle size than react-live (see below), while using a more familiar editor setup.

Note that unlike react-live, component-playground is not server-side renderable. However, it does support raw evaluation and pretty-printed output out-of-the-box. It’s a cool project, so feel free to take a look.

5. Stackblitz

Stackblitz is an “online IDE for web applications” powered by Visual Studio Code. Much like Codesnadbox, StackBlitz is an online IDE where you can create Angular & React projects that are made shareable via a URL link.

It automatically takes care of installing dependencies, compiling, bundling, and hot reloading as you type. Intellisense smart completions (w/ type definitions from npm), Project Search (Cmd+P), Go to Definition, and other key VS Code features “just work” out of the box.

StackBlitz also utilizesProgressive Web App API’s to run a live dev server in-browser, so you can keep on coding offline. The editor’s core packages are hosted in this GitHub repo. Feel free to jump in and start playing.

6. React live

Like react-component-playground, this too is a React playground by Formidable labs. React Live emphasizes the ability to render React components and present the user with editable source code and live preview.

It supports server-side rendering and comes in a small bundle, transpiling your code through Bublé, while the code is displayed using Prism.js. The transpiled code is then rendered in the preview component, which does a fake mount, if the code is a component. react-live is more modular and customizable than component-playground, aiming to deliver a production-focused playground for live editing React code. Take a look.

7. JS Bin

The well familiar and loved open source collaborative web development debugging tool by Remy Sharp is a pioneer in online code playgrounds.

JS Bin lets you write code and have it both save in real-time, and render a full preview in real-time. You can share and edit URLs to work together, while remote rendering lets view the output of your JS Bin on any device on any platform, updating in real-time.

JS Bin provides processors out of the box including coffee-script, LESS, Markdown and Jade. You can also debug remote Ajax calls. With CSS and JSX support, it becomes a useful tool for playing with React components online. Here’s a short guide to setting up common React ecosystem tools using JS Bin.

8. CodePen