IT Tools

IT Tools

Handy tools for developer

CSS to JS

CSS to Template

Search

Ctrl + K

React Playground

Simple ReactJS playground that brings you the ability to render React components with editable source code and live preview.

React Component code

Preview

const App = () => {
  const [count, setCount] = React.useState<number>(0);
  
  return (
    <div>
      <h3 style={{
        background: 'darkslateblue',
        color: 'white',
        padding: 8,
        borderRadius: 4
      }}>
        Counter: {count} 🧮
      </h3>
      <button
        style={{
          background: 'orange',
          color: 'white',
          padding: "8px 16px",
          borderRadius: 4,
          marginTop: 8
        }}
        onClick={() =>
          setCount(c => c + 1)
        }>
        Increment
      </button>
    </div>
  )
}

render(<App />)

Counter: 0 🧮