Pen Settings



CSS Base

Vendor Prefixing

Add External Stylesheets/Pens


+ add another resource


Babel includes JSX processing.

Add External Scripts/Pens


+ add another resource


Add Packages



Save Automatically?


Auto-Updating Preview


Format on Save


Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.


                <div id="app"></div>




                import React, { Fragment, useEffect, useRef, useState } from ''
import { render } from ''

const Time = ({ interval }) => {
  const [time, setTime] = useState(
  const timer = useRef(null)
  useEffect(() => {
    timer.current = setInterval(() => setTime(, interval)
    return () => clearInterval(timer.current)
  }, [interval])
  return <h1>{`Time: ${time}`}</h1>

const App = () => {
  const [interval, updateInterval] = useState(1000)
  return (
      <Time interval={interval} />
      <h2>{`Interval: ${interval}`}</h2>
      <input type="range" min="1" value={interval} max="10000" onChange={e => updateInterval(}/>

render(<App/>, document.getElementById('app'))