← Portfolio  ·  Demo · sample data, no client data
9:41Demo Studio■ ▬ ◩
DS
Demo Studio
Intake
Demo · sample data

Welcome

Let’s learn what you need to build.

This questionnaire is driven by a JS schema object — every question, type, and conditional is defined as data. The answers come back out as structured JSON.

Answer the sample questions, then export the payload.

Nothing submits until you reach Export JSON.

Review answers

Tap any row to edit. Then export.

Payload ready

Structured JSON output

The schema drives both the UI and the export shape. Every field key maps directly to its schema ID.

// schema-keyed payload

      
Questions = Data. Add a field to the schema and it appears in the form AND in this export, automatically keyed and typed.

Intake / Fact-Finding Tool

Schema-driven discovery questionnaire. The entire form — sections, fields, types, conditional follow-ups — is defined by one JS object. Edit the schema, the UI and JSON export update automatically.

What it does

Renders a multi-section intake form from a declarative JS schema. Supports text, select (single/multi), radio, and conditional reveal fields. Collects answers and exports a typed JSON payload keyed to the schema.

Inputs

Schema definition (sections + field types + conditional rules) • user’s form answers

Outputs

Structured JSON payload: schema-keyed answers with question text, section label, and typed value — ready for API, DB, or PDF generation

Schema snippet

{ id:"project_type", section:"Basics", type:"single", title:"What are we building?", options:[ {value:"web", label:"Website"}, {value:"app", label:"Web app"}, {value:"api", label:"API / backend"} ] }, { id:"has_branding", section:"Basics", type:"single", conditional:true, title:"Do you have branding?", options:[{value:"yes",label:"Yes"},{value:"no",label:"No"}] }, // ↓ only appears when has_branding === "yes" { id:"brand_assets", section:"Basics", type:"text", showWhen:{field:"has_branding",value:"yes"}, title:"Describe your brand assets" }

The schema is the source of truth for both the rendered form and the exported JSON shape.

Real app: OOG Intake — vanilla JS + Express + Supabase, deployed on Vercel. The schema drives an onboarding questionnaire; answers are stored to a DB and emailed to the team. This demo uses fictional sample data (Meridian Labs) — no real client data.