Skip to content

PR made: feat: Group name for Code Groups to sync opened tab #5013

@juji

Description

@juji

pull request made:

#5012

Is your feature request related to a problem? Please describe.

When documenting tools that appear in multiple contexts on the same page (like package managers, programming languages, or configuration formats), users have to manually select their preferred option in each code group separately.

For example, if a user prefers pnpm over npm, they have to click the "pnpm" tab in every single code group throughout the documentation page - once for installation, again for running commands, again for configuration, etc. This interrupts the reading flow and makes the documentation feel less polished.

Describe the solution you'd like

I'd like to add a name parameter to code groups that allows automatic tab synchronization across multiple groups with the same name, with the preference persisted in localStorage.

Syntax:

::: code-group name=package-managers

```bash [npm]
npm install vitepress
```

```bash [pnpm]
pnpm add vitepress
```

:::

Behavior:
When a user clicks on a tab (e.g., "pnpm") in one code group, all other code groups on the page with the same name=package-managers would automatically switch to the corresponding tab. The selection would be saved to localStorage and restored on subsequent page visits, so the user's preference persists across the entire documentation site.

Benefits:

  • Reduces repetitive clicking for users - they only need to select their preference once
  • Provides a more polished, professional documentation experience
  • Makes it easier for users to follow along with their preferred tools/languages
  • Preference persists across page visits and browser sessions
  • Non-breaking change - existing code groups without the parameter would continue to work independently
  • Works seamlessly across all pages in the documentation (if they use the same group name)

Example user flow:

  1. User visits documentation and clicks "pnpm" in a code group
  2. All code groups with name=package-managers on that page instantly switch to "pnpm"
  3. User navigates to another documentation page
  4. All code groups with name=package-managers automatically show "pnpm" tab
  5. User returns days later - preference is still "pnpm"

Additional context

pull request made:

#5012

Validations

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions