HTMLDrop.

React starter

React 19 with htm for JSX-like templates that run in the browser. No build step.

Open in editor Free. No install, no sign-up.
  • react
  • react-dom
  • htm

The code

Three files, exactly what you get in the editor.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React starter</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.App {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  padding: 2rem;
  box-sizing: border-box;
  background-color: #282c34;
  color: white;
  font-size: calc(10px + 2vmin);
  text-align: center;
}
.App-logo {
  height: 36vmin;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}
@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.App h1 {
  margin: 0.2em 0 0;
  font-size: 1.6em;
}
.App p {
  margin: 0;
}
.App button {
  font: inherit;
  font-size: 0.8em;
  padding: 0.5em 1.2em;
  border-radius: 8px;
  border: 1px solid #61dafb66;
  background: #20232a;
  color: white;
  cursor: pointer;
}
.App button:hover {
  border-color: #61dafb;
}
.App-link {
  color: #61dafb;
}

import React, { useState } from "https://esm.sh/react@19";
import { createRoot } from "https://esm.sh/react-dom@19/client";
import htm from "https://esm.sh/htm@3";

// htm gives JSX-like syntax without a compiler: html`<div>…</div>`.
const html = htm.bind(React.createElement);

function Logo() {
  return html`
    <svg className="App-logo" viewBox="-11.5 -10.23174 23 20.46348" role="img" aria-label="React">
      <circle r="2.05" fill="#61dafb" />
      <g stroke="#61dafb" strokeWidth="1" fill="none">
        <ellipse rx="11" ry="4.2" />
        <ellipse rx="11" ry="4.2" transform="rotate(60)" />
        <ellipse rx="11" ry="4.2" transform="rotate(120)" />
      </g>
    </svg>
  `;
}

function App() {
  const [count, setCount] = useState(0);
  return html`
    <div className="App">
      <${Logo} />
      <h1>Hello React</h1>
      <button onClick=${() => setCount((count) => count + 1)}>count is ${count}</button>
      <p>Edit <code>script.js</code> and watch the preview update.</p>
      <a className="App-link" href="https://react.dev" target="_blank" rel="noopener noreferrer">
        Learn React
      </a>
    </div>
  `;
}

createRoot(document.getElementById("root")).render(html`<${App} />`);

Questions

Can I use React without a build step?

Yes. This starter loads React straight from a CDN, so it runs in the browser with no npm install, bundler, or config.

How do I start a React project online?

Click Open in editor. HTMLDrop copies this starter into a new drop with index.html, style.css, and script.js, and the preview updates as you edit.

Is it free?

Yes. Public drops, live collaboration, versions, and embeds are free, and you do not need an account to start.

Can I share or embed my React demo?

Yes. Every drop gets a public link and an embed code, and you can invite others to edit it with you in real time.

More starter kits