React Playground

With React Playground, you create, test, export, and share your ReactJS Components.

Here you can :

1. 🔗 Share your project. You can get at any moment a shareable link without any registration or login. The page's URL is constantly updated at any keystroke, and you can directly copy it, or use the designed button.
2. ⚛️ Open several tabs (in JS, JSX and CSS file format), and import/export components and hooks from them.
3. 📦 Import third parties packages, as you would do it in your text editor (e.g. import styled from 'styled-components'). React Playground will import them using internally esm.sh. you can select a version by adding @ + version. (e.g. import React from 'react@18.0.0').
4. 🔲 Export your code to Stackblitz and CodeSandbox with a click.
5. 🖌️ Format your code with prettier.

Known bugs and limitations

• The bundler will automatically import from esm.sh, and is therefore subject to any limitations coming from the CDN (e.g. some dependencies cannot be imported)
• You can only open .jsx, .js, .css tabs. Additionally, you can style your components with CSS in js libraries, such as styled-components
• Only JS/JSX third-party libraries can be imported (no CSS @import). However, most CSS-in-JS libraries, like styled-components workwork normally.

Technologies used

• ReactJS
• styled-components
• evento-react, for Component events and less prop-drilling
• lz-string, to compress the project code for the shareable URL
• Vite, for scaffolding
• CodeMirror, for the online editor (in particular @uiwjs/react-codemirror)
• esbuild wasm, to quickly transpile and bundle on the browser
• prettier, for the online code formatting.

Credits

React Playground is inspired by SvelteJS REPL, SolidJS Playground, and VueJS Playground.

This Udemy course by Stephen Grider was essential to learn how to work with bundlers in the browser.