Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

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" />

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 Content
Android 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" />

Video List

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

Blog & Social

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" />
Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.