Protoyard
Build prototypes that feel real.
Real behavior. Fake infrastructure. Protoyard is an open-source,
browser-first workspace where people and coding agents build many
independent prototypes that behave like real products: a persistent database
in the browser, deterministic scenarios, personas and permissions, simulated
time and network, themes, layouts and device shells, and one-command static
export. There is no backend to run, deploy or secure.
Try the live showcase at protoyard.app: every prototype and template running in your browser,
the browser player (open a blueprint with nothing to install),
everything Protoyard does and the
searchable docs.
Quickstart ·
Two levels ·
What you can build ·
Showcase ·
Built for agents ·
Docs ·
Honest boundaries
Why
Mockups can't show what your product looks like for a brand-new user, for
an admin six months in, with a thousand records, offline, or after the trial
expires. A real app can, but it needs a backend, authentication and a
deployment before the idea is even validated.
Protoyard sits in between. Each prototype is a small Vite + Svelte 5 app on a
shared runtime. Click anything and it does something real: records persist,
permissions are enforced in services, failures show real error states. Load a
scenario and the same seed rebuilds the same world every time. When it is
ready, export it as a static site that runs on any host.
60-second start
You need Node.js 24.20 or newer and pnpm 11 (through Corepack). Protoyard installs its
component library, Texuli, from npm with the rest of its
dependencies (how it is linked).
git clone https://github.com/DailybotHQ/protoyard
cd protoyard
corepack enable && pnpm install
Explore an idea in seconds, with no build (the first run builds the player once):
pnpm protoyard quick "A climbing gym books classes and tracks members" --slug gym --variants 3
pnpm protoyard quick serve gym --open # three playable variants side by side
Or ask for a slide deck (the same player runs decks, landing pages and documents):
pnpm protoyard quick "A 10-slide pitch for a fictional bike-sharing startup" --kind deck
Or open the gallery of full prototypes:
pnpm dev # gallery + local control server → http://localhost:4321/
Open Pipeline CRM, start it, and press Ctrl/⌘ + . inside the app to
open DevTools. Load a scenario, switch to the viewer persona, go offline, save
a snapshot. Then build your own:
pnpm protoyard new my-idea --template dashboard # any of the 31 templates
pnpm protoyard dev my-idea # only that app, with HMR
pnpm protoyard validate my-idea --build # contract, scenarios, types, production build
pnpm protoyard export my-idea # → artifacts/my-idea/my-idea.zip (+ sha256)
pnpm protoyard showcase --serve # every prototype and template as ONE site → http://127.0.0.1:4500/
The full walkthrough is in docs/QUICKSTART.md.
Two levels of prototype
A product idea can live at two levels. Both render the same blueprint
(blueprint.json, data only), whether it is an app, a slide deck, a landing
page or a document, through the same kind definition, so moving from one to
the other keeps the content (for an app: its entities, screens and
scenarios).
| Level 1: explore instantly | Level 2: a full prototype |
|---|
| What it is | The prebuilt player runs a blueprint in the browser. There is no build, no install and no generated code. | A generated Vite + Svelte 5 app in prototypes/<slug>/, with its own code, tests and spec. |
| Start from | A brief or a blueprint: pnpm protoyard quick "<brief>" --variants 3 | A blueprint (pnpm protoyard generate <slug> --blueprint <file>) or a template (pnpm protoyard new <slug> --template <name>) |
| Good for | Comparing variants side by side, a first click-through, review comments, validation tasks with time and steps recorded | Custom screens and logic, validation, export and publishing |
| Lives in | A disposable folder in .protoyard/quick/<slug>/, served locally with quick serve | The repository, versioned like any other app |
| Guide | Quick explorations · Player · Kinds | Generator · Brief to prototype · Decks · Pages · Blocks |
Moving between the levels:
pnpm protoyard quick "A climbing gym books classes and tracks members" --slug gym --variants 3
pnpm protoyard quick serve gym # play it locally; reviewers can leave comments
pnpm protoyard quick iterate gym --patch change.json
pnpm protoyard quick promote gym gym-desk # level 2: a full prototype in prototypes/gym-desk
- Up.
quick promote generates a full prototype from the exploration's
blueprint (--variant v2 promotes a variant instead).
- Down. A gallery entry with a blueprint has Open in player, which
opens it at level 1 from a share link.
- Outside this repository. Using Protoyard from its npm packages is
described in Packages. No version is on npm yet, so this
repository is the way to run it today.
What you can build
Every capability below runs in the browser, with fictional data.
The core of every prototype
| Capability | What you get | Read |
|---|
| Persistent worlds | IndexedDB through Dexie: typed tables, migrations, transactions and live queries. Changes survive reloads, and each prototype has its own namespace. | Database |
| Deterministic scenarios | Compose actor, organization age, tenure, data density, activity and subscription. Same seed, same world. | Scenarios |
| Personas and permissions | Switch owner, admin, member, viewer or custom roles without losing data. Policies are enforced in services, not just hidden in the UI. | Scenarios |
| Simulated time | Preview any date, or commit simulated days of activity. 7 × 1 day equals 1 × 7 days. | Scenarios |
| Simulated environment | Offline, latency, reproducible 403/429/500 and timeouts, partial outages, feature flags, an optional fetch-compatible mock HTTP layer. | Scenarios, http |
| Snapshots | Save the exact world after your edits, restore it, export it to a file and import it with validation. | Scenarios |
| DevTools | A floating control center for scenario, personas, time, data, environment, appearance, snapshots and share links. Left out of public builds by default. | |
Slide decks, landing pages and documents
| Capability | What you get | Read |
|---|
| Slide decks | quick "<topic>" --kind deck writes a deck from a sentence. 21 designed layouts, per-deck themes, fonts, gradients and image or video backgrounds, step-by-step reveals on any element, a presenter view, an overview, print to PDF and Deck Studio. Every control has a tooltip, and full screen always leaves with Esc. | Decks |
| Interactive blocks | Polls, quizzes, a what-if calculator, sortable tables, explorable charts with a data table and a working app embedded in a slide, shared by decks, pages and documents. | Blocks |
| Decks for agents | "Debug for agents" (?debug=1, then D) copies a reference to the exact slide; protoyard deck schema, layouts, blocks, lint and inspect --ref let an agent write, check and fix a deck; a generated deck can run its own Svelte components as slides. | Decks: the agent loop |
| Landing pages and documents | A hero, pricing, steps and forms that store responses; documents with a reading layout and one table of contents, edited in place (saved in the browser) and downloaded as Word, PDF or Markdown. | Pages |
| Both levels | Every kind opens instantly in the player from a share link, or generates a full prototype; links, single-file exports and private Claude artifacts work for all of them. | Kinds |
Look and feel
| Capability | What you get | Read |
|---|
| Themes | Six AA-checked presets plus a 204-theme library in six collections (including high-contrast AAA and colorblind-safe), palettes from one brand color, a live Theme Studio and the protoyard theme CLI. No flash on load. | Themes |
| Layouts | Twelve shared page layouts (sidebar, rail, top nav, master-detail, dashboard grid, docs, wizard, mobile tabs…), switchable live or with ?layout=. | Layouts |
| Shells | The same app as a phone, tablet, desktop window, browser tab, widget on a fictional site, extension popup or side panel. They simulate a device; they do not emulate one. | Shells |
| UI kit | Svelte 5 + Texuli + Tailwind 4 components and product patterns, all in one live catalog (ui-kit). | ui |
Kits beyond CRUD
| Kit | What you get | Read |
|---|
| Rich views | Board with WIP limits, calendar with recurrence, Gantt timeline with dependencies, a virtualized data grid, trees, an offline fictional map, a Markdown editor, a spreadsheet with formulas and CSV, an infinite canvas of shapes and sticky notes, activity, files and a command palette. Each loads lazily. | Views |
| Charts | Protoyard's own chart kit (no third-party chart library): cartesian, part-whole, matrix, compact, Canvas and geo families with keyboard access and table fallbacks. | Charts |
| Analytics | KPIs, date ranges, filters and segments, funnels, cohorts and an editable dashboard grid over deterministic simulated events. | Analytics |
| SaaS kits | Simulated sign-up and sign-in, SSO with a fake OAuth round trip, magic links, MFA, invitations, workspaces, onboarding, plans, checkout and invoices, with an in-app inbox for the "emails". | SaaS kits |
| AI kits | Scripted, deterministic assistants: streaming answers, agents with tool calls and approvals, safe rich answers, a canvas, voice mode and an embeddable widget. No model API. | AI kits |
| Avatars | 175 portraits of fictional people, assigned deterministically by generators, with initials as the fallback. | Avatars |
From idea to shared link
| Capability | What you get | Read |
|---|
| Blueprint generator | Describe a product as a data-only blueprint.json and protoyard generate builds a working prototype: list, detail and form screens plus dashboard, board, calendar, timeline, map, analytics, sheet, canvas and settings screens. Edit the blueprint and regenerate. | Generator |
| Brief to prototype | protoyard blueprint new --from-brief turns a prose brief into a validated blueprint offline, with no model call, ready to review and generate. | Brief to prototype |
| Specs | Every prototype carries an AGENTS.md and docs/ spec whose generated regions stay in sync with the code, plus a rebuild kit for turning it into a real app. | Specs |
| Review comments | Opt-in comments pinned to screens of a built prototype, stored locally, on Cloudflare Pages, on your own endpoint or in a Claude artifact. comments pull turns them into a REVIEW.md an agent can plan from. | Review comments |
| Static export | A relocatable dist/, a ZIP and a build manifest with checksums, plus an isolation check that no other prototype leaked in. Hash routing, so any static host works. | Publishing |
| Publishing | Cloudflare Pages with a true --dry-run; one, many or --all prototypes; a deploy ledger, a team review page and CI templates. Netlify and Vercel adapters are experimental. | Publishing |
The showcase
17 prototypes live in prototypes/, all with fictional data. Each has its
own README, AGENTS.md and docs/ spec.
| Prototype | Demonstrates |
|---|
| Pipeline CRM · crm-demo | Desktop SaaS: companies, contacts, an accessible kanban pipeline, owner/admin/rep/viewer roles with per-record rules, a v1→v2 migration, 9 scenarios up to an enterprise-scale world |
| Lumen Bank · mobile-banking-demo | Mobile-first banking: an integer-cent ledger, atomic transfers that roll back on failure, locked and dormant accounts, transfer caps, offline |
| Relay · ai-chat-demo | Team chat with scripted AI agents: streamed replies, cancel and retry, partial outages, a 600-message thread |
| Protoyard UI Kit · ui-kit | Every component in every state, plus a theme lab with live tokens and contrast |
| Lattice · lattice-saas-demo | A B2B SaaS journey: sign-up, magic links, MFA, onboarding, workspaces, invitations, an inbox and billing |
| Nova Assistant · nova-assistant-demo | An AI assistant with voice, agent tools and approvals, a canvas, a widget and a 5,000-message history |
| Relay Chat · relay-chat-demo | Slack-like team chat with an AI teammate and huddles; review comments through the artifact adapter |
| Northwind Help · support-widget-demo | A support widget on a fictional customer site (the widget-host shell) |
| Keel Projects · keel-projects-demo | Project management: board, calendar, a critical-path timeline, a 10,000-task grid, review comments |
| Pebblestat Analytics · pebblestat-analytics-demo | Product analytics: dashboards, insights, funnels, retention, alerts, review comments |
| Atlas Workspace · atlas-workspace-demo | The shared layout system: a layout gallery, a docs-style playbook and a workspace tour |
| Beacon Help Desk · helpdesk-demo | Generated from a blueprint: CRUD plus an owned SLA dashboard and ticket workspace |
All of them run live at protoyard.app.
pnpm build:showcase builds that site: the gallery, the marketplace and a
live demo of every prototype and template as one static site in
artifacts/showcase/, with no server needed. pnpm preview:showcase serves it, and a manual GitHub
Pages workflow can host it (Publishing).
Templates and blueprints
31 templates in templates/. Each is a working app with a database,
roles, scenarios, tests and a spec, and runs as a live demo with
pnpm protoyard dev <template>:
| Templates | Start here for |
|---|
blank, dashboard, mobile-app, onboarding, task-manager, ecommerce, chat | Notes, a SaaS admin, a mobile app, a wizard, a board, a storefront, a chat with a scripted assistant |
crud-app | Blueprint-driven CRUD (the base of protoyard generate) |
b2b-saas, marketplace, admin-console | Sign-in, SSO, workspaces and billing; a two-sided marketplace; an internal admin |
desktop-app, chat-widget, plugin-panel | Products in a shell: a desktop window, a widget on a fictional site, a side panel |
ai-assistant, team-chat, agent-console | An assistant workspace, team chat with AI bots, an agent playground |
analytics, fintech-dashboard, iot-monitoring | Product analytics, personal finance, device monitoring on an offline map |
project-management, booking-calendar, logistics-map, clinic | Sprints, bookings, routes with simulated ETAs, a clinic front desk |
docs-wiki, social-feed, course-lms | A wiki with safe Markdown, a social feed, courses with quizzes |
deck, page, doc, design-kit | A slide deck, a landing page and a document (content kinds), and a design system kit |
43 product blueprints in blueprints/, from CRM
and inventory to veterinary clinics and utility outages, each one command away
from a working prototype, plus deck, page and doc examples in decks/,
pages/ and docs/. The gallery's Marketplace (/marketplace/) lists
every prototype, template and blueprint.
pnpm protoyard list --kind template # every template
pnpm protoyard new my-bank --from mobile-banking-demo # remix any prototype (fresh id and storage)
pnpm protoyard generate my-crm --blueprint blueprints/crm.json # an app from a blueprint
Built for agents
Protoyard was designed to be built by coding agents as much as by people.
| Surface | What it gives an agent | Read |
|---|
| Protoyard agent skill | A distributable skill pack (skills/protoyard/) whose router sends an agent through quick exploration, full prototypes, iteration, kits, review, export and publishing. Installs into Claude Code, Codex, Cursor and other hosts with setup.sh, pinned and checksum-verified. | Skill |
| MCP server | protoyard mcp (pnpm --silent protoyard mcp in a clone): a local stdio MCP server over a fixed set of CLI operations, confined to one workspace. There is no hosted endpoint. | MCP |
| DeepWorkPlan addon | A packet that lets a Deep Work Plan turn an idea into explorations, compare them, record the decision with evidence and promote only the keeper. | DWP |
| Machine interface | Every command takes --json and prints one envelope with documented exit codes; --version --json and doctor --json expose a versioned capability contract. | Interface |
Inside this repository:
- AGENTS.md is the single entry point for Claude Code, Codex,
Cursor, Gemini, Copilot and others (
CLAUDE.md links to it). It holds the
rules, the doc index and verified commands.
- Skills and agents in
.agents/ (linked as .claude/ and .cursor/):
skills such as create-prototype, brief-to-prototype, add-entity,
add-scenario, add-dashboard, validate-and-export and
share-as-artifact, slash commands such as /new-prototype,
/new-from-brief and /share-artifact, and role agents such as
prototype-builder and qa (catalog).
- Every prototype has a spec that agents read first and keep current
(
pnpm protoyard spec <slug> --write).
The brief → blueprint → prototype loop
(BRIEF_TO_PROTOTYPE.md):
echo "A salon that books appointments" | pnpm protoyard blueprint new tmp/salon.json --from-brief - # 1. brief → blueprint, offline
pnpm protoyard blueprint validate tmp/salon.json # 2. review and validate it
pnpm protoyard generate salon-demo --blueprint tmp/salon.json # 3. blueprint → prototype
pnpm protoyard validate salon-demo --build && pnpm protoyard export salon-demo # 4. prove it, ship it
Or just ask:
Create a new Protoyard prototype called clinic-scheduler from the
dashboard template: patients, practitioners and appointments with conflict
checks; receptionist, practitioner and viewer roles; scenarios for a new
clinic, a busy month and a fully booked week. Make every action persistent,
add generator and service tests, then validate and export it. Don't touch
other prototypes.
More prompts and the full loop: docs/AGENT_GUIDE.md.
Architecture at a glance
packages/core ─ contracts (zod) prototypes/<slug>/ ← independent Vite + Svelte 5 apps
packages/database ─ Dexie/IndexedDB protoyard.json data-only manifest (indexed, never executed)
packages/scenarios ─ seeded generators src/prototype.ts schema + policy + scenarios + generator
packages/runtime ─ the engine src/domain/ services: assert → validate → simulate → transact
packages/renderer-svelte ─ mount + Vite src/screens/ UI with @protoyard/ui
packages/ui · devtools · themes apps/gallery ─ Astro, reads only the metadata registry
packages/blueprint · crud ─ generator blueprints/ ─ data-only product blueprints
packages/views · views-ui ─ rich views packages/charts · charts-ui ─ charts
packages/analytics · analytics-ui packages/saas · saas-ui · ai · ai-ui ─ simulated kits
packages/review · review-ui ─ comments packages/avatars ─ fictional portraits
packages/http · offline ─ optional packages/cli ─ the `protoyard` command
The gallery never compiles prototypes; it reads a metadata index. Target
commands work on one slug at a time, and every build contains only that
prototype's code, which the export isolation check verifies. Engine packages
never import Svelte, and rich views, charts and review comments load through
lazy subpaths. Details:
ARCHITECTURE.md and DECISIONS.md.
Measured, not estimated
All from docs/PERFORMANCE.md and
docs/QUICK.md, with method, machine and
date (one Apple M1 Max, often under load; numbers move with the machine):
| What | Measured |
|---|
Brief → playable exploration (quick CLI + player ready, no build) | 1,527 ms median |
| Player initial JS (app entry; deck, page and doc entries 102.7–103.1 KB each; 2026-10-31) | 105.6 KB gzip |
Player first visit from a share link (crm blueprint) | 190 ms to ready |
Built prototype, first screen in a fresh browser (crm-demo) | 115 ms median |
| Cold metadata index of 1,000 manifests (2026-10-31) | 52.16 ms median |
Loading a 16,075-row crm-demo world in Chromium | 628 ms, 0 long tasks |
| Data grid with 100,000 rows: first render | 94 ms median, at most 17 DOM rows, 0 dropped frames in a 5 s scroll |
| Initial JS budget per prototype | 250 KB gzip, checked by pnpm protoyard budget --all |
Honest boundaries
- No backend. Data lives in your browser, per origin. It does not sync
between devices, and the browser may clear it, so export snapshots of
anything worth keeping.
- Simulated auth is not security. Personas, roles, sign-in, SSO, MFA and
billing simulate product behavior. Prototypes on one origin can read each
other's storage; untrusted prototypes need separate origins.
- No real services. Demo data is fictional, nothing connects to real
banks, payments or AI providers, and the AI kits are scripted.
- Review comments are not authentication. Reviewer names are
self-declared, and a review key only keeps casual visitors out.
- Claude artifacts have limits. An artifact is private by default and
each viewer gets their own prototype data. One artifact version holds at
most 511 files, so share one prototype per artifact; the full showcase never
fits in one. Boot, routing and DevTools inside the claude.ai viewer have
not been verified yet (details).
- Experimental adapters. Netlify and Vercel publishing is untested against
the live services. Real deploys need your own credentials.
- Browser, not native. Mobile prototypes run in the mobile browser, and
shells simulate devices rather than emulate them.
- On npm. Every package is published from CI with npm trusted
publishing and provenance (
npm create protoyard, protoyard,
@protoyard/*). Merging a version bump into main is the release
(release runbook).
Commands
pnpm dev | dev:create | build | preview | lint | typecheck | test | test:e2e | check
pnpm build:showcase | preview:showcase | visual:sweep | thumbnails | bench:index | hygiene
pnpm build:packages | check:packages | verify:packages | check:skill | check:docs | changeset | version-packages
pnpm protoyard quick [serve | iterate | undo | feedback | report | shot | export | promote | list | open | index | prune]
pnpm protoyard help | doctor | mcp | list | index | new | generate | dev | validate | spec | build | budget
pnpm protoyard export | preview | publish | review-index | showcase | ci | affected | theme | scenario
pnpm protoyard blueprint | artifact | comments | snapshot | gallery | control-server
pnpm protoyard help <command> prints any command's flags. The full
reference is docs/DEVELOPMENT_COMMANDS.md.
Documentation
The full index is docs/README.md. Every package, template
and prototype also has its own README.md.
Quality
- 5,500+ unit and integration tests (5,574 in 534 files at the last full run,
recorded in docs/IMPLEMENTATION_PLAN.md), most
of them on the real runtime with an in-memory IndexedDB.
- Playwright E2E with axe checks on real static builds, on desktop and a
Pixel 7 viewport.
- Biome, strict erasable TypeScript,
svelte-check and astro check.
- Every theme is AA-contrast tested, and the high-contrast collection AAA.
- Bundle budgets per prototype and generated specs that must stay current
(
pnpm protoyard spec --all --check).
- A public-hygiene check for secrets and stray files, and an internal security
review of the CLI, the local control server, snapshot import and publishing,
with regression tests for the fixed findings
(threat model).
Contributing
Contributions are welcome. Read CONTRIBUTING.md,
AGENTS.md and the Code of Conduct, and
report vulnerabilities privately (SECURITY.md). Before a pull
request:
pnpm check # lint + typecheck + unit and integration tests
pnpm test:e2e # Playwright on real builds (pnpm test:e2e:install once)
pnpm protoyard validate <slug> --build # for each prototype you touched
pnpm hygiene # no secrets or stray files
Scoped commands and the source-to-test map are in
docs/TESTING_GUIDE.md. Commits follow Conventional
Commits (type(scope): summary). Long work runs as
Deep Work Plans in .dwp/.
License
MIT © Dailybot, Inc.
