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

# UI System

> Internal map of the UI authoring system: components, templates, and generated snippets.

# UI System

This page tracks the internal UI authoring system for contributors and agents. It covers the governed component inventory, canonical template sources, and the generated VS Code snippets used to assemble new documentation pages.

## Components

* Governed JSX components live in `snippets/components/`.
* The generated component inventory lives in `docs-guide/catalog/components-catalog.mdx`.
* Component snippets are generated from `docs-guide/config/component-registry.json`.

## Templates

The section below is generated from the canonical `snippets/templates/**` source tree.

[//]: # "AUTO-GENERATED:UI-TEMPLATES:START"

<Note>
  **Generated section**: This section is synchronized by `operations/scripts/generators/components/library/generate-ui-templates.js`. Do not edit the generated block by hand. <br />
</Note>

### Overview

* Canonical page templates live in `snippets/templates/pages/**` and generate one direct preview route each.
* Canonical block templates live in `snippets/templates/blocks/**` and render together on `/templates/blocks/block-examples`.
* Generated authoring snippets live in `.vscode/templates.code-snippets` and `.vscode/components.code-snippets`.

### Source Tree

<Tree>
  <Tree.Folder name="snippets/templates" defaultOpen>
    <Tree.Folder name="blocks">
      <Tree.File name="comparison-matrix.mdx" />

      <Tree.File name="comparison-table.mdx" />

      <Tree.File name="related-pages-cards.mdx" />

      <Tree.File name="related-pages-cta.mdx" />
    </Tree.Folder>

    <Tree.Folder name="pages">
      <Tree.Folder name="landing-and-navigation">
        <Tree.File name="navigation-page.mdx" />

        <Tree.File name="portal-page.mdx" />
      </Tree.Folder>

      <Tree.Folder name="reference-and-api">
        <Tree.File name="openapi-endpoint-page.mdx" />
      </Tree.Folder>

      <Tree.Folder name="setup-and-code-layouts">
        <Tree.File name="multi-view-page.mdx" />
      </Tree.Folder>

      <Tree.File name="faq-page.mdx" />

      <Tree.File name="how-to-page.mdx" />

      <Tree.File name="landing-frame-page.mdx" />

      <Tree.File name="overview-page.mdx" />

      <Tree.File name="reference-page.mdx" />

      <Tree.File name="troubleshooting-page.mdx" />

      <Tree.File name="tutorial-page.mdx" />
    </Tree.Folder>
  </Tree.Folder>
</Tree>

### Page Templates

| Template                      | Source                                                                 | Preview                                                                   | Snippet Prefix                   | Description                                                                                                                                                              |
| ----------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------- | -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| FAQ Page Template             | `snippets/templates/pages/faq-page.mdx`                                | [view](/templates/pages/faq-page-template)                                | `template-faq-page`              | Copy-ready FAQ page scaffold with canonical frontmatter and AccordionGroup structure.                                                                                    |
| How-To Page Template          | `snippets/templates/pages/how-to-page.mdx`                             | [view](/templates/pages/how-to-page-template)                             | `lp-howto`                       | Task-oriented page scaffold with prerequisites, steps, validation, and a next-step CTA.                                                                                  |
| Navigation Page Template      | `snippets/templates/pages/landing-and-navigation/navigation-page.mdx`  | [view](/templates/pages/landing-and-navigation/navigation-page-template)  | `template-navigation-page`       | Copy-ready navigation page scaffold with route cards for readers who need a section map.                                                                                 |
| Portal Page Template          | `snippets/templates/pages/landing-and-navigation/portal-page.mdx`      | [view](/templates/pages/landing-and-navigation/portal-page-template)      | `template-portal-page`           | Copy-ready portal landing page scaffold with frame-mode hero content and mission cards.                                                                                  |
| Landing Frame Page Template   | `snippets/templates/pages/landing-frame-page.mdx`                      | [view](/templates/pages/landing-frame-page-template)                      | `lp-landing-frame`               | Frame-mode landing page scaffold with hero content, start-here cards, and key-path cards.                                                                                |
| Overview Page Template        | `snippets/templates/pages/overview-page.mdx`                           | [view](/templates/pages/overview-page-template)                           | `lp-overview`                    | Reusable overview page scaffold with an overview section, key ideas, and related links.                                                                                  |
| OpenAPI Endpoint Template     | `snippets/templates/pages/reference-and-api/openapi-endpoint-page.mdx` | [view](/templates/pages/reference-and-api/openapi-endpoint-page-template) | `template-openapi-endpoint-page` | Copy-ready OpenAPI endpoint page scaffold with canonical reference frontmatter.                                                                                          |
| Reference Page Template       | `snippets/templates/pages/reference-page.mdx`                          | [view](/templates/pages/reference-page-template)                          | `lp-reference`                   | Lookup-oriented reference scaffold with inputs, outputs, and a concrete example.                                                                                         |
| Multi-View Setup Template     | `snippets/templates/pages/setup-and-code-layouts/multi-view-page.mdx`  | [view](/templates/pages/setup-and-code-layouts/multi-view-page-template)  | `template-multi-view-page`       | Copy-ready scaffold for setup guides that switch between platform or environment views and include nested mode tabs, code blocks, reference cards, and validation steps. |
| Troubleshooting Page Template | `snippets/templates/pages/troubleshooting-page.mdx`                    | [view](/templates/pages/troubleshooting-page-template)                    | `template-troubleshooting-page`  | Copy-ready troubleshooting page scaffold with Symptom, Cause, Fix, and Verify sections.                                                                                  |
| Tutorial Page Template        | `snippets/templates/pages/tutorial-page.mdx`                           | [view](/templates/pages/tutorial-page-template)                           | `lp-tutorial`                    | End-to-end tutorial scaffold with goals, prerequisites, steps, and follow-up links.                                                                                      |

### Block Templates

| Template                                  | Source                                              | Preview                                            | Snippet Prefix               | Description                                                                                   |
| ----------------------------------------- | --------------------------------------------------- | -------------------------------------------------- | ---------------------------- | --------------------------------------------------------------------------------------------- |
| Comparison Matrix Template                | `snippets/templates/blocks/comparison-matrix.mdx`   | [block examples](/templates/blocks/block-examples) | `template-comparison-matrix` | Reusable comparison and decision matrix for product or architecture choice pages.             |
| Comparison Table Block                    | `snippets/templates/blocks/comparison-table.mdx`    | [block examples](/templates/blocks/block-examples) | `template-comparison-table`  | Reusable comparison table block for choosing between options, workflows, or deployment paths. |
| Related Pages Cards Block                 | `snippets/templates/blocks/related-pages-cards.mdx` | [block examples](/templates/blocks/block-examples) | `template-related-pages`     | Reusable related-pages card group for end-of-page CTA sections.                               |
| Related Pages CTA Template                | `snippets/templates/blocks/related-pages-cta.mdx`   | [block examples](/templates/blocks/block-examples) | `template-related-pages-cta` | Reusable related-pages block template for routing readers to the next two pages.              |
| [//]: # (AUTO-GENERATED:UI-TEMPLATES:END) |                                                     |                                                    |                              |                                                                                               |

## Snippets

* Generic MDX helpers remain in `.vscode/mdx.code-snippets`.
* Page/block template snippets are generated into `.vscode/templates.code-snippets`.
* Component tag snippets are generated into `.vscode/components.code-snippets`.