lpd-mdx-preview — VS Code Extension

Overview

lpd-mdx-preview is a VS Code extension that renders .mdx and .md files in a side panel with governed Mintlify built-ins, Livepeer custom component renderers, and Mermaid diagrams. It is the primary local authoring preview tool for this repo, but runtime-dependent surfaces still need verification in a Mintlify dev session. Keybinding: Cmd+Shift+V (Mac) / Ctrl+Shift+V (Windows/Linux) Location: tools/editor-extensions/lpd-mdx-preview/

Repo Context

tools/editor-extensions/lpd-mdx-preview

extension.js

package.json

README.md

lib

media

lpd-mdx-preview-0.0.2.vsix

Installation

Works in VS Code, Cursor, and Windsurf (all VS Code forks). The same .vsix file installs in all three. All editors at once (recommended):

bash tools/editor-extensions/install.sh

Detects which editors are installed (~/.vscode, ~/.cursor, ~/.windsurf) and deploys to each. The installer verifies that the checked-in .vsix matches source before installing. If the package is stale, the install fails and prints the exact rebuild command. Manual install: Extensions sidebar → ... menu → Install from VSIX → select tools/editor-extensions/lpd-mdx-preview/lpd-mdx-preview-0.0.2.vsix. Rebuild after source changes:

cd tools/editor-extensions/lpd-mdx-preview
npx @vscode/vsce package --no-dependencies -o lpd-mdx-preview-0.0.2.vsix

Then re-run install.sh or reinstall manually.

Usage

Open preview

Open any .mdx or .md file, then press Cmd+Shift+V (Mac) or Ctrl+Shift+V (Windows/Linux).The preview opens in a side panel and updates automatically as you type (300ms debounce).

Theme

The preview detects your VS Code colour theme automatically (auto mode). You can override this in settings:

"livepeer.mdxPreview.theme": "dark"

Options: auto | light | dark

Frontmatter display

Frontmatter is stripped from the preview body and rendered as a header bar showing: title, pageType, audience, status, purpose, and lastVerified.

Mermaid diagrams

Fenced code blocks tagged with mermaid are rendered using the bundled Mermaid.js with Livepeer theme colours. Diagrams update live as you edit.

Component Rendering Tiers

Custom components (your own project .jsx files) fall into Tier 3 — they render as labelled placeholders with their children content visible. Most Mintlify built-ins and the Livepeer component library render as styled HTML, but runtime-heavy built-ins such as OpenAPI remain approximate.

Component Reference

Tier 1 — Mintlify Built-ins

Note / Tip / Warning / Info

Purpose: Callout boxes for supplementary information.

<Note>Standard info callout.</Note>
<Tip>Helpful suggestion.</Tip>
<Warning>Something to watch out for.</Warning>
<Info>Neutral informational note.</Info>

Prop	Type	Default	Description
(none)	—	—	Content passed as children

Callout

Purpose: Generic callout with a custom Font Awesome icon.

<Callout icon="rocket">Custom callout with icon.</Callout>

Prop	Type	Default	Description
`icon`	string	`info`	Font Awesome icon name (e.g. `rocket`, `star`)

Card

Purpose: Linked or unlinked content card with optional icon and arrow.

<Card title="Gateway Setup" icon="server" href="/v2/gateways/setup" arrow>
  Run your first gateway in minutes.
</Card>

<Card title="Horizontal" icon="code" href="/v2/developers" arrow horizontal>
  Displayed inline.
</Card>

Prop	Type	Default	Description
`title`	string	—	Card heading
`icon`	string	—	Font Awesome icon name
`href`	string	—	Link target; wraps card in `<a>`
`arrow`	boolean	`false`	Appends `→` to title
`horizontal`	boolean	`false`	Inline flex layout

CardGroup

Purpose: Responsive grid wrapper for <Card> components.

<CardGroup cols={2}>
  <Card title="One" />
  <Card title="Two" />
</CardGroup>

Prop	Type	Default	Description
`cols`	1 \| 2 \| 3 \| 4	`2`	Number of grid columns

Tabs / Tab

Purpose: Interactive tabbed content sections.

<Tabs>
  <Tab title="On-chain" icon="link">Content for tab one.</Tab>
  <Tab title="Off-chain" icon="cloud">Content for tab two.</Tab>
</Tabs>

Tab props:

Prop	Type	Default	Description
`title`	string	`Tab`	Tab label
`icon`	string	—	Font Awesome icon name

Accordion / AccordionGroup

Purpose: Collapsible content sections. Rendered as <details>/<summary> in the preview.

<AccordionGroup>
  <Accordion title="From a Cloud Background?" icon="cloud">
    Content here.
  </Accordion>
</AccordionGroup>

Accordion props:

Prop	Type	Default	Description
`title`	string	`Details`	Summary/header text
`icon`	string	—	Font Awesome icon name

Steps / Step

Purpose: Numbered step-by-step walkthrough.

<Steps>
  <Step title="Install dependencies">Run `npm install`.</Step>
  <Step title="Configure">Set your environment variables.</Step>
</Steps>

Step props:

Prop	Type	Default	Description
`title`	string	—	Step heading

Frame

Purpose: Bordered container for isolating content visually. No props — content as children.

<Frame>
  <img src="/path/to/image.png" />
</Frame>

Columns

Purpose: Two-column layout grid. No props.

<Columns>
  <div>Left</div>
  <div>Right</div>
</Columns>

Expandable

Purpose: Show/hide toggle for secondary content.

<Expandable title="Advanced options">Hidden until expanded.</Expandable>

Prop	Type	Default	Description
`title`	string	`Show more`	Toggle label

CodeBlock

Purpose: Code block container. Rendered as plain <pre><code> in the preview without syntax highlighting.

<CodeBlock language="bash">livepeer -gateway</CodeBlock>

Prop	Type	Default	Description
`language`	string	—	Language identifier (e.g. `bash`, `json`)

Icon

Purpose: Inline Font Awesome icon.

<Icon icon="rocket" />

Prop	Type	Default	Description
`icon`	string	—	Font Awesome icon name
`name`	string	—	Alias for `icon`

Update

Purpose: Changelog or versioned annotation with a label.

<Update label="Q4 2025">Off-chain gateway mode shipped.</Update>

Prop	Type	Default	Description
`label`	string	—	Date or version label
`date`	string	—	Alias for `label`

ResponseField

Purpose: API response field documentation row.

<ResponseField name="id" type="string">
  Unique identifier for the job.
</ResponseField>

Prop	Type	Default	Description
`name`	string	—	Field name (rendered in accent colour)
`type`	string	—	Data type label

ParamField

Purpose: API parameter documentation row.

<ParamField path="streamId" type="string" required>
  Stream identifier passed in the URL path.
</ParamField>

Prop	Type	Default	Description
`path`	string	—	Path parameter name
`query`	string	—	Query parameter name
`body`	string	—	Request-body field name
`header`	string	—	Header name
`type`	string	—	Data type label
`required`	boolean	`false`	Adds a required marker

Danger

Purpose: High-severity callout variant.

<Danger>Do not expose this secret in client-side code.</Danger>

Badge

Purpose: Inline pill label with accent styling.

<Badge color="var(--accent)">Preview</Badge>

Prop	Type	Default	Description
`color`	string	`var(--accent)`	Accent colour used for border, text, and background tint
`text`	string	—	Fallback text when no children are passed

CodeGroup

Purpose: Group multiple code blocks in one bordered container.

<CodeGroup>
  <CodeBlock language="bash">npm install</CodeBlock>
  <CodeBlock language="bash">npm run dev</CodeBlock>
</CodeGroup>

Tree / Tree.Folder / Tree.File

Purpose: Repo-style file tree rendering using canonical Mintlify syntax.

<Tree>
  <Tree.Folder name="src" defaultOpen>
    <Tree.File name="index.js" />
  </Tree.Folder>
</Tree>

Tree.Folder props:

Prop	Type	Default	Description
`name`	string	`folder`	Folder label
`defaultOpen`	boolean	`false`	Expands the folder by default

Tree.File props:

Prop	Type	Default	Description
`name`	string	`file`	File label

OpenAPI

Purpose: API reference embed. The preview renders a descriptive placeholder rather than the full interactive Mintlify API experience.

<OpenAPI method="get" path="/asset/{id}" />

Prop	Type	Default	Description
`method`	string	—	HTTP method label
`path`	string	—	API path shown in the placeholder
`openapi`	string	—	Alias for `path`

StyledTable / TableRow / TableCell

Purpose: Styled HTML table with header and body rows.

<StyledTable>
  <TableRow header>
    <TableCell header>Column A</TableCell>
    <TableCell header>Column B</TableCell>
  </TableRow>
  <TableRow>
    <TableCell>Value</TableCell>
    <TableCell>Value</TableCell>
  </TableRow>
</StyledTable>

TableRow props:

Prop	Type	Default	Description
`header`	boolean	`false`	Renders row with header background

TableCell props:

Prop	Type	Default	Description
`header`	boolean	`false`	Renders as `<th>` with bold weight

Tier 2 — Livepeer Custom Components

Spacing

CustomDivider

Purpose: Horizontal rule with optional centred label text.Location: snippets/components/elements/spacing/Divider.jsx

<CustomDivider />
<CustomDivider middleText="Role Evolution" />

Prop	Type	Default	Description
`middleText`	string	—	Text centred in the divider
`text`	string	—	Alias for `middleText`

Spacer

Purpose: Explicit vertical whitespace block.

<Spacer height="48px" />

Prop	Type	Default	Description
`height`	string	`24px`	CSS height value
`size`	string	—	Alias for `height`

Divider

Purpose: Plain <hr> divider. No props.

<Divider />

Containers

CenteredContainer

Purpose: Constrains content width and centres it horizontally.Location: snippets/components/wrappers/containers/Containers.jsx

<CenteredContainer maxWidth="960px">
  Content here.
</CenteredContainer>

Prop	Type	Default	Description
`maxWidth`	string	`100%`	CSS max-width value

BorderedBox

Purpose: Card-like container with a visible border.

<BorderedBox borderColor="#2d9a67" padding="24px">
  Content here.
</BorderedBox>

Prop	Type	Default	Description
`borderColor`	string	`var(--border)`	CSS border colour
`backgroundColor`	string	`var(--card-bg)`	CSS background colour
`padding`	string	`16px`	CSS padding

FullWidthContainer

Purpose: Forces content to full available width. No props.

<FullWidthContainer>Content here.</FullWidthContainer>

FlexContainer

Purpose: Flexbox layout wrapper.

<FlexContainer direction="row" gap="16px" align="center">
  <div>Item A</div>
  <div>Item B</div>
</FlexContainer>

Prop	Type	Default	Description
`direction`	string	—	CSS `flex-direction` (`row`, `column`)
`gap`	string	`12px`	CSS gap
`align`	string	—	CSS `align-items`
`justify`	string	—	CSS `justify-content`
`wrap`	boolean	`false`	Enables `flex-wrap: wrap`

GridContainer

Purpose: CSS Grid layout wrapper.

<GridContainer columns="repeat(3, 1fr)" gap="16px">
  <div>Cell 1</div>
  <div>Cell 2</div>
  <div>Cell 3</div>
</GridContainer>

Prop	Type	Default	Description
`columns`	string	—	CSS `grid-template-columns` value
`gap`	string	`12px`	CSS gap

ScrollBox

Purpose: Scrollable container with a fixed maximum height.

<ScrollBox maxHeight="300px">Long content here.</ScrollBox>

Prop	Type	Default	Description
`maxHeight`	string	`400px`	CSS max-height value

Diagrams

ScrollableDiagram

Purpose: Horizontally scrollable wrapper for Mermaid or wide diagram content.Location: snippets/components/displays/diagrams/ScrollableDiagram.jsx

<ScrollableDiagram title="Gateway Role Evolution" maxHeight="420px">
```mermaid
flowchart LR
  A --> B
```
</ScrollableDiagram>

Prop	Type	Default	Description
`title`	string	—	Label shown above the diagram
`maxHeight`	string	—	CSS max-height to constrain tall diagrams

Links

LinkArrow

Purpose: Inline text link with → suffix.Location: snippets/components/elements/links/Links.jsx

<LinkArrow href="/v2/gateways/concepts/capabilities" label="Gateway Capabilities" newline={false} />

Prop	Type	Default	Description
`href`	string	`#`	Link target
`label`	string	—	Link text
`text`	string	—	Alias for `label`
`newline`	boolean	`true`	If `false`, renders inline (no line break)

GotoLink

Purpose: Arrow-prefixed inline link.

<GotoLink href="/v2/gateways">Go to Gateways</GotoLink>

Prop	Type	Default	Description
`href`	string	`#`	Link target
`label`	string	—	Override link text (otherwise uses children)

GotoCard

Purpose: Card that links to a destination.

<GotoCard href="/v2/gateways/setup">Setup content here.</GotoCard>

Prop	Type	Default	Description
`href`	string	`#`	Link target

Text & Headings

Subtitle

Purpose: Styled italic accent text. Used below page titles. No props.

<Subtitle>Understand how gateways route workloads.</Subtitle>

Quote / FrameQuote

Purpose: Blockquote with Livepeer accent border. FrameQuote adds an outer border frame. No props.

<Quote>Gateways are the demand side of the network.</Quote>
<FrameQuote>Framed and quoted.</FrameQuote>

H1 / H2 / H3 / H4 / H5 / H6

Purpose: Heading components with optional Font Awesome icon prefix. Used on FrameMode pages.

<H2 icon="server">Gateway Setup</H2>

Prop	Type	Default	Description
`icon`	string	—	Font Awesome icon name shown before heading text

Purpose: Explicit paragraph wrapper. Used on FrameMode pages. No props.

<P>Body text content here.</P>

CopyText

Purpose: Inline code-styled text value.

<CopyText text="livepeer -gateway -orchAddr 0x..." />

Prop	Type	Default	Description
`text`	string	—	Text to display as inline code
`value`	string	—	Alias for `text`

CardTitleTextWithArrow / AccordionTitleWithArrow

Purpose: Composable title elements with → suffix. No props — content as children.

<CardTitleTextWithArrow>Quick Start</CardTitleTextWithArrow>
<AccordionTitleWithArrow>Show Details</AccordionTitleWithArrow>

PageHeader

Purpose: Centred page title and subtitle block. Used on portal/landing pages.

<PageHeader title="Livepeer Gateways" subtitle="Everything you need to run a gateway node." />

Prop	Type	Default	Description
`title`	string	—	Main heading
`subtitle`	string	—	Subtitle below the heading

Cards

DisplayCard

Purpose: Standalone content card with title and icon.

<DisplayCard title="Run a Gateway" icon="server">
  Step-by-step instructions.
</DisplayCard>

Prop	Type	Default	Description
`title`	string	—	Card heading
`icon`	string	—	Font Awesome icon name

WidthCard

Purpose: Card constrained to a max width and centred.

<WidthCard width="600px">Constrained content.</WidthCard>

Prop	Type	Default	Description
`width`	string	`100%`	CSS max-width
`maxWidth`	string	—	Alias for `width`

InlineImageCard

Purpose: Card with an image on the left and content on the right.

<InlineImageCard src="/snippets/assets/logos/Livepeer-Logo-Symbol.svg">
  Description text here.
</InlineImageCard>

Prop	Type	Default	Description
`src`	string	—	Image source URL

InteractiveCard

Purpose: Card with a heading and freeform children content.

<InteractiveCard title="Configuration">Content here.</InteractiveCard>

Prop	Type	Default	Description
`title`	string	—	Card heading

CardCarousel

Purpose: Horizontally scrollable row of cards. No props.

<CardCarousel>
  <Card title="A" />
  <Card title="B" />
</CardCarousel>

Callout Banners

CustomCallout

Purpose: Styled callout with a custom icon (emoji or character).

<CustomCallout icon="🔧">Manual configuration required.</CustomCallout>

Prop	Type	Default	Description
`icon`	string	`ℹ️`	Icon character or emoji

TipWithArrow

Purpose: Tip callout with a 💡 icon. No props — content as children.

<TipWithArrow>Use the remote signer to skip ETH setup.</TipWithArrow>

ComingSoonCallout / PreviewCallout / ReviewCallout

Purpose: Status banners indicating a feature is pending, in preview, or under review. No props.

<ComingSoonCallout>Dashboard analytics</ComingSoonCallout>
<PreviewCallout>Python SDK support</PreviewCallout>
<ReviewCallout>Pricing model — subject to change</ReviewCallout>

Media

Image

Purpose: Image with optional caption.

<Image src="/snippets/assets/diagrams/gateway-flow.png" alt="Gateway flow" caption="Traffic routing through the gateway layer" />

Prop	Type	Default	Description
`src`	string	—	Image URL
`alt`	string	—	Alt text
`caption`	string	—	Caption displayed below image

LinkImage

Purpose: Clickable image that links to a URL.

<LinkImage src="/snippets/assets/logos/Livepeer-Logo-Symbol.svg" href="https://livepeer.org" alt="Livepeer" />

Prop	Type	Default	Description
`src`	string	—	Image URL
`href`	string	`#`	Link target
`alt`	string	—	Alt text

YouTubeVideo

Purpose: Embedded YouTube player (16:9 aspect ratio).

<YouTubeVideo id="dQw4w9WgXcQ" />

Prop	Type	Default	Description
`id`	string	—	YouTube video ID
`videoId`	string	—	Alias for `id`

TitledVideo

Purpose: Video or media block with a heading label.

<TitledVideo title="Gateway Demo">
  <video src="/assets/demo.mp4" controls />
</TitledVideo>

Prop	Type	Default	Description
`title`	string	—	Heading displayed above the media

Steps

StyledSteps / StyledStep

Purpose: Custom step list with numbered indicators and a connecting line.

<StyledSteps>
  <StyledStep title="Configure your node">Edit the config file.</StyledStep>
  <StyledStep title="Start the service">Run `systemctl start livepeer`.</StyledStep>
</StyledSteps>

StyledStep props:

Prop	Type	Default	Description
`title`	string	—	Step heading

ListSteps

Purpose: Alias for StyledSteps. Same rendering, same props.

<ListSteps>
  <StyledStep title="Step one">Content</StyledStep>
</ListSteps>

Grids & Layouts

QuadGrid

Purpose: Two-column grid (2×n). No props.

<QuadGrid>
  <Card title="A" />
  <Card title="B" />
</QuadGrid>

AccordionLayout / AccordionGroupList

Purpose: Flex column wrappers for custom accordion arrangements. No props.

<AccordionLayout>
  <Accordion title="Item">Content</Accordion>
</AccordionLayout>

Tables

DynamicTable

Purpose: Scrollable table wrapper. No props — pass raw HTML table elements as children.

<DynamicTable>
  <tr><th>Column</th></tr>
</DynamicTable>

SearchTable

Purpose: Filterable table — live text search and category dropdown. Fully interactive in deployed Mintlify (uses useState). Renders as a static mock in the preview: non-functional search bar + category dropdown chrome + full table body. An ⚡ interactive — static in preview badge is shown to set expectations.

<SearchTable searchPlaceholder="Search terms…" categoryLabel="All categories">
  <tr><th>Term</th><th>Definition</th></tr>
  <tr><td>Example</td><td>Description</td></tr>
</SearchTable>

Prop	Type	Default	Purpose
`searchPlaceholder`	string	`Search…`	Placeholder text in the search input
`categoryLabel`	string	`All categories`	Label for the category dropdown
`searchColumns`	array	—	Columns to include in search (passed to SearchTable.jsx)

SEO note: Custom components render client-side only — table rows are not in the initial HTML. Acceptable trade-off for reference/glossary pages.

Hero & Portal Scaffolding

HeroSectionContainer / HeroContentContainer / PortalHeroContent / PortalContentContainer

Purpose: Structural wrappers for full-width portal and hero layouts on FrameMode pages. No props on any of these.

<HeroSectionContainer>
  <HeroContentContainer>
    <PortalHeroContent>Hero copy here.</PortalHeroContent>
  </HeroContentContainer>
</HeroSectionContainer>

Icons & Indicators

LivepeerIcon

Purpose: Inline Livepeer brand indicator badge. No props.

<LivepeerIcon />

BlinkingIcon

Purpose: Animated icon badge (animation runs in Mintlify; static badge in preview).

<BlinkingIcon icon="terminal" />

Prop	Type	Default	Description
`icon`	string	`terminal`	Font Awesome icon name

DownloadButton

Purpose: Inline download link styled as a button.

<DownloadButton href="/assets/config.yaml" label="Download config" />

Prop	Type	Default	Description
`href`	string	`#`	Download URL
`label`	string	`Download`	Button label text

MarkdownEmbed

Purpose: Bordered container for embedded markdown content. No props.

<MarkdownEmbed>Embedded content here.</MarkdownEmbed>

ExternalContent

Purpose: Framed container for external or imported content with a title header.

<ExternalContent title="API Response">Response body here.</ExternalContent>

Prop	Type	Default	Description
`title`	string	`External Content`	Header label

SocialLinks

Purpose: Social media link row. Fully interactive in Mintlify; renders as static note in preview. No props.

<SocialLinks />

Math

MathInline / MathBlock

Purpose: Mathematical expression display. Rendered as styled <code> in preview (not LaTeX-rendered).

<MathInline expression="E = mc^2" />
<MathBlock expression="\sum_{i=1}^{n} x_i" />

Prop	Type	Default	Description
`expression`	string	—	Mathematical expression string
`math`	string	—	Alias for `expression`

Tier 3 — Placeholder Rendering

Any component not in Tier 1 or Tier 2 renders as:

┌ - - - - - - - - - - - - - - ┐
  &lt;ComponentName prop="value"&gt;
  [children rendered here]
└ - - - - - - - - - - - - - - ┘

Props are shown truncated to 40 characters. Children render inside so content remains readable. To promote a component from Tier 3 to Tier 2, add a renderer function to lib/component-map.js under the livepeerComponents object.

Interactive components

Some Tier 2 components use React hooks (useState, useEffect) and are fully interactive in deployed Mintlify but cannot run in the VS Code webview (Node.js environment, no React runtime). These render as static mocks — they show the correct UI chrome but do not respond to input. Currently affected: SearchTable, SocialLinks, MarkdownEmbed, and OpenAPI. These components display an ⚡ interactive — static in preview badge so authors know to verify their behaviour in a Mintlify dev session, not just the local preview. Data-feed integrators (ShowcaseCards, CoinGeckoExchanges, LumaEvents, DiscordAnnouncements, TwitterTimeline) fall to Tier 3 placeholders for the same reason — they fetch live data and cannot be meaningfully mocked offline.

Configuration

Setting	Type	Default	Options	Description
`livepeer.mdxPreview.theme`	string	`auto`	`auto` \| `light` \| `dark`	Preview colour theme. `auto` matches VS Code.

Architecture

extension.js — Entry point

Registers two commands (livepeer.openMdxPreview, livepeer.openMdxPreviewToSide), the Cmd+Shift+V keybinding, and two event listeners (document change → debounced re-render; theme change → full re-render). Manages a Map of open panels keyed by document URI.

lib/mdx-parser.js — Segment parser

Parses raw MDX text into a flat array of typed segments: frontmatter, import, markdown, mermaid, codeblock, jsx, jsx-expression. Regex-based extraction — not a full MDX compiler, for robustness with non-standard MDX.

lib/mintlify-components.js — Tier 1 renderers

Functions for the governed Mintlify built-ins used by this repo, including canonical Tree.Folder / Tree.File rendering and descriptive placeholders where full runtime parity is not practical in the preview. Each function signature: (props, childrenHtml) => htmlString.

lib/component-map.js — Tier 2 renderers + dispatch

Livepeer custom component renderers. Merges with Tier 1 into COMPONENT_MAP. Exports renderSegments() which dispatches each segment to its renderer or falls through to renderPlaceholder().

lib/webview-template.js — HTML shell

Builds the full webview HTML document including CSP headers, Font Awesome CDN (fa 6.5.1), local CSS/JS vscode-resource: URIs, and the rendered body.

media/preview.js — Client-side logic

Runs inside the webview. Initialises Mermaid.js with Livepeer theme vars, processes .lpd-md-raw blocks with markdown-it, and handles tab switching interactions.

media/preview.css — Theme & component styles

CSS custom properties for light and dark themes using the governed Livepeer accent variables from style.css. Styles for all Tier 1 and Tier 2 component classes.

Future Features

Lazy-load Mermaid.js ✓ Implemented

renderSegments() returns { html, hasMermaid }. The webview template conditionally injects <script src="${mermaidUri}"> only when hasMermaid is true. Pages without Mermaid diagrams skip the 2.45 MB bundle entirely.

Promote Tier 3 components on demand

Any component that falls through to the placeholder renderer can be promoted to Tier 2 by adding a renderer function to lib/component-map.js under livepeerComponents. The function signature is (props, childrenHtml) => htmlString.Priority candidates based on usage frequency in the repo:

Snippet (used in composable page patterns)
data-feed integrators that could be represented by stable static mocks
additional low-use repo components that currently fall through to generic placeholders

Syntax highlighting for code blocks

Code blocks are currently rendered as plain <pre><code> without syntax colouring. Adding highlight.js (vendored, ~50 KB minified) as a third media asset and calling hljs.highlightAll() in preview.js would add language-aware colouring for all fenced blocks.

Live scroll sync

Sync the scroll position of the preview panel to the cursor position in the editor. VS Code’s built-in Markdown preview uses editor/scroll messages via the webview messaging API. The same pattern can be applied here: on onDidChangeTextEditorVisibleRanges, post a message to the webview to scroll to the corresponding rendered element.

Custom component hot-reload ✓ Implemented

onDidSaveTextDocument watches for any .jsx save in the workspace and re-renders all open preview panels. Component source changes are reflected immediately without touching the .mdx file.

Collapsible JSX comment blocks ✓ Implemented (v0.0.2)

Multi-line {/* ... */} comment blocks — typically template instructions or reviewer flags — are rendered as collapsed <details> elements instead of leaking into the preview as visible text. Single-line {/* ... */} comments are still silently stripped. The collapsible uses a dashed border and muted palette to distinguish it from content.Parser: lib/mdx-parser.js detects {/* without a same-line */} and collects lines until the closing */}, emitting a jsx-comment segment.Renderer: lib/component-map.js handles jsx-comment as <details class="lpd-comment"> with a 💬 comment summary and pre-formatted body.

References

Extension source

Entry point and command registration.

Component map

Tier 2 renderers and dispatch logic.

Authoring tools

Other VS Code tools in this repo.

About

RFP

Docs Guide

Generated Reports

lpd-mdx-preview — VS Code Extension

Overview

Repo Context

Installation

Usage

Component Rendering Tiers

Component Reference

Tier 1 — Mintlify Built-ins

Tier 2 — Livepeer Custom Components

Spacing

Containers

Diagrams

Links

Text & Headings

Cards

Callout Banners

Media

Steps

Grids & Layouts

Tables

Hero & Portal Scaffolding

Icons & Indicators

Math

Tier 3 — Placeholder Rendering

Interactive components

Configuration

Architecture

Future Features

References

Extension source

Component map

Authoring tools

About

RFP

Docs Guide

Generated Reports

​Overview

​Repo Context

​Installation

​Usage

​Component Rendering Tiers

​Component Reference

​Tier 1 — Mintlify Built-ins

​Tier 2 — Livepeer Custom Components

​Spacing

​Containers

​Diagrams

​Links

​Text & Headings

​Cards

​Callout Banners

​Media

​Steps

​Grids & Layouts

​Tables

​Hero & Portal Scaffolding

​Icons & Indicators

​Embeds & Social

​Math

​Tier 3 — Placeholder Rendering

​Interactive components

​Configuration

​Architecture

​Future Features

​References

Extension source

Component map

Authoring tools

Overview

Repo Context

Installation

Usage

Component Rendering Tiers

Component Reference

Tier 1 — Mintlify Built-ins

Tier 2 — Livepeer Custom Components

Spacing

Containers

Diagrams

Links

Text & Headings

Cards

Callout Banners

Media

Steps

Grids & Layouts

Tables

Hero & Portal Scaffolding

Icons & Indicators

Embeds & Social

Math

Tier 3 — Placeholder Rendering

Interactive components

Configuration

Architecture

Future Features

References