Dev Tools

This page provides developer tools and helpers for Livepeer docs contributors, including VS Code snippets for frontmatter, Mintlify components, and custom Livepeer components.

Dev Tools for Livepeer Docs

Here are some tools to help you write and maintain Livepeer docs more efficiently.

Reference Maps

• Icon Map - proposed icon-to-usage map for tabs, accordions, cards, portal navigation, and guide surfaces.

AI Skills

MDX Templates

VS Code Snippets

Workspace snippets in .vscode/ — available to all contributors automatically when they open this repo.

Three snippet files, organised by scope:

File	Snippets	Scope
.vscode/mdx.code-snippets	17	Frontmatter, page scaffolds, and reusable MDX blocks
.vscode/mintlify.code-snippets	25	Mintlify built-in components
.vscode/components.code-snippets	115	Custom Livepeer components

JSX tag snippets accept both bare names such as Card and opening-tag prefixes such as <Card, so you can expand them after typing the angle bracket without ending up with <<.

Frontmatter snippets (7)

Source: .vscode/mdx.code-snippets

frontmatter — full block with auto-filled title and date:

frontmatter snippet

---
title: 'Explorer' # ← auto-filled from filename
sidebarTitle: Explorer
description: 'Description of explorer'
audience: developer # ← dropdown: 9 canonical values
pageType: guide # ← dropdown: 12 canonical values
purpose: how_to
status: draft
lastVerified: 2026-03-11 # ← auto-filled today's date
keywords:
  - livepeer
  - keyword
'og:image': /snippets/assets/media/og-images/fallback.png
'og:image:alt': Livepeer Docs social preview image
'og:image:type': image/png
'og:image:width': 1200
'og:image:height': 630
---

fm — minimal frontmatter (title + description only).

Individual field snippets — each inserts one YAML line with a dropdown of canonical values:

Prefix	Values
pageType	landing, overview, tutorial, quickstart, how_to, concept, reference, faq, troubleshooting, changelog, glossary, guide
audience	developer, gateway-operator, orchestrator, delegator, platform-builder, community, internal, general, everyone
status	draft, review, current, published, deprecated, coming-soon, production, provisional, verified_2026
purpose	landing, overview, walkthrough, how_to, explanation, reference, troubleshooting, faq, changelog, glossary
lastVerified	Auto-fills today’s date

Mintlify built-in snippets (25)

Source: .vscode/mintlify.code-snippets

Type any Mintlify component name, with or without the opening <, to insert it with placeholder props.

Prefix	What it inserts
Card	<Card title icon href>
CardGroup	<CardGroup cols> with 2 starter cards
Tabs	<Tabs> with 2 starter tabs
Tab	Single <Tab title>
Steps	<Steps> with 2 starter steps
Step	Single <Step title>
Accordion	<Accordion title icon>
AccordionGroup	<AccordionGroup> with 2 starter accordions
CodeGroup	<CodeGroup> with 2 code blocks
Note	<Note> callout
Warning	<Warning> callout
Info	<Info> callout
Tip	<Tip> callout
Check	<Check> success callout
Frame	<Frame> container
FrameCaption	<Frame caption> with caption
Tooltip	<Tooltip tip> inline
ResponseField	<ResponseField name type>
Expandable	<Expandable title>
ParamField	<ParamField path type>
Snippet	<Snippet file> include
Icon	<Icon icon size>
Columns	<Columns> two-column layout
Column	Single <Column>
Update	<Update label> changelog entry

Custom components — primitives (28)

Source: .vscode/components.code-snippets — generated from docs-guide/config/component-registry.json.

Most used:

primitives examples

<CustomDivider />

<CustomDivider middleText="OVERVIEW" />

<GotoCard
  label="Resource Index"
  relativePath="/v2/resources/portal"
  text="Find more resources in the Resource Hub"
/>

Also available: DoubleIconLink, GotoLink, LinkArrow, BlinkingIcon, MathBlock, MathInline, Image, CardTitleTextWithArrow, DownloadButton, PreviewCallout, CustomCallout, Subtitle, AccordionTitleWithArrow, TipWithArrow, ComingSoonCallout, CopyText, FocusableScrollRegions, LivepeerIcon, BlinkingTerminal, LinkImage, LivepeerSVG, ReviewCallout, SocialLinks

Custom components — layout (29)

Most used:

layout examples

<BorderedBox variant="accent" padding="16px">
  content
</BorderedBox>

<DynamicTable margin="0" />

<StyledStep title="Connect your GPU">
  content
</StyledStep>

Also available: StyledSteps, StyledTable, TableCell, TableRow, DisplayCard, FlexContainer, WidthCard, QuadGrid, ScrollBox, AccordionLayout, InlineImageCard, StepLinkList, StepList, UpdateLinkList, CardCarousel, CenteredContainer, FullWidthContainer, GridContainer, InteractiveCard, InteractiveCards, ListSteps, SearchTable, Spacer

Custom components — content (24)

Most used:

content examples

<ScrollableDiagram title="Livepeer Protocol Contract Architecture" maxHeight="600px">
  content
</ScrollableDiagram>

<YouTubeVideo embedUrl="https://www.youtube.com/embed/4xOuRIVLnv8?si=5Bq9ROCnp_JamVmf"
  author="Doug Petkanics"
  title="A Decade of Bleeding Edge Innovation" />

<CustomCodeBlock {...DOCKER_CODE.install} />

For code samples, include an icon and preferably a filename or title. Use terminal as the default icon when a more specific icon is not needed.

Also available: Quote, FrameQuote, CustomResponseField, ValueResponseField, CodeComponent, CodeSection, ComplexCodeBlock, ResponseFieldAccordion, ResponseFieldExpandable, TwitterTimeline, YouTubeVideoData, CardVideo, ShowcaseVideo, TitledVideo, Video, YouTubeVideoDownload, ExternalContent, LinkedInEmbed, MarkdownEmbed, ResponseFieldGroup

Custom components — page-structure (21)

Most used — portal hero pattern:

page-structure examples

<HeroSectionContainer>
  <HeroImageBackgroundComponent>
    <HeroContentContainer>
      content
    </HeroContentContainer>
  </HeroImageBackgroundComponent>
</HeroSectionContainer>

Also available: LogoHeroContainer, PortalCardsHeader, PortalContentContainer, PortalHeroContent, Starfield, H1, H2, H3, H4, H5, H6, P, CustomCardTitle, PortalSectionHeader, Divider, HeroOverviewContent, PageHeader, RefCardContainer

Custom components — data (14)

Most used:

data examples

<PdfEmbed title="Livepeer Brand Guidelines"
  src="https://www.dropbox.com/scl/fi/tblvrdl3chfklvujhri19/Livepeer-Brand-Guidelines.pdf?rlkey=mfp3zj8kbp8aw3z0kqhez8wn9&st=or62duey&raw=1" />

<CoinGeckoExchanges coinId="livepeer" />

<ForumLatestLayout items={forumData} limit={2} />

Also available: BlogCard, CardBlogDataLayout, CardColumnsPostLayout, ColumnsBlogCardLayout, DiscordAnnouncements, PostCard, LumaEvents, ShowcaseCards, BlogDataLayout, CardInCardLayout, LatestVersion

Regenerate UI template catalog and VS Code snippets after registry changes:

regenerate UI templates and snippets

node operations/scripts/generators/components/library/generate-ui-templates.js --write