Manifest: Add docs entries to debugger

[JReinhold]

Closes #

What I did

Added docs entries to the manifest debugger. As we don't parse them, they can't really error, either they are there or not. But for completeness and to make it less confusing, I added them.

Attached docs are shown similar to stories, in each component:

Unattached docs are at the bottom of the whole list:

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

• stories
• unit tests
• integration tests
• end-to-end tests

Manual testing

• Start the react-vite sandbox
• Visit http://localhost:6006/manifests/components.html
• See docs entries

Documentation

• Add or update documentation reflecting your changes
• If you are deprecating/removing a feature, make sure to update
  MIGRATION.MD

Checklist for Maintainers

• When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

• Make sure this PR contains one of the labels below:

  Available labels

  • bug: Internal changes that fixes incorrect behavior.
  • maintenance: User-facing maintenance tasks.
  • dependencies: Upgrading (sometimes downgrading) dependencies.
  • build: Internal-facing build tooling & test updates. Will not show up in release changelog.
  • cleanup: Minor cleanup style change. Will not show up in release changelog.
  • documentation: Documentation only changes. Will not show up in release changelog.
  • feature request: Introducing a new feature.
  • BREAKING CHANGE: Changes that break compatibility in some way with current major version.
  • other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

Summary by CodeRabbit

• New Features

  • Display unattached docs in the manifest debugger alongside components, with per-doc cards and content preview.
  • Track and surface documentation errors with counts and status indicators.

• Bug Fixes

  • Error messaging and 404 behavior updated to reference both components and docs manifests.

• Style

  • Renamed header to "Manifest Debugger" and added UI pills for docs status.

• Tests

  • Updated tests to cover combined components/docs scenarios and new messaging.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 5ec3ef7

Command	Status	Duration	Result
nx run-many -t compile,check,knip,test,pretty-d...	✅ Succeeded	9m 23s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-01-23 10:53:53 UTC

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds support for an optional docs manifest to the components manifest pipeline: the server writes components.html when either manifest exists, and the renderer now outputs unattached docs, per-doc panels, error tracking, and updated UI/labels.

Changes

Cohort / File(s)	Summary
Tests code/core/src/core-server/utils/manifests/manifests.test.ts	Updated assertions to expect HTML written when docs manifest exists; changed title to "Manifest Debugger"; adjusted 404/error message expectations to reference both components and docs manifests.
Server endpoint code/core/src/core-server/utils/manifests/manifests.ts	Writes components.html when either components or docs manifest exists; passes both manifests to renderer; updates 404 response text to mention both components and docs manifests.
Renderer + types code/core/src/core-server/utils/manifests/render-components-manifest.ts	Added DocsManifestEntry and DocsManifest types; changed renderComponentsManifest signature to accept optional components/docs manifests; added analyzeDoc, renderDocCard, docs-aware analyzeComponent/renderComponentCard; renders unattached docs grid, docs badges/toggles/panels, error counts, and CSS hooks; updated header label to "Manifest Debugger".

Sequence Diagram(s)

sequenceDiagram
    participant Client as Server Endpoint
    participant Renderer as Manifest Renderer
    participant HTML as Generated HTML

    Client->>Renderer: renderComponentsManifest(componentsManifest?, docsManifest?)
    Renderer->>Renderer: analyzeComponent(c: ComponentManifestWithDocs)
    Renderer->>Renderer: analyzeDoc(d: DocsManifestEntry) for unattached docs
    alt components present
        Renderer->>Renderer: renderComponentCard (includes docs badges/panels)
    end
    alt unattached docs present
        Renderer->>Renderer: renderDocCard for each unattached doc
    end
    Renderer->>HTML: compose grids, pills, panels, CSS
    HTML->>Client: return combined components.html

Loading

Estimated code review effort

🎯 5 (Critical) | ⏱️ ~120 minutes

Possibly related PRs

• Manifests: Support !manifest tag in preview files #33406: touches the same server manifest endpoint logic and manifest generation flow.
• React: Change examples to stories in manifests and show correct examples and prop types #32908: modifies the same render-components-manifest.ts renderer and related component rendering logic.
• Manifests: Add support for summaries in MDX files #33475: adjusts docs manifest data structures that align with the newly introduced DocsManifestEntry fields.

✨ Finishing touches

• 📝 Generate docstrings

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

code/core/src/core-server/utils/manifests/render-components-manifest.ts (1)

355-663: Add active-ring styling for the doc-error filter pill.

#filter-doc-errors is now a target, but the active-ring selector doesn’t include it, so the pill won’t show as selected.

✅ Suggested CSS tweak

-      `#filter-story-errors`:target ~ header .filter-pill[data-k='story-errors'] {
+      `#filter-story-errors`:target ~ header .filter-pill[data-k='story-errors'],
+      `#filter-doc-errors`:target ~ header .filter-pill[data-k='doc-errors'] {
           box-shadow: 0 0 0 var(--active-ring) currentColor;
           border-color: currentColor;
       }

🤖 Fix all issues with AI agents

In `@code/core/src/core-server/utils/manifests/render-components-manifest.ts`:
- Around line 31-83: The docs summary (docsPill) only counts unattached docs
(docsEntries/docsAnalyses) and thus misses docs attached to components; update
the totals computation to include attached docs from the per-component analyses
produced by analyzeComponent (variable analyses) by adding their attached docs
count and attached-doc errors into totals.docs and totals.docsWithError (summing
whatever fields analyzeComponent returns for attached docs or
attachedDocErrors), so docsPill and the doc filter reflect both attached and
unattached doc counts and errors.

🧹 Nitpick comments (1)

code/core/src/core-server/utils/manifests/manifests.test.ts (1)

102-124: Consider asserting docs.json is written too.

This test already verifies the HTML output; a quick docs.json assertion would lock in the new manifest write behavior.

♻️ Suggested assertion

       const files = vol.toJSON();
       expect(files['/output/manifests/components.html']).toBeDefined();
       expect(files['/output/manifests/components.html']).toContain('<!doctype html>');
       expect(files['/output/manifests/components.html']).toContain('Unattached Docs');
+      expect(files['/output/manifests/docs.json']).toBe(JSON.stringify(mockManifests.docs));

[storybook-app-bot]

Package Benchmarks

^{Commit: 5ec3ef7, ran on 23 January 2026 at 10:52:23 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/addon-a11y

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	184 KB	🚨 +184 KB 🚨
Dependency size	0 B	2.98 MB	🚨 +2.98 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/addon-docs

	Before	After	Difference
Dependency count	0	18	🚨 +18 🚨
Self size	0 B	1.64 MB	🚨 +1.64 MB 🚨
Dependency size	0 B	9.25 MB	🚨 +9.25 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/addon-links

	Before	After	Difference
Dependency count	0	1	🚨 +1 🚨
Self size	0 B	14 KB	🚨 +14 KB 🚨
Dependency size	0 B	5 KB	🚨 +5 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/addon-onboarding

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	331 KB	🚨 +331 KB 🚨
Dependency size	0 B	670 B	🚨 +670 B 🚨
Bundle Size Analyzer	Link	Link

storybook-addon-pseudo-states

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	21 KB	🚨 +21 KB 🚨
Dependency size	0 B	689 B	🚨 +689 B 🚨
Bundle Size Analyzer	Link	Link

@storybook/addon-themes

	Before	After	Difference
Dependency count	0	1	🚨 +1 🚨
Self size	0 B	18 KB	🚨 +18 KB 🚨
Dependency size	0 B	28 KB	🚨 +28 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/addon-vitest

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	379 KB	🚨 +379 KB 🚨
Dependency size	0 B	338 KB	🚨 +338 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/builder-vite

	Before	After	Difference
Dependency count	0	11	🚨 +11 🚨
Self size	0 B	123 KB	🚨 +123 KB 🚨
Dependency size	0 B	1.30 MB	🚨 +1.30 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/builder-webpack5

	Before	After	Difference
Dependency count	0	188	🚨 +188 🚨
Self size	0 B	75 KB	🚨 +75 KB 🚨
Dependency size	0 B	32.04 MB	🚨 +32.04 MB 🚨
Bundle Size Analyzer	Link	Link

storybook

	Before	After	Difference
Dependency count	0	49	🚨 +49 🚨
Self size	0 B	20.39 MB	🚨 +20.39 MB 🚨
Dependency size	0 B	16.52 MB	🚨 +16.52 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/angular

	Before	After	Difference
Dependency count	0	188	🚨 +188 🚨
Self size	0 B	139 KB	🚨 +139 KB 🚨
Dependency size	0 B	30.26 MB	🚨 +30.26 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/ember

	Before	After	Difference
Dependency count	0	192	🚨 +192 🚨
Self size	0 B	15 KB	🚨 +15 KB 🚨
Dependency size	0 B	28.76 MB	🚨 +28.76 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/html-vite

	Before	After	Difference
Dependency count	0	14	🚨 +14 🚨
Self size	0 B	22 KB	🚨 +22 KB 🚨
Dependency size	0 B	1.46 MB	🚨 +1.46 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs

	Before	After	Difference
Dependency count	0	534	🚨 +534 🚨
Self size	0 B	646 KB	🚨 +646 KB 🚨
Dependency size	0 B	59.53 MB	🚨 +59.53 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/nextjs-vite

	Before	After	Difference
Dependency count	0	123	🚨 +123 🚨
Self size	0 B	1.12 MB	🚨 +1.12 MB 🚨
Dependency size	0 B	22.11 MB	🚨 +22.11 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/preact-vite

	Before	After	Difference
Dependency count	0	14	🚨 +14 🚨
Self size	0 B	13 KB	🚨 +13 KB 🚨
Dependency size	0 B	1.44 MB	🚨 +1.44 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-native-web-vite

	Before	After	Difference
Dependency count	0	155	🚨 +155 🚨
Self size	0 B	30 KB	🚨 +30 KB 🚨
Dependency size	0 B	23.40 MB	🚨 +23.40 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-vite

	Before	After	Difference
Dependency count	0	113	🚨 +113 🚨
Self size	0 B	35 KB	🚨 +35 KB 🚨
Dependency size	0 B	19.90 MB	🚨 +19.90 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-webpack5

	Before	After	Difference
Dependency count	0	274	🚨 +274 🚨
Self size	0 B	24 KB	🚨 +24 KB 🚨
Dependency size	0 B	44.43 MB	🚨 +44.43 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/server-webpack5

	Before	After	Difference
Dependency count	0	200	🚨 +200 🚨
Self size	0 B	16 KB	🚨 +16 KB 🚨
Dependency size	0 B	33.30 MB	🚨 +33.30 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/svelte-vite

	Before	After	Difference
Dependency count	0	19	🚨 +19 🚨
Self size	0 B	55 KB	🚨 +55 KB 🚨
Dependency size	0 B	26.58 MB	🚨 +26.58 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/sveltekit

	Before	After	Difference
Dependency count	0	20	🚨 +20 🚨
Self size	0 B	56 KB	🚨 +56 KB 🚨
Dependency size	0 B	26.63 MB	🚨 +26.63 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/vue3-vite

	Before	After	Difference
Dependency count	0	108	🚨 +108 🚨
Self size	0 B	35 KB	🚨 +35 KB 🚨
Dependency size	0 B	43.67 MB	🚨 +43.67 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/web-components-vite

	Before	After	Difference
Dependency count	0	15	🚨 +15 🚨
Self size	0 B	19 KB	🚨 +19 KB 🚨
Dependency size	0 B	1.50 MB	🚨 +1.50 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	0	183	🚨 +183 🚨
Self size	0 B	775 KB	🚨 +775 KB 🚨
Dependency size	0 B	67.55 MB	🚨 +67.55 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	0	176	🚨 +176 🚨
Self size	0 B	30 KB	🚨 +30 KB 🚨
Dependency size	0 B	66.12 MB	🚨 +66.12 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/core-webpack

	Before	After	Difference
Dependency count	0	1	🚨 +1 🚨
Self size	0 B	11 KB	🚨 +11 KB 🚨
Dependency size	0 B	28 KB	🚨 +28 KB 🚨
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	0	50	🚨 +50 🚨
Self size	0 B	1000 KB	🚨 +1000 KB 🚨
Dependency size	0 B	36.91 MB	🚨 +36.91 MB 🚨
Bundle Size Analyzer	node	node

@storybook/csf-plugin

	Before	After	Difference
Dependency count	0	9	🚨 +9 🚨
Self size	0 B	7 KB	🚨 +7 KB 🚨
Dependency size	0 B	1.26 MB	🚨 +1.26 MB 🚨
Bundle Size Analyzer	Link	Link

eslint-plugin-storybook

	Before	After	Difference
Dependency count	0	20	🚨 +20 🚨
Self size	0 B	131 KB	🚨 +131 KB 🚨
Dependency size	0 B	2.82 MB	🚨 +2.82 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react-dom-shim

	Before	After	Difference
Dependency count	0	0	0
Self size	0 B	18 KB	🚨 +18 KB 🚨
Dependency size	0 B	788 B	🚨 +788 B 🚨
Bundle Size Analyzer	Link	Link

@storybook/preset-create-react-app

	Before	After	Difference
Dependency count	0	68	🚨 +68 🚨
Self size	0 B	32 KB	🚨 +32 KB 🚨
Dependency size	0 B	5.98 MB	🚨 +5.98 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/preset-react-webpack

	Before	After	Difference
Dependency count	0	170	🚨 +170 🚨
Self size	0 B	18 KB	🚨 +18 KB 🚨
Dependency size	0 B	31.29 MB	🚨 +31.29 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/preset-server-webpack

	Before	After	Difference
Dependency count	0	10	🚨 +10 🚨
Self size	0 B	7 KB	🚨 +7 KB 🚨
Dependency size	0 B	1.20 MB	🚨 +1.20 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/html

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	29 KB	🚨 +29 KB 🚨
Dependency size	0 B	32 KB	🚨 +32 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/preact

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	16 KB	🚨 +16 KB 🚨
Dependency size	0 B	32 KB	🚨 +32 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/react

	Before	After	Difference
Dependency count	0	57	🚨 +57 🚨
Self size	0 B	1.23 MB	🚨 +1.23 MB 🚨
Dependency size	0 B	12.95 MB	🚨 +12.95 MB 🚨
Bundle Size Analyzer	Link	Link

@storybook/server

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	8 KB	🚨 +8 KB 🚨
Dependency size	0 B	716 KB	🚨 +716 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/svelte

	Before	After	Difference
Dependency count	0	2	🚨 +2 🚨
Self size	0 B	45 KB	🚨 +45 KB 🚨
Dependency size	0 B	230 KB	🚨 +230 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/vue3

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	63 KB	🚨 +63 KB 🚨
Dependency size	0 B	211 KB	🚨 +211 KB 🚨
Bundle Size Analyzer	Link	Link

@storybook/web-components

	Before	After	Difference
Dependency count	0	3	🚨 +3 🚨
Self size	0 B	61 KB	🚨 +61 KB 🚨
Dependency size	0 B	47 KB	🚨 +47 KB 🚨
Bundle Size Analyzer	Link	Link

[kylegach]

I'd like to be able to filter to docs (attached & unattached) regardless of the error state.

[kylegach]

Left one suggestion, but it's non-blocking.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

code/core/src/core-server/utils/manifests/render-components-manifest.ts (1)

930-930: Dead code: unused expression.

This statement computes a value but doesn't assign or use it. Appears to be leftover from a refactor.

🧹 Proposed fix

-  esc(c.error?.message || 'Unknown error');
   return `

🧹 Nitpick comments (1)

code/core/src/core-server/utils/manifests/render-components-manifest.ts (1)

240-253: Unused filter target #filter-doc-errors.

The #filter-doc-errors target is defined in CSS and HTML (line 688) but is unreachable—no UI element links to it. The docsPill links to #filter-docs only. Consider removing the dead rules or adding a dedicated pill for doc-error filtering if intended.

♻️ Remove unused filter target

      `#filter-all`:target ~ header .filter-pill[data-k='all'],
      `#filter-errors`:target ~ header .filter-pill[data-k='errors'],
      `#filter-infos`:target ~ header .filter-pill[data-k='infos'],
      `#filter-story-errors`:target ~ header .filter-pill[data-k='story-errors'],
-     `#filter-doc-errors`:target ~ header .filter-pill[data-k='docs'],
      `#filter-docs`:target ~ header .filter-pill[data-k='docs'] {
          box-shadow: 0 0 0 var(--active-ring) currentColor;
          border-color: currentColor;
      }

      /* Hidden targets for filtering */
      `#filter-all`,
      `#filter-errors`,
      `#filter-infos`,
      `#filter-story-errors`,
-     `#filter-doc-errors`,
      `#filter-docs` {
          display: none;
      }

Also remove the corresponding rules at lines 567-569 and the HTML span at line 688.