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.

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

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

snippets/templates

blocks

pages

Page Templates

Template	Source	Preview	Snippet Prefix	Description
FAQ Page Template	`snippets/templates/pages/faq-page.mdx`	view	`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	`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	`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	`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	`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	`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	`template-openapi-endpoint-page`	Copy-ready OpenAPI endpoint page scaffold with canonical reference frontmatter.
Reference Page Template	`snippets/templates/pages/reference-page.mdx`	view	`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	`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	`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	`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	`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	`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	`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	`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.

Home

Livepeer

Showcase

Resources

UI System

UI System

Components

Templates

Overview

Source Tree

Page Templates

Block Templates

Snippets

​UI System

​Components

​Templates

​Overview

​Source Tree

​Page Templates

​Block Templates

​Snippets

UI System

Components

Templates

Overview

Source Tree

Page Templates

Block Templates

Snippets