Plandalf

Code groups

Use code groups for language choices, framework variants, and synced implementation examples.

Code groups keep parallel examples together. Use them when the reader chooses one language or framework path.

Language tabs

Mintlify code groups can infer their labels from titled code fences.

console.log("Hello World");
print("Hello World!")
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
<CodeGroup>

```javascript title="helloWorld.js"
console.log("Hello World");
```

```python title="hello_world.py"
print("Hello World!")
```

```java title="HelloWorld.java"
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```

</CodeGroup>

Plandalf language tabs

Open checkout

<button data-plandalf-present="pro-plan">
  Buy Pro
</button>
await plandalf.present("pro-plan");
<CodeGroup title="Open checkout" labels={["HTML", "JavaScript"]}>

```html title="button.html"
<button data-plandalf-present="pro-plan">
  Buy Pro
</button>
```

```js title="present.js"
await plandalf.present("pro-plan");
```

</CodeGroup>

Synced language choice

Matching labels sync across code groups and tabs by default. The selected label is remembered as readers move between docs pages, so they can choose JavaScript once and stay on JavaScript for later examples.

Use markup-driven checkout behavior.

Use client-side SDK calls.

Same label sync

<button data-plandalf-present="pro-plan">Buy Pro</button>
await plandalf.present("pro-plan");

Use dropdown when labels are long or when the group has more options than fit comfortably in the tab bar.

Install package

npm install @plandalf/js
pnpm add @plandalf/js
yarn add @plandalf/js
<CodeGroup title="Install package" labels={["npm", "pnpm", "yarn"]} dropdown>

```bash title="npm"
npm install @plandalf/js
```

```bash title="pnpm"
pnpm add @plandalf/js
```

```bash title="yarn"
yarn add @plandalf/js
```

</CodeGroup>

Unsynced groups

Turn sync off when labels repeat but the choices are unrelated.

Response examples

{ "status": "complete" }
{ "message": "Offer not found" }

Properties

childrenReactNoderequired

Code fences inside the group. Each fence should include a language and a title or filename so the selector can show a readable label.

Plandalf extensions

titlestring

Optional heading shown in the control bar.

labelsstring[]

Override labels for each code fence. Use this when filenames should stay in code headers but the selector should show broader choices such as HTML, JavaScript, or npm.

syncbooleandefault: true

Keep language selection synced across code groups and tabs with matching labels. Synced selections are also restored on later docs pages that contain the same label.

class | classNamestring

Optional local utility classes.

Authoring rules

  • Use code groups for equivalent snippets, not for sequential steps.
  • Give each fence a language so the header can show JavaScript, Shell, JSON, or the right readable label.
  • Use labels when fence titles are filenames but the selector should show a broader language or package manager.
  • Use dropdown for long labels or three-plus dense options.
  • Set sync={false} for examples like Success and Error that should not control other code groups.
Tabs Use for broader content views.
Examples Use for request and response samples.
API examples Attach examples to endpoints.

Feature detail