Components

vanilla-press builtin components are a set of Markdown container components built on top of vanilla-jui for document layout and interactions.

Components are divided into Container Components and Tag Components:

• Container Components: Syntax starts with :::, such as ::: tabs, ::: accordion, etc.
• Tag Components: Syntax starts with <, and with the first letter capitalized, similar to HTML tags, such as <Badge />, etc.

Container Components

Tabs

JavaScript
const pages = ['index.md', 'guide/components.md']export function toHtml(file) {  return file.replace(/\.md$/, '.html')}

HTML
<article class="j-editor is-sm">  <h1>Component Example</h1>  <p>Main content uses vanilla-jui content classes.</p></article>

Markdown
::: tabs@tab Option AContent A@tab Option BContent B:::

Accordion

Markdown
::: accordion multiple collapsible@item Supports directory-based routing`docs/en/guide/components.md` will be generated to `dist/en/guide/components.html`, and asset links are resolved automatically.@item Supports code highlightingCode blocks keep `language-*` classes and render base token styles.@item Supports page-level component initEach page injects its own `initDocPage({ components: [...] })` script.:::

Parameters

• multiple: whether multiple panels can stay expanded at the same time; false when omitted
• collapsible: whether all panels can be collapsed; false when omitted

Offcanvas

JavaScript
// javascriptconst pages = ['index.md', 'guide/components.md']export function toHtml(file) {  return file.replace(/\.md$/, '.html')}

Markdown
::: offcanvas [Open Panel] left### OffcanvasIn the `Offcanvas` component, content is wrapped into a panel. Click the trigger button to open or close it.Markdown syntax is supported inside the panel content.```javascript// javascriptconst pages = ['index.md', 'guide/components.md']export function toHtml(file) {  return file.replace(/\.md$/, '.html')}```:::

Parameters

• title: button text, written as ::: offcanvas [Button Text]; default is Open Panel
• direction: panel direction, written as ::: offcanvas [Button Text] direction; supports left, right, top, and bottom, with right as the default

Tip

Markdown
::: tipThis is a tip message.:::::: info Custom titleThis is a tip message.:::::: success SuccessThe operation has completed.:::::: warning WarningPlease confirm the configuration.:::::: error ErrorThis action cannot be undone.:::

Parameters

• ::: tip outputs j-tip without a status class.
• ::: info, ::: success, ::: warning, and ::: error output j-tip is-info, j-tip is-success, j-tip is-warning, and j-tip is-error, respectively.
• When no title is provided, Chinese pages show 提示 and English pages show Tip.

Tree

A component that helps users quickly understand the directory structure of the documentation.

Markdown
::: treemy-project/├── src/│ ├── components/ [collapsed]│ │ ├── Header.vue│ │ └── Footer.vue│ ├── App.vue│ └── main.js├── public/│ └── index.html├── tests/│ └── app.test.ts├── package.json└── README.md:::

Notes

• File nodes resolve icons by extension and fall back to the file icon when no matching icon is registered.
• Add [collapsed] after a folder name to make that folder collapsed by default, for example components/ [collapsed].

Extend Icons

Add or remove svg icons as needed in src/config/icons.ts.

TypeScript
export default {  'align-left':    '<path d="M3 4H21V6H3V4ZM3 19H17V21H3V19ZM3 14H21V16H3V14ZM3 9H17V11H3V9Z"></path>',  'align-right':    '<path d="M3 4H21V6H3V4ZM7 19H21V21H7V19ZM3 14H21V16H3V14ZM7 9H21V11H7V9Z"></path>',  copy: '<path d="M20 8v12H8V8zm0-2H8a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2"></path><path d="M4 16H2V4a2 2 0 0 1 2-2h12v2H4Z"></path>',}

Details

Markdown
::: details TitleThis is a details panel.:::

Tag Components

Group

The inline container component <Group /> is used to wrap inline HTML or components like Badge.

Markdown
<Group gap={8}>  <Badge text="apple" />  <Badge text="orange" theme="info" />  <Badge text="banana" theme="warning" /></Group>

Parameters

• gap: number or null. The default value is 8, rendered as gap: 8px.

Badge

The badge component <Badge /> can be used directly in headings or body text.

Markdown
<Badge text="new" /><Badge text="beta" theme="info" size="sm" />

Parameters

• text: badge text. If omitted, the content inside the tag is used.
• theme: defaults to default, with optional values reverse, solid, soft, wash, info, success, warning, error.
• size: defaults to md, with optional value sm.

Bilibili

The Bilibili component <Bilibili /> embeds a Bilibili video in a document.

Markdown
<Bilibili url="https://www.bilibili.com/video/BV1KE411a7EY/" />

Parameters

• url: video URL. Required.
• autoplay: whether to autoplay. Defaults to 0, optional value 1.
• ratio: video aspect ratio. Defaults to 16 / 9.
• width: video width. Defaults to 100%.
• t: playback start time. Defaults to 0, in seconds.
• muted: whether to mute the video. Defaults to 0, optional value 1.
• p: part index. Defaults to 1.
• danmaku: whether to show danmaku comments. Defaults to 0, optional value 1.
• no-related / norelated: whether to hide related videos. Defaults to 0, optional value 1.
• height: video height. Defaults to null, so no height is set.

Youtube

The Youtube component <Youtube /> embeds a Youtube video in a document.

Markdown
<Youtube url="https://www.youtube.com/watch?v=0Puv0Pss33M" />

Parameters

• url: video URL or video ID. Required. Supports youtube.com/watch?v=, youtu.be, youtube.com/embed, youtube.com/shorts, and youtube.com/live.
• autoplay: whether to autoplay. Defaults to 0, optional value 1.
• controls: whether to show player controls. Defaults to 1, optional value 0.
• ratio: video aspect ratio. Defaults to 16 / 9.
• width: video width. Defaults to 100%.
• start / t: playback start time. Defaults to 0, in seconds.
• end: playback end time. Defaults to 0, in seconds.
• muted: whether to mute the video. Defaults to 0, optional value 1.
• loop: whether to loop playback. Defaults to 0, optional value 1.
• no-related / norelated: whether to limit related video recommendations. Defaults to 0, optional value 1.
• height: video height. Defaults to null, so no height is set.