From idea
to code,
on one canvas.
Coding agents plan, mock up and build from your own repo, with every version live side by side.
For Macs with Apple Silicon
Try three versions of the homepage hero.
Starting a chat for each version.
Gradient headline and Split layout are ready. Dark hero is still working.
Every handoff starts from scratch.
The plan sits in a doc, the mockup in a design tool that has never seen your components, and the build in a terminal and a browser tab.
The plan · a docs tool
The mockup · a design tool
The build · a terminal
Plan it, sketch it, build it.
Type a prompt anywhere on the canvas and an agent makes it right there. It reads your code first, so whatever it makes fits your app.
- DocumentsNew hero planNew hero planGoalsSay what Northwind does in one linePut the live chart up topKeep the trial button firstTakes to tryA dark hero with a soft glowA gradient headlineHome
Plan it
A plan or a spec, written as a document next to the work. It stays current as things change.
- MockupsTake A · Dark heroTake B · Gradient
Sketch two takes on the hero.
Readapp/page.tsxReadcomponents/hero.tsxSketch it
Mockups made with your own components, styles and copy. Compare a few takes before anything gets built.
- Your appHomeHomeHomeDark hero/
Build it
The change runs live on a branch of its own, right beside the other versions.
- ShipDark heroCreate PR
The hero sits on a dark background now, with a soft accent glow behind the chart.
Make the glow a little softer, then it’s good.
Done. The glow is half as strong.
Ship it
Open a pull request for the version you keep.
Tell one chat, and every chat knows.
Chats keep what they learn for the chats after them, so you stop repeating yourself.
Memory
Chats save what you prefer and what the canvas has decided as short notes, for you on every canvas or for one canvas, and read them before every message.
Files
Research, references and PDFs stay in the canvas’s files or yours, so the next chat picks up where the last one stopped.
Skills
Type / to use a skill from the repository, the canvas, your account or Screenplay. Chats offer to save new ones when they learn a workflow.
Attachments
Drop a screenshot, PDF or text file on the message box. It’s saved with the canvas’s files for later chats.
Use the purple from the brand guide for every accent, never blue.
Saved for every chat on this canvas. The buttons and the chart use the brand purple now.
Use the purple from the brand guide for every accent, never blue.
Saved for every chat on this canvas. The buttons and the chart use the brand purple now.
Host it and build together.
Deploy the web app and your team shares one canvas from any browser, with everyone’s cursors on it. Every chat runs in its own cloud sandbox, so nobody installs anything. The software is free and MIT licensed; you pay for hosting and model usage.
- LiveHomeSplit layout/MayaJo
Live frames
Frames open as each person’s own copy. Click Go live and everyone on the canvas is on one browser, watching each click.
- Agent has controlHomeSplit layoutAgent
The agent at the controls
Ask a chat to show you what it built. It clicks, types and hovers in the live frame with real input, and everyone watching sees each step.
- HomeGradient headline1/ · a.btnResolveMMaya4m
Should this just say Start free? It reads long next to Book a demo.
SSam1mAgreed. Sending it to the agent.
Comments on the UI
Pin a comment to any element in a frame or a passage in a document, and discuss it in a thread. Play mode shows the same threads.
- Split layoutCreate PRMMaya
Can the chart sit a little higher?
Moved it up so it lines up with the headline.
SSamLooks right. Open the pull request.
Shared agent chats
Watch a teammate’s agent work live, then carry on in the same chat. Every message names its sender, and commits go out under their name.
Repositories set up once
Save how a repository runs, with its environment variables, to your account and add it to any canvas. Only you can see the values.
Any model provider
The built-in agent runs on Anthropic, OpenAI, Google, the Vercel AI Gateway or any OpenAI-compatible endpoint. Pick the model per chat.
Built for comparing what your agents build.
Live sandboxes
Every frame is a running dev server on its own branch. Click, scroll, fill in forms and switch to mobile sizes.
The Coordinator
One chat for the whole canvas. It starts a chat for each version or task, follows every one, and tells you when one needs you.
Pick elements
Press ⌘E and click an element in any frame to send it to the agent as context.
Knobs
Ask the agent to expose spacing, color or copy as knobs, then drag a slider to try values in a frame without another prompt. Hosted frames also get a Theme knob for light and dark.
Your agents and models
Use Claude Code, Codex or OpenCode with the subscription you already have, and pick the model per chat. Steer an agent mid-turn by sending a message while it works.
Runs on your Mac
No account and no Screenplay servers. Sandboxes are git worktrees on your disk and your canvases live in a local database. Your agent talks to its model provider, just as it does in your terminal.
Before you start.
What is Screenplay?
A canvas where coding agents plan, mock up and build from your own repository. Each version of a change runs live on a branch of its own, side by side with the others, and you open a pull request for the one you keep.
Which agents does it work with?
The Mac app runs Claude Code, Codex or OpenCode, using the one you already have installed and its login, subscriptions included. The hosted web app has a built-in agent that runs on Anthropic, OpenAI, Google, the Vercel AI Gateway or any OpenAI-compatible endpoint.
Should I use the Mac app or host it?
Use the Mac app to work on your own. It needs no account, and your canvases stay on your Mac. Host the web app when a team should share canvases, comments and running apps from any browser. There’s no Screenplay-run service to sign up for; you deploy it yourself.
What do I need for the Mac app?
A Mac with Apple Silicon, Claude Code, Codex or OpenCode installed and signed in, and a project with a dev server. There’s no build for Intel Macs, Windows or Linux; on those, use a hosted deployment in the browser.
Do I need GitHub?
Not for the Mac app. Open a folder on your Mac or paste any clone URL; GitHub only adds browsing your repositories and opening pull requests. The hosted web app signs everyone in with GitHub and works on GitHub repositories.
Does my code leave my machine?
Only through your agent. The Mac app has no account and no Screenplay servers, and everything it stores stays on your Mac. Your agent sends code to its model provider just as it does in your terminal, including your README and config files when it works out how to run a new repository.
Do I need to change my app?
No. Anything with a dev server works, as long as it listens on the port Screenplay gives it. For knobs or state shared between viewers, add the two small npm packages. They do nothing in production builds.
What does hosting it take?
The reference deployment uses Vercel, Postgres, Liveblocks, Vercel Blob, Vercel Sandbox, a GitHub OAuth app and at least one model provider key. Every chat runs in its own cloud sandbox, so your team installs nothing. The self-hosting guide shows how to swap in other providers.
Is it free and open source?
Yes. Screenplay is MIT licensed and the code is on GitHub. You bring your own agent subscriptions or API keys, and a hosted deployment pays for its own hosting and model usage.
Try it on your own repository.
Download the Mac app, or deploy the web app for your team. Add a repository, ask for a few versions of a change, and review them side by side.