Skip to content


Repository files navigation

React Runner

Run your React code on the go


  • Inline element
  • Function component
  • Class component, with class fields support
  • Composing components with render or export default
  • Server Side Rendering
  • import statement
  • Multi files
  • Typescript

With React Runner, you can write your live code in the real world way, check out Hacker News in react-runner vs in real world, with the same code

You can even build your own async runner to support dynamic imports, try Play React


# Yarn
yarn add react-runner

npm install --save react-runner


  • code string, required the code to be ran
  • scope object globals that could be used in code


import { Runner } from 'react-runner'

const element = <Runner code={code} scope={scope} onRendered={handleRendered} />

or use hook useRunner with cache support

import { useRunner } from 'react-runner'

const { element, error } = useRunner({ code, scope })

import statement and multi files

import { importCode } from 'react-runner'
import * as YourPkg from 'your-pkg'

const baseScope = {
  /* base globals */

const scope = {
  // scope used by import statement
  import: {
    constants: { A: 'a' },
    'your-pkg': YourPkg,
    './local-file': importCode(localFileContent, baseScope),

then in your live code you can import them

import { A } from 'constants'
import Foo, { Bar } from 'your-pkg'
import What, { Ever } from './local-file'

export default function Demo() {
  /* render */

Browser support

"browserslist": [
  "Chrome > 61",
  "Edge > 16",
  "Firefox > 60",
  "Safari > 10.1"



react-runner is inspired by react-live heavily, I love it, but I love arrow functions for event handlers instead of bind them manually as well as other modern features, and I don't want to change my code to be compliant with restrictions, so I created this project, use Sucrase instead of Bublé to transpile the code.

If you are using react-live in your project and want a smooth transition, react-live-runner is there for you which provide the identical way to play with, and react-live-runner re-exports react-runner so you can use everything in react-runner by importing react-live-runner

import {
} from 'react-live-runner'

<LiveProvider code={code} scope={scope}>
  <LiveEditor />
  <LivePreview />
  <LiveError />

or hooks for better custom rendering

import { useLiveRunner, CodeEditor } from 'react-live-runner'

const { element, error, code, onChange } = useLiveRunner({

  <CodeEditor value={code} onChange={onChange}>
  {error && <pre>{error}</pre>}

or use react-runner directly

import { useState, useEffect } from 'react'
import { useRunner } from 'react-runner'

const [code, onChange] = useState(initialCode)
const { element, error } = useRunner({ code, scope })

useEffect(() => {
}, [initialCode])

  <textarea value={code} onChange={event => onChange(}>
  {error && <pre>{error}</pre>}

Check the real world usage here


MIT © Neo Nie