Atelier · open source
An app harness for coding agents.
Point a coding agent at a folder and it becomes a live app. Atelier owns the hard parts — build, routing, real‑time, auth, the visual language — so every app stays small enough to fit in one context window.
$ npm create @pa1nd/atelier my-studio -- --kit atelier-modules
macOS · Node ≥ 24 · then npm install + npm run dev → localhost:1844
The harness
Atelier fixes the things that are hard to get right across an app, so each app stays small, self‑contained, and safe. The constraints are the point: freeze the baseline and the visuals, and many small apps add up to one large, coherent, multi‑tenant system.
the fixed baseline
Owns the cross‑cutting machinery — the build step, routing, the real‑time WebSocket, hot reload, workspaces, auth, and the module boundary. These are frozen: you build on them, never rebuild them — and because they don't move, you can trust them.
visual coherence
One theme wraps every app, so dozens of independently‑built apps look like one product — and no single app can reach in and restyle the whole system. Visuals are the chrome's job, not each app's.
just your feature
A frontend.jsx and/or a backend.js — that's it. No build to
configure, no dependencies to vendor, no design system to invent. Thin by design, and
small enough to hold in one context window.
Modules
Point your agent at a folder. A frontend.jsx becomes a React component with hooks,
deep routing, and a live real‑time channel — sharing the shell's single React. A
backend.js mounts scoped routes, broadcasts over the socket, and hot‑swaps with
no restart. No bundler to configure. No second React. Just the feature.
export default function Module() { return <div className="p-8">hello</div>; }
That's a complete, routed, hot‑reloading app. The shell handles the rest.
The lifecycle
One loop from an empty folder to a module someone else installs — every step is a command or a file, and every stage hands cleanly to the next.
npm create @pa1nd/atelier
One command scaffolds a studio — the shell from npm, a starter collection of modules
from a git repo, the theme already applied. npm run dev and it's live.
npx atelier add github:owner/repo
Subscribe to anyone's collection — a git repo of modules — and each lands as a
plain folder that ships its own dependencies, live on the next request. Newer
cuts are one atelier update away, merged with your edits.
a folder + an agent
Point a coding agent at any folder — installed ones included. A frontend.jsx
and/or backend.js is the whole shape; every edit hot‑reloads in place.
atelier package → atelier publish
Cut a verified snapshot into a collection — it only lands if it builds — then
publish it anywhere: GitHub, your own network, a single file over AirDrop. Anyone
installs the working set with atelier add.
Sharing modules
Now live
Everything travels as a collection — a git repo of module folders, cut by
atelier package only from states that build, never from a broken working tree.
Publish it to GitHub, serve it over your own network, or hand it over as a single file;
atelier add subscribes and installs the whole working set, theme included, and
atelier update brings newer cuts in later — merging with your local edits
instead of overwriting them. Each module ships its own dependencies and lands as a folder
you own: safe to drop in, free to edit, none able to break the whole.