react-artifact

React artifacts — author in JSX, deliver HTML + source project

The primary artifact remains ONE self-contained .html file. React designs also deliver a small source archive so the user can continue in an editor.

When to choose React over plain HTML+JS

• Real client state: multi-step forms, filters over data, undo, optimistic UI
• Many repeated components with varying props (cards, rows, chart panels)
• The user names React explicitly

For static or lightly-interactive pages, plain HTML with a small inline script is smaller, faster to iterate, and easier to revise — prefer it.

Recipe (bun is preinstalled; npm registry works in-sandbox via the

in-cluster mirror — the sandbox .npmrc already points at it)

mkdir -p /workspace/design && cd /workspace/design
bun init -y
bun add react@18 react-dom@18

Author the app as a normal small project. Keep source under src/, with the entry at src/app.jsx:

// src/app.jsx
import { createRoot } from "react-dom/client";
import { useState } from "react";

function App() { /* ... */ }

createRoot(document.getElementById("root")).render(<App />);

Bundle to a single minified script, then inline it into the HTML shell:

bun build src/app.jsx --minify --outfile dist/bundle.js

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>…</title>
  <style>/* all CSS inline here */</style>
</head>
<body>
  <div id="root"></div>
  <script>/* paste bundle.js contents here verbatim */</script>
</body>
</html>

Write the final file by concatenating — do NOT reference bundle.js by path; the artifact must open from a single file with no siblings:

node -e '
const fs = require("fs");
const bundle = fs.readFileSync("dist/bundle.js", "utf8");
const shell = fs.readFileSync("shell.html", "utf8");
fs.writeFileSync("index.html", shell.replace("/*__BUNDLE__*/", () => bundle));
'

(Use a placeholder comment in the shell and replace with a function arg so $ sequences in the bundle are not mangled.)