slidev-addon-counter

English | 中文

Multi-level counters for Slidev, useful for chapter, section, theorem, and other reusable numbers.

Live demo

Requirements

• Node.js >= 22.18.0
• Slidev >= 52.0.0

Install

pnpm add -D slidev-addon-counter

Enable the addon in your Slidev deck frontmatter:

addons:
  - slidev-addon-counter

Quick Examples

Default Counter

Components without id use the built-in default counter. The addon provides it automatically, even when you configure other counters:

# <Counter /> Introduction

## <Counter :level="2" /> Background

Current section: <CounterDisplay :level="2" />

Configured Counter

Create slidev-addon-counter.config.ts next to your Slidev entry file:

import { defineCounterConfig } from "slidev-addon-counter/config";

export default defineCounterConfig({
  counters: [
    {
      id: "section",
      defaultLevel: "section",
      levels: [
        {
          level: 1,
          alias: "chapter",
        },
        {
          level: 2,
          alias: "section",
        },
      ],
    },
  ],
});

Use the configured aliases and default level in slides:

# <Counter id="section" level="chapter" /> Introduction

## <Counter id="section" /> Background

Current section: <CounterDisplay id="section" />

Styles and starting values

Each level can start at its own non-negative safe integer and use a built-in number style or a custom formatter:

levels: [
  { level: 1, start: 0 },
  { level: 2, start: 10, style: "lower-hex", format: "Hex %{:value}" },
  { level: 3, style: "decimal-leading-zero" },
  {
    level: 4,
    start: 100,
    style: (value) => `T-${String(value).padStart(4, "0")}`,
  },
];

Available hexadecimal styles are lower-hex and upper-hex. The padded decimal style is named decimal-leading-zero and formats values with at least two digits. A custom formatter receives the level's logical value and must return a string; see the manual for details.

More Examples

The live demo shows richer examples with the config, slide source, and rendered output side by side.

You can also read the complete demo source in demo/.

Manual

See the user manual for full configuration, format syntax, component behavior, and common patterns.

Development

source ~/.nvm/nvm.sh
nvm use
pnpm install
pnpm check

Preview the local demo:

pnpm dev

Run the generated HMR benchmark (optional; requires Chromium):

pnpm exec playwright install chromium
pnpm bench