Making an interactive browser-only React playground, from scratch

← Back to list
Posted on 26.09.2022
Image by Dave Sherrill on Unsplash

Back in times when I was working on a design system, I had to build a lightweight interactive demo environment to show off the capabilities of the library. Certainly, there are some canned solutions out there, but where is all fun in using something prefabricated? One can accept the challenge, and... Well, you know me.

The solution should have been 100% browser-only.

That was how this all started.

Part 1. The code compilation & execution

Right, so the heart of the project is the execution function. Whenever the code snippet gets updated, we need to have it compiled and executed.

In a nutshell, the code is the following:

👉 📃  src/lib/execute.ts
import { requireModule } from './requireModule';
import { compile } from './compile';
type ResultType = {
component: any;
error: string;
const evalInContext = (
code: string,
require: (module: string) => any,
exports: Record<string, any>,
): (() => any) =>
// eslint-disable-next-line no-new-func
new Function('require', 'exports', code).bind(null, require, exports);
export const execute = async (code: string): Promise<ResultType> => {
try {
const compiledCode = await compile(code);
const exports: any = {};
const evalCode = evalInContext(compiledCode, requireModule, exports);
return {
component: exports.default,
error: '',
} catch (error) {
const { message, stack } = error as Error;
return {
component: null,
error: stack ?? message,
The code is licensed under the MIT license

First of all, the code needs to be compiled into something that an average browser can understand. For that I used Typescript API.

Then, I evaluate the code. We all know eval() sucks, since it basically grasps the whole local context. That's highly insecure, so there is an alternative approach via new Function(). It is slightly better, because the code will only receive global lexical context, as if it was defined somewhere globally in a <script> tag.

Then I expect the snippet to have a default export to contain a react component.

Part 2. The imports

There is one tricky thing: the imports. Speaking generally, if an application is packed with something like webpack, you have all your dependencies bundled together. So when an import occurs, the browser already has everything loaded or at least it knows how to get everything.

So, we need somehow cope with it. After the compilation the imports are transformed into a bunch of require() calls.

Then, we can define that require() function on our side and process it. In my case, I have it implemented in the following way:

👉 📃  sc/lib/requireModule.ts
import React from 'react';
import * as MUIExports from '@mui/material';
// todo: remove that sneaky shit-fix :)
// @ts-expect-error A module without default export should have one
React.default = React;
const moduleMap: Record<string, Record<string, any>> = {
react: React,
'@mui/material': MUIExports,
export const requireModule = (moduleName: string) => {
if (!(moduleName in moduleMap)) {
return null;
return moduleMap[moduleName];
The code is licensed under the MIT license

Here I only allow react and @mui/material to be import-ed. Moreover, the version of react will be obviously the same as used in the application itself, and @mui/material - how it is defined in the package.json.

Also, the import is obviously executed in a synchronous manner.

This can be improved, but with at an extra cost.

We could have defined the map as something like:

const moduleMap: Record<string, Record<string, any>> = {
react: () => React,
'@mui/material': () => import('@mui/material'),
The code is licensed under the MIT license

So, the typescript API allows parsing the code into an AST. Then, we could have all the imports found before we actually compile, run dynamic import loading and only then resumed with the compilation. At least by doing so, the material ui wouldn't be bundled in advance and therefore loaded only on demand.

There is more to it. Some advanced solutions also offer loading arbitrary dependencies at runtime, using Unpkg. If you wish to implement something like this, bear in mind, that:

  1. You'll need to support package versioning, as you might not always want to load the latest version.
  2. When a library is loaded and executed, it may produce side effects (global variables, prototype patching, etc.). React and Styled-Components are two decent examples of making a mess. So, when an alternative version of the library is chosen, a whole sandbox must be wiped out clean and re-initialised. As far as I know, for now, the only way to do it is using iframes.
  3. Finally, you must pull all dependencies of every imported library along :) I think this would be the most tricky part.

Not so trivial anymore, huh? :)

Part 3. The worker

If the snippet is a pair of lines long, you won't see any drop of performance. However, with an average snippet running the whole thing in the event loop can make the application really jittery. To prevent that, a worker must be used.

A brief recap on workers.

So, a worker is a piece of code that the browser will execute in a separate thread. You can think of it as a separate application running next to the in-page app.

You can spawn workers on-demand and communicate with them by sending JSON-based messages. You will also listen to the events from the worker to determine if the job was completed. No other variables are shared.

In my case, the code of the worker would be:

👉 📃  src/worker.ts
import { transpileModule, ModuleKind, JsxEmit } from 'typescript';
type WorkerMessageType = {
name: string;
args?: string[];
const compile = async (code: string) => {
const result = transpileModule(
`import React from 'react';
compilerOptions: {
module: ModuleKind.CommonJS,
allowJs: true,
jsx: JsxEmit.React,
return result.outputText;
const actionMap: Record<string, (...args: string[]) => Promise<string>> = {
self.onmessage = ({ data }: MessageEvent<WorkerMessageType>) => {
const { name, args } = data;
if (name in actionMap) {
actionMap[name](...(args ?? [])).then((result) => {
The code is licensed under the MIT license

That particular worker is only capable of performing one task: compile the source code using typescript.

To run the task, I spawn the worker and send it a message:

👉 📃  src/lib/runTaskInWorker.ts
type WorkerEventDataType = {
name: string;
result: string;
export const runTaskInWorker = async (
actionName: string,
...args: string[]
) => {
return new Promise<string>((resolve) => {
const worker = new Worker(`${process.env.PUBLIC_URL}/worker.js`);
worker.onmessage = ({ data }: MessageEvent<WorkerEventDataType>) => {
const { name, result } = data;
if (name === actionName) {
name: actionName,
The code is licensed under the MIT license

So, my compile() function eventually looks like this:

👉 📃  src/lib/compile.ts
import { runTaskInWorker } from './runTaskInWorker';
export const compile = async (code: string) => runTaskInWorker('compile', code);
The code is licensed under the MIT license

I experimented for a while and came to the conclusion that the best way to compile the worker was to do it with a separate webpack config.

👉 📃  worker.webpack.config.js
const path = require('path');
const webpack = require('webpack');
const src = path.resolve(__dirname, './src');
const build = path.resolve(__dirname, './public');
const buildProduction = path.resolve(__dirname, './build');
module.exports = (env, argv) => {
const development = argv.mode === 'development';
return {
mode: 'none',
target: 'webworker',
entry: './src/worker.ts',
output: {
filename: 'worker.js',
path: development ? build : buildProduction,
resolve: {
modules: ['node_modules', src],
extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.DefinePlugin({}),
module: {
rules: [
test: /\.ts?$/,
use: [
loader: 'ts-loader',
options: {
compilerOptions: {
module: 'esnext',
noEmit: false,
The code is licensed under the MIT license

Note that the target option is set to webworker.

Then I could have some additional scripts defined:

👉 📃  package.json
"scripts": {
"start": "react-scripts start",
"dev": "yarn start",
"dev:worker": "webpack --watch --config ./worker.webpack.config.js --mode=development",
"build": "yarn build:worker; yarn build:app",
"build:app": "react-scripts build",
"build:worker": "webpack build --config ./worker.webpack.config.js --mode=production",
The code is licensed under the MIT license

Part 4. The UI

Now comes the fun part. The main component be like

👉 📃  src/components/Playground/Playground.tsx
import { FC } from 'react';
import { CircularProgress } from '@mui/material';
import { PlaygroundPropsType } from './type';
import {
} from './style';
import { usePlayground } from './hooks/usePlayground';
import { Editor } from '../Editor';
import { ErrorBoundary } from '../ErrorBoundary';
export const Playground: FC<PlaygroundPropsType> = (props) => {
const {
} = usePlayground(props);
return (
<PlaygroundRoot {...rootProps}>
<Editor {...editorProps} />
<ErrorBoundary {...errorBoundaryProps}>
{!loading && Component && <Component />}
{!loading && compilationError && (
{loading && <CircularProgress />}
The code is licensed under the MIT license

All component logic moved to a separate hook:

👉 📃  src/components/Playground/hooks/usePlayground.ts
import { ComponentType, useCallback, useEffect, useState } from 'react';
import { debounce } from 'throttle-debounce';
import { PlaygroundPropsType } from '../type';
import { execute } from '../../../lib/execute';
const defaultValue = `import { Stack, Button } from '@mui/material';
export default function BasicButtons() {
return (
<Stack spacing={2} direction="row">
<Button variant="text">Text</Button>
<Button variant="contained">Contained</Button>
<Button variant="outlined">Outlined</Button>
export const usePlayground = (props: PlaygroundPropsType) => {
const [value, setValue] = useState(defaultValue);
const [loading, setLoading] = useState(true);
const [compilationResult, setCompilationResult] = useState<{
component: ComponentType<unknown>;
} | null>(null);
const [compilationError, setCompilationError] = useState('');
const onEditorValueChangeDebounced = useCallback(
debounce(500, (nextValue: string) => {
execute(nextValue).then(({ error, component }) => {
if (error) {
} else {
setCompilationResult({ component });
useEffect(() => {
}, [onEditorValueChangeDebounced]);
return {
rootProps: props,
editorProps: {
value: value,
onValueChange: (nextValue: string) => {
errorBoundaryProps: {
onError: (error: string | null) => {
setCompilationError(error ?? 'An error occurred');
Component: compilationResult ? compilationResult.component : null,
The code is licensed under the MIT license

For the editor I used react-simple-code-editor:

👉 📃  src/components/Editor/Editor.tsx
import { FC } from 'react';
import SimpleEditor from 'react-simple-code-editor';
import { useEditor } from './hooks/useEditor';
import { EditorRoot } from './style';
import { EditorPropsType } from './type';
const editorStyles = {
fontFamily: '"Fira code", "Fira Mono", monospace',
fontSize: 12,
export const Editor: FC<EditorPropsType> = ({ children, ...restProps }) => {
const { rootProps, editorProps } = useEditor(restProps);
return (
<EditorRoot {...rootProps}>
<SimpleEditor {...editorProps} padding={10} style={editorStyles} />
The code is licensed under the MIT license

...and the corresponding hook:

👉 📃  src/components/Editor/hooks/useEditor.ts
import { EditorPropsType } from '../type';
import { highlight } from '../../../lib/highlight';
const noop = () => {};
export const useEditor = ({
}: EditorPropsType) => {
return {
rootProps: restProps,
editorProps: {
value: value ?? '',
onValueChange: onValueChange ?? noop,
highlight: (code: string) => highlight(code, 'tsx'),
The code is licensed under the MIT license

For highlighting I used Prism.js:

👉 📃  src/lib/highlight.ts
import prism from 'prismjs';
import 'prismjs/components/prism-css.js';
import 'prismjs/components/prism-diff.js';
import 'prismjs/components/prism-javascript.js';
import 'prismjs/components/prism-json.js';
import 'prismjs/components/prism-jsx.js';
import 'prismjs/components/prism-markup.js';
import 'prismjs/components/prism-tsx.js';
import 'prismjs/themes/prism-coy.css';
export const highlight = (code: string, language: string) => {
let grammar;
let prismLanguage = '';
if (language === 'tsx' || language === 'ts') {
grammar = prism.languages.tsx;
prismLanguage = 'typescript';
} else if (language === 'jsx' || language === 'js') {
grammar = prism.languages.jsx;
prismLanguage = 'javascript';
if (!grammar) {
return code;
return prism.highlight(code, grammar, prismLanguage);
The code is licensed under the MIT license

Types of errors

A few words on possible types of errors that may occur.

👉 First of all, if there is a syntax error somewhere, the code won't compile and an exception will be thrown. That's type one error.

👉 Secondly, there might be a run-time error outside of the component definition. In this case, the evalInContext function will throw. That's type two.

👉 Lastly, there might be a run-time error inside of the component itself.

First two are covered by the try-catch statement of the execute() function. To catch that last one, I used ErrorBoundary:

👉 📃  src/components/ErrorBoundary/ErrorBoundary.tsx
import { Component, ReactNode } from 'react';
type StateType = {
hasError: boolean;
errorMessage?: string;
type PropsType = {
onError: (errorMessage: string) => void;
children?: ReactNode;
export class ErrorBoundary extends Component<PropsType, StateType> {
componentDidCatch({ message, stack }: Error) {
this.props.onError(stack ?? message);
render() {
return this.props.children;
The code is licensed under the MIT license

That most definitely does the trick.

The Conclusion

Pheww, that was a plenty of code snippets out there.

As you can see, no server-side code is needed to render a bunch of visitor-defined components, there is no rocket science or dark magic behind it. Of course, you need to arrange extra pre-cautions and prevent the snippet from being stored somewhere, otherwise it could turn into a stored XSS. If you do store a potentially harmful code, you must sanitise it in advance.

That's all for today, folks! The demo can be found here.

Hope this article was helpful!


Sergei Gannochenko

Business-oriented fullstack engineer, in ❤️ with Tech.
Golang, React, TypeScript, Docker, AWS, Jamstack.
15+ years in dev.