Skip to content

Protoyard

Build prototypes that feel real.

Real behavior. Fake infrastructure. Every prototype is an independent app with its own persistent browser database, scenarios, personas and simulated time.

Prototypes
16
Templates
31
Scenarios
82

What you can do

Explore an idea in seconds, keep the one that works, and share it. Everything runs in the browser with simulated data.

Everything Protoyard does
  • From a brief to a playable app

    protoyard quick turns a sentence into a running exploration in about 1.5 s, with variants to compare side by side.

    Quick explorations guide
  • A player with nothing to install

    Open a blueprint from a share link, a file or a pasted document. No build, and each blueprint keeps its own browser storage.

    Player guide
  • Slide decks, landing pages and documents

    Ask for a deck on any topic and get slides you can click through, present and share: designed layouts, live charts and interactive blocks, from one JSON file.

    Decks guide
  • Full prototypes from blueprints

    When an idea is worth keeping, generate a real Vite + Svelte 5 app from its data-only blueprint, or start from a template.

    Generator guide
  • Real behavior, fake infrastructure

    A persistent browser database, deterministic scenarios, personas and simulated time, all under an in-app DevTools panel.

    Scenarios guide
  • Kits beyond CRUD

    Themes, layouts and device shells, plus rich views, charts, analytics, SaaS flows and scripted AI assistants.

    Themes guide
  • Review comments

    Reviewers pin comments to screens of a built prototype or a served exploration; an agent can plan from the result.

    Review comments guide
  • Export, publish and share

    A relocatable static export, a single HTML file, a private Claude artifact, or a deploy through the publish adapters.

    Publishing guide
  • Built for coding agents

    A distributable agent skill, a local MCP server, a DeepWorkPlan addon and a versioned machine interface.

    Agent skill guide
  • Packages

    Every library is a publish-ready npm package with typed ESM exports. Not on npm yet: today you run Protoyard from its repository.

    Packages guide

New

Slide decks, landing pages and documents

Ask for a deck on any topic and present it in the browser: designed layouts, live charts, polls, quizzes and even a working app inside a slide, all from one JSON file.

Every example
The first slide of “Protoyard: create anything”

Slide deck · 25 slides

Protoyard: create anything

Every layout family, live charts with a data table, an explorable chart, a poll, a what-if calculator, a quiz and an app embedded in a slide.

Arrow keys move between slides, S opens the presenter view and O the overview.

1 folder has an invalid protoyard.json and is hidden. Run pnpm protoyard index for details.

Browse prototypes

Showing 1–16 of 16

  • Atlas Workspace Demo

    atlas-workspace-demo

    A fictional operations workspace that demonstrates every desktop and content layout, simulated access, guided onboarding, and a library analytics theme.

    #starter#dashboard#saas#admin
    Platform
    Responsive
    Scenarios
    4 scenarios
    Live demo
    Live demo
    Template
    from dashboard
    Status
    Ready
  • Beacon Help Desk

    helpdesk-demo

    A support desk generated from a blueprint: customers, tickets with SLAs and a status board, replies, attachments, audit history, notifications and CSV.

    #support#helpdesk#blueprint#generated
    Platform
    Responsive
    Scenarios
    4 scenarios
    Live demo
    Live demo
    Template
    from crud-app
    Status
    Ready
  • Cadence Studio

    cadence-studio-demo

    Class scheduling and customer bookings for a fictional neighborhood creative studio.

    #booking#calendar#classes#creative-studio
    Platform
    Responsive
    Scenarios
    4 scenarios
    Live demo
    Live demo
    Template
    from crud-app
    Status
    Ready
  • Harborlight Dispatch

    harbor-dispatch-demo

    Offline dispatch coordination for fictional harbor freight routes.

    #logistics#dispatch#freight#harbor
    Platform
    Responsive
    Scenarios
    4 scenarios
    Live demo
    Live demo
    Template
    from crud-app
    Status
    Ready
  • Keel Projects

    keel-projects-demo

    Keel Studio's project hub (fictional product studio): a board with swimlanes, sprint rituals on a calendar, a critical-path timeline, a 10,000-task grid with saved views, comments with mentions, a notifications center and a command palette.

    #projects#sprints#kanban#calendar
    Platform
    Responsive
    Scenarios
    5 scenarios
    Live demo
    Live demo
    Template
    from project-management
    Status
    Ready
  • Lattice

    lattice-saas-demo

    A fictional team planning workspace for project portfolios, delivery health, team collaboration, and simulated SaaS journeys.

    #productivity#saas#b2b#workspace
    Platform
    Responsive
    Scenarios
    8 scenarios
    Live demo
    Live demo
    Template
    from b2b-saas
    Status
    Ready
  • Lumen Bank (fictional)

    mobile-banking-demo

    A mobile-first banking app with fictional accounts, a transaction ledger, beneficiaries and atomic simulated transfers. Demo only — no real money, no real banks.

    #fintech#banking#mobile#ledger
    Platform
    Mobile
    Scenarios
    7 scenarios
    Live demo
    Live demo
    Template
    from mobile-app
    Status
    Ready
  • Northwind Help

    support-widget-demo

    Flagship support chat widget for a fictional outdoor-gear store: order lookup, returns, human handoff and offline mode on the widget-host shell. Demo only — no real orders or money.

    #support#chat#widget#orders
    Platform
    Responsive
    Scenarios
    5 scenarios
    Live demo
    Live demo
    Status
    Ready
  • Nova Assistant

    nova-assistant-demo

    A simulated AI flagship with voice, agent tools, an embeddable widget and 5,000-message history.

    #ai#assistant#agents#voice
    Platform
    Responsive
    Scenarios
    8 scenarios
    Live demo
    Live demo
    Template
    from ai-assistant
    Status
    Active
  • Pebblestat Analytics

    pebblestat-analytics-demo

    Fictional product analytics in the spirit of Mixpanel: projects, tracked events and users, saved reports, an editable dashboard, segments, metric alerts that fire as simulated time advances, and release annotations, with owner, analyst and viewer personas.

    #analytics#product-analytics#dashboard#charts
    Platform
    Responsive
    Scenarios
    6 scenarios
    Live demo
    Live demo
    Template
    from analytics
    Status
    Ready
  • Pipeline CRM

    crm-demo

    A lightweight sales CRM: companies, contacts, an editable deal pipeline and activity history — with owner, admin, sales-rep and viewer personas.

    #crm#sales#pipeline#dashboard
    Platform
    Responsive
    Scenarios
    9 scenarios
    Live demo
    Live demo
    Template
    from dashboard
    Status
    Ready
  • A living showcase of every @protoyard/ui component, patterns, forms and a theme lab with live tokens and contrast ratios.

    #design-system#components#themes#accessibility
    Platform
    Responsive
    Scenarios
    3 scenarios
    Live demo
    Live demo
    Status
    Ready
  • Protoyard: create anything

    create-anything-deck

    The flagship deck: what Protoyard builds from a single JSON file, shown with every layout family, live charts, interactive blocks and an app embedded in a slide.

    #deck#presentation#slides
    Platform
    Responsive
    Scenarios
    1 scenario
    Live demo
    Live demo
    Template
    from deck
    Status
    Ready
  • Pulse Revenue

    pulse-revenue-demo

    A fictional revenue intelligence workspace with trend-shaped transaction data, an analytics explorer and lazy dashboard charts.

    #analytics#revenue#saas
    Platform
    Responsive
    Scenarios
    4 scenarios
    Live demo
    Live demo
    Template
    from crud-app
    Status
    Ready
  • A team chat where people and scripted AI agents collaborate: conversations, streamed agent replies, unread badges, search, and failure states. No real AI API.

    #ai#chat#agents#messaging
    Platform
    Responsive
    Scenarios
    6 scenarios
    Live demo
    Live demo
    Template
    from chat
    Status
    Ready
  • Relay Chat

    relay-chat-demo

    Fictional company team chat with channels, threads, an AI teammate, slash commands and simulated huddles. Simulated AI only.

    #ai#chat#team#slack
    Platform
    Responsive
    Scenarios
    4 scenarios
    Live demo
    Live demo
    Template
    from team-chat
    Status
    Active

Templates

Starting points for new prototypes. They are copied, never edited in place.

Create prototype