BuilderStory

section · interactive (ships a small web component) · no children. All components: component playground.

Description for the model

A looping animation of the studio course builder: a document drops in, interview answers appear, an outline grows with a source chip per lesson, a lesson streams in with citations, a quiz question cites its source, a running cost ticks (example values) and Apply publishes the course.

Live example

Rendered from the example props below with the real component. Theme: coffee · oncall · nightsky · gravity · poland · ulam · platform · open on its own

Example

{
  "component": "BuilderStory",
  "props": {
    "id": "builder",
    "eyebrow": "course builder",
    "title": "Build a course from a document in minutes",
    "intro": "Drop in a runbook, answer three questions, and review a cited outline and drafts before anything goes live.",
    "valueLine": "From a PDF to a published, cited course, with you approving every step.",
    "description": "An animated example of the studio course builder. A file named incident-runbook.pdf is dropped in, three interview answers appear (engineers, 45 minutes, a quiz per lesson), an outline of three modules and five lessons grows with a source chip on each lesson, one lesson streams in with citations, a quiz question cites its source, an example cost counter reaches 18 cents, and Apply publishes the course.",
    "file": {
      "name": "incident-runbook.pdf",
      "label": "PDF"
    },
    "interview": [
      {
        "question": "Audience",
        "answer": "Engineers"
      },
      {
        "question": "Length",
        "answer": "45 min"
      },
      {
        "question": "Practice",
        "answer": "Quiz per lesson"
      }
    ],
    "outline": [
      {
        "title": "Detect and declare",
        "lessons": [
          {
            "title": "What counts as an incident",
            "source": "runbook p.2"
          },
          {
            "title": "Severity levels",
            "source": "runbook p.3"
          }
        ]
      },
      {
        "title": "Triage and mitigate",
        "lessons": [
          {
            "title": "The first ten minutes",
            "source": "runbook p.5"
          },
          {
            "title": "Roll back or roll forward",
            "source": "runbook p.6"
          }
        ]
      },
      {
        "title": "Learn from it",
        "lessons": [
          {
            "title": "Blameless postmortems",
            "source": "runbook p.9"
          }
        ]
      }
    ],
    "lesson": {
      "title": "Severity levels",
      "text": "Sev 1 means customers cannot check out. Page the on-call lead and open an incident channel straight away.",
      "citations": [
        "runbook p.3 · Severity",
        "runbook p.4 · Paging"
      ]
    },
    "quiz": {
      "question": "Who declares a Sev 1?",
      "source": "runbook p.3"
    },
    "cost": {
      "label": "Cost so far",
      "amount": 0.18,
      "note": "Example run, not a quote"
    },
    "apply": {
      "label": "Apply",
      "publishedTitle": "Incident response",
      "publishedMeta": "· 5 lessons · 1 quiz · published"
    }
  }
}

Props

Prop	Type	Required	Notes
eyebrow	string		Small label above the title. max length 80
title	string		Section title. max length 160
intro	string		One or two sentences under the title. max length 600
valueLine	string		One line of value copy under the animation. max length 200
description	string	yes	Text alternative of the whole animation for screen readers. max length 600
windowTitle	string		Window title. max length 60
file	object	yes
file.name	string	yes	File name. max length 60
file.label	string		Small label. max length 30
interview	array of objects	yes	Interview answers. min 1 items, max 4 items
interview[].question	string	yes	Question. max length 30
interview[].answer	string	yes	Answer. max length 30
outline	array of objects	yes	Modules. min 1 items, max 4 items
outline[].title	string	yes	Module title. max length 60
outline[].lessons	array of objects	yes	Lessons. min 1 items, max 4 items
outline[].lessons[].title	string	yes	Lesson title. max length 60
outline[].lessons[].source	string	yes	Source chip. max length 30
lesson	object	yes
lesson.title	string	yes	Lesson shown streaming in. max length 60
lesson.text	string	yes	Its text. max length 240
lesson.citations	array of string		Citation chips. max 3 items
quiz	object	yes
quiz.question	string	yes	Quiz question. max length 120
quiz.source	string	yes	Source chip. max length 30
cost	object	yes
cost.label	string	yes	Counter label. max length 30
cost.amount	number	yes	Final amount shown (an example). ≥ 0
cost.note	string		Note, e.g. ‘example run’. max length 60
apply	object	yes
apply.label	string	yes	Apply button. max length 24
apply.publishedTitle	string	yes	Published course title. max length 60
apply.publishedMeta	string	yes	Facts after the title. max length 80
id	string		Anchor id for in-page links (letters, digits, dashes). max length 40

Text fallback

What a text-only client, an unknown renderer or a plain-text channel shows for the example above.

Build a course from a document in minutes
Drop in a runbook, answer three questions, and review a cited outline and drafts before anything goes live.
An animated example of the studio course builder. A file named incident-runbook.pdf is dropped in, three interview answers appear (engineers, 45 minutes, a quiz per lesson), an outline of three modules and five lessons grows with a source chip on each lesson, one lesson streams in with citations, a quiz question cites its source, an example cost counter reaches 18 cents, and Apply publishes the course.

Invalid props

A node whose props fail the schema never breaks the page: the renderer shows the plain-text fallback instead (and logs the issues in development).

{
  "interview": []
}

Issues:

• /description is required
• /file is required
• /outline is required
• /lesson is required
• /quiz is required

Rendered as:

Nothing: this component has no text of its own.

Accessibility

axe-core: 13 rules passed, 0 violations, 0 need manual review. Run at build time on the server-rendered HTML in jsdom. Colour contrast and layout rules need a browser and are covered by the Playwright axe scans of the reference frontend.