English | 中文

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

Live demo

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

pnpm add -D slidev-addon-counter

Enable the addon in your Slidev deck frontmatter:

addons:
  - slidev-addon-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" />

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

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

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

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

Preview the local demo:

pnpm dev