> ## Documentation Index
> Fetch the complete documentation index at: https://docs.inklyai.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Overview

> How demo.config.json is organized.

`demo.config.json` is the source file for one interactive demo. It describes the story a viewer sees: the screens, messages, cover pages, forms, captions, and buttons.

Most teams edit this visually in Inkly or with an AI agent. Use this reference when you want to understand what those tools save in the repo.

```json theme={null}
{
  "id": "k3Bq-7Zr_a1X",
  "version": 1,
  "title": "Onboarding tour",
  "chapters": [
    { "id": "intro", "title": "Get started", "stepIds": ["cover", "s1"] }
  ],
  "steps": []
}
```

<CardGroup cols={2}>
  <Card title="Top-level fields" icon="sliders" href="/schema/demo/top-level">
    Configure demo identity, visibility, chrome, background, theme, and aspect ratio.
  </Card>

  <Card title="Content steps" icon="image" href="/schema/demo/content-steps">
    Define product screens, media backgrounds, zoom, narration, and captions.
  </Card>

  <Card title="Annotations" icon="mouse-pointer-click" href="/schema/demo/annotations">
    Add messages, blur masks, and text labels over content steps.
  </Card>

  <Card title="Cover steps" icon="panel-top" href="/schema/demo/cover-steps">
    Add intro, transition, closing, lead-capture, and embedded-content screens.
  </Card>

  <Card title="Widgets" icon="layout-template" href="/schema/demo/widgets">
    Configure headline, form, embed, custom, and image widgets for cover steps.
  </Card>

  <Card title="Navigation and actions" icon="route" href="/schema/demo/navigation-and-actions">
    Define chapters, captions, CTAs, and button destinations.
  </Card>
</CardGroup>

## File location

A hub stores demos under `demos/<slug>/`. Each demo folder has a `demo.config.json` file and may also include `assets.json`, `public/`, and `snapshots/`.

```text theme={null}
demos/
  onboarding/
    demo.config.json
    assets.json
    public/
    snapshots/
```

For managed media references, see [Assets](/schema/assets).