React Live

A production-focused playground for live editing React code 📡

Easily render live editable React components with server-side rendering support and a tiny bundle size, thanks to Bublé and a Prism.js-based editor.

GitHub

Write some component classes...

class Counter extends React.Component {
  constructor() {
    super()
    this.state = { count: 0 }
  }

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(state => ({ count: state.count + 1 }))
    }, 1000)
  }

  componentWillUnmount() {
    clearInterval(this.interval)
  }

  render() {
    return (
      <center>
        <h3>
          {this.state.count}
        </h3>
      </center>
    )
  }
}

class Counter extends React.Component {
  constructor() {
    super()
    this.state = { count: 0 }
  }
  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(state => ({ count: state.count + 1 }))
    }, 1000)
  }
  componentWillUnmount() {
    clearInterval(this.interval)
  }
  render() {
    return (
      <center>
        <h3>
          {this.state.count}
        </h3>
      </center>
    )
  }
}

0

Or some pure functional components...

() => (
  <h3>
    So functional. Much wow!
  </h3>
)

() => (
  <h3>
    So functional. Much wow!
  </h3>
)

So functional. Much wow!

Or just some JSX code!

<h3>
  Hello World!
</h3>

<h3>
  Hello World!
</h3>

Hello World!

If you want to demo a couple of components in tandem, without evaluating a single one inline, you can use the "noInline" prop and call "render".

const Wrapper = ({ children }) => (
  <div style={{
    background: 'papayawhip',
    width: '100%',
    padding: '2rem'
  }}>
    {children}
  </div>
)

const Title = () => (
  <h3 style={{ color: 'palevioletred' }}>
    Hello World!
  </h3>
)

render(
  <Wrapper>
    <Title />
  </Wrapper>
)

const Wrapper = ({ children }) => (
  <div style={{
    background: 'papayawhip',
    width: '100%',
    padding: '2rem'
  }}>
    {children}
  </div>
)
const Title = () => (
  <h3 style={{ color: 'palevioletred' }}>
    Hello World!
  </h3>
)
render(
  <Wrapper>
    <Title />
  </Wrapper>
)