RlREACT LIVE

React Live

A flexible playground for live editing React code

Easily render live editable React components thanks to Sucrase 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>
)
}
}

Or some pure functional components...

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

Or just some JSX code!

<h3>
Hello World!
</h3>

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>
)