Tabs are the optimal UI pattern for presenting mutually exclusive or related data sets (e.g., “Install via NPM vs. Yarn” or “macOS vs. Windows” instructions) within a compact, interactive format.

Syntax Reference

The tabs container utilizes the specialized sub-delimiter == tab "Label". Each label defines a distinct pane that users can toggle between.

::: tabs

== tab "Label 1"
Content for the first tab.

== tab "Label 2"
Content for the second tab.

:::

Implementation Gallery

1. Package Management

Tabs are most commonly used to show installation instructions for different package managers in a single view.

pnpm add @docmd/core

npm install @docmd/core

yarn add @docmd/core

2. Multi-Language Code Snippets

Keep your logic clean by separating different programming languages or environments.

import { build } from '@docmd/core';
await build('./docmd.config.js');

const { build } = require('@docmd/core');
build('./docmd.config.js');

Core Capabilities

Isomorphic Lazy Rendering

docmd implements Conditional Resource Laziness. If a tab contains computationally expensive elements (e.g., Mermaid.js diagrams or high-resolution images), these assets are only initialized and rendered once the user activates that specific tab. This ensures rapid initial page loads.

State Persistence

The default SPA router tracks the active tab’s index across similar documentation pages. If a user selects “pnpm” on one page and navigates to another page with a matching tab structure, the “pnpm” tab will remain active automatically.

Technical Constraints