MDX Components Reference

This page serves as a reference for the custom components available in the Lynx documentation. You can import these from @lynx.

Callout & Alerts

Used to highlight important information. You can use standard Markdown syntax :::type for callouts.

:::info
This is an info callout.
:::

:::warning
This is a warning callout.
:::

:::tip
This is a tip callout.
:::

:::danger
This is a danger callout.
:::

Info

This is an info callout.

Warning

This is a warning callout.

Tip

This is a tip callout.

Danger

This is a danger callout.

Badges

Platform Badges

Indicate platform support.

<AndroidOnly />
<IOSOnly />
<WebOnly />
<HarmonyOnly />

Android

iOS

Web

Harmony

Status Badges

Indicate API or feature status.

<Deprecated />
<Experimental />
<Required />

DeprecatedExperimentalRequired

Runtime Badges

Indicate which thread the script runs on.

<RuntimeBadge type="mts" />
<RuntimeBadge type="bts" />

MTS Only BTS Only

Version Badge

Indicates the Lynx version a feature was introduced.

<VersionBadge v={2.5} />
<VersionBadge>2.5.1</VersionBadge>

2.5

2.5.1

Generic Badges

Standard Rspress badge.

<Badge type="tip" text="Recommended" />
<Badge type="warning" text="Deprecated" />

RecommendedDeprecated

Layout & Containers

Platform Tabs

Organize content by platform.

<PlatformTabs defaultPlatform="ios" queryKey="platform">
  <PlatformTabs.Tab platform="ios">iOS Content</PlatformTabs.Tab>
  <PlatformTabs.Tab platform="android">Android Content</PlatformTabs.Tab>
</PlatformTabs>

iOS

Android

iOS Content

Columns

Split content into columns. Pass titles prop for column headers.

<Columns titles={['Left Column', 'Right Column']}>
  <div>Content for the left column.</div>
  <div>Content for the right column.</div>
</Columns>

Left Column

Content for the left column.

Right Column

Content for the right column.

Responsive Dual Column

A layout that switches to single column on smaller screens. Use FlexItem to control width.

<ResponsiveDualColumn>
  <FlexItem minWidth={300}>
    <div>Left Content (min 300px)</div>
  </FlexItem>
  <FlexItem minWidth={300}>
    <div>Right Content (min 300px)</div>
  </FlexItem>
</ResponsiveDualColumn>

Left Content (min 300px)

Right Content (min 300px)

Browser Container

Wraps content in a browser-like window frame.

<BrowserContainer>
  <div style={{ padding: '20px', textAlign: 'center' }}>Browser Content</div>
</BrowserContainer>

Browser Content

CodeFold

Collapsible code block, optionally with an image.

<CodeFold toggle>```ts console.log('Hidden code'); ```</CodeFold>

console.log('Hidden code');

Media & Embeds

YouTube

<YouTubeIframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" />

Display a list of videos with titles.

<VideoList
  videos={[
    {
      src: 'https://lf-lynx.tiktok-cdns.com/obj/lynx-artifacts-oss-sg/lynx-website/assets/ifr_fib.mp4',
      title: 'Demo Video',
    },
  ]}
  playbackRate={1.0}
/>

Demo Video

Mermaid Diagrams

<Mermaid>
  graph TD;
  A-->B;
  A-->C;
  B-->D;
  C-->D;
</Mermaid>

Complex Components

See Writing Blog Posts for details on <BlogList> and <BlogAvatar>.

<BlogList />
<BlogAvatar list={['lynx']} />

Interactive Example

See Managing Interactive Examples for details on <Go>.

<Go example="view" defaultFile="src/App.tsx" />

API Tables

See Documenting APIs for details on <APITable> and <APISummary>.

<APITable query="lynx-api/global/fetch" />

Documentation Utilities

Edit This

Renders "Edit source" and "Edit in Cloud IDE" links.

<EditThis />

View Source

Version Table

Renders a table of Lynx versions.

<VersionTable type="latest" />

Version Number	release	docs repo branch	docs link	release blog
3.7	---	release/3.7	https://lynxjs.org/3.7	---

#MDX Components Reference

#Callout & Alerts

#Badges

#Platform Badges

#Status Badges

#Runtime Badges

#Version Badge

#Generic Badges

#Layout & Containers

#Platform Tabs

#Columns

#Responsive Dual Column

#Browser Container

#CodeFold

#Media & Embeds

#YouTube

#Video List

#Mermaid Diagrams

#Complex Components

#Blog & Social

#Interactive Example

#API Tables

#Documentation Utilities

#Edit This

#Version Table