Skip to content
compodocx
Skip to article content

Guide 01

Features

cngxjs (opens in new tab) Updated Guide 01 of 13

What lands on the page after a build, grouped by area.

Modern Angular surface

  • Standalone components, directives, pipes. No NgModule scaffolding required.
  • Signals (opens in new tab), computed, and linked-signal members render as first-class fields with their derived-state dependencies.
  • inject() DI alongside constructor DI. Both surface in a unified dependencies block.
  • Host bindings, host listeners, host structured attributes, providers and view providers.
  • Effects rendered opt-in via --showEffects.
  • Component theming tokens parsed from CSS custom properties, SCSS variables, and @property rules.

Multi-version output

  • Default layout writes <output>/<versionLabel>/ with a shared versions.json manifest.
  • Version label auto-detected from the nearest package.json. Override with --versionLabel.
  • A version-switcher widget reads the manifest at runtime. Append-only, semver-sorted, no server config needed.
  • Cap visible entries with --maxVersionsShown. Pass 0 to show all.

Tooling

  • compodocx migrate ports compodoc Handlebars overrides to JS partials. Subcommands for inspecting, single-template, full-template-folder, and CSS migration.
  • compodocx diff compares two --exportFormat json snapshots. Exits 0 on clean, 1 on additive, 2 on breaking changes.
  • --exportFormat llm-md emits an LLM-context markdown bundle for AI assistants and code-review bots.
  • --exportFormat json emits a typed API snapshot with schemaVersion, suitable for diffing or downstream tooling.

Modern UX

  • SPA hash-router with deep-link scroll restoration and tab activation by URL hash.
  • Keyboard navigation: j / k through member cards, [ / ] through the sidebar entity list, ? opens a shortcut overlay.
  • Shiki syntax highlighting with per-theme light/dark pairs.
  • Flicker-free dark mode and theme switching, applied before paint. No FOUC.
  • Optional Pagefind search index for production builds (opt-in via --search).

Theming

  • Eight bundled themes: Slate Noir (default), Ocean, Midnight, Nord, Rose Pine, Ember, Neon, Brutalist.
  • Custom themes are a single CSS file overriding any subset of the --color-cdx-* tokens.
  • Per-theme Shiki light/dark pairs picked to match each palette.
  • Component pages surface a Theming Tokens tab with grouped CSS custom properties, SCSS variables, and @property rules.

Accessibility

  • Skip-to-content link on every page.
  • :focus-visible rings on every interactive element. ARIA patterns on tabs, sidebar, and version switcher.
  • Respects prefers-reduced-motion and prefers-color-scheme.
  • WCAG AA contrast on default tokens. Per-theme palettes audited individually.
  • Per-entity @wcag and @a11y JSDoc tags surface conformance metadata in the entity hero and feed the search-palette WCAG facet.

Library mode

Two audiences, one source pass

Picking a sidebar layout is the only opt-in. Library authors and SDK teams flip one config key and the sidebar reshapes into a curated chapter plus an exhaustive reference portal - both bucketed by @category or folder path.

Per-kind tree

menuLayout: 'type' · default
  • One chapter per Angular artefact kind.
  • Components, Directives, Pipes, Injectables, Classes, …
  • No bucket landings and no References portal.
  • Best for application docs and internal projects.

Curated + reference portal

menuLayout: 'feature' · opt-in
  • Features chapter, the curated entry points readers reach for first.
  • References portal at references.html, exhaustive index of every public symbol.
  • Plus bucket landings, backlinks, and Pagefind facets.
  • Best for library authors and SDK teams.

Flip the switch in one line

Config-only - no CLI flag. Full reference under Navigation & layout.

json .compodocxrc.json 
// .compodocxrc.json
{
  "menuLayout": "feature"
}

What library mode unlocks

Four extra capabilities under menuLayout: 'feature', all overridable via --templates.

Tokens as their own page kind

InjectionToken + HttpContextToken at tokens/<name>.html.

  • Lean page: hero, referenced-by chips, type signature, providedIn.
  • No methods, no API tab.
  • The Injectable bucket counts real services only.

Bucket landing pages

Auto-built landing per @category bucket.

  • Path: categories/<id>.html, nested for sub-buckets.
  • Members grouped by kind with first-sentence excerpts.
  • Sidebar bucket row: label navigates, chevron toggles.

Referenced-by backlinks

Reverse-index chip list above the Info tab.

  • Applies to interfaces, type aliases, enums, variables, functions.
  • Tracks extends, implements, member types, return types, host directives.
  • Override name: referenced-by.

Pagefind facet rail

Multi-dimensional filtering in the command palette.

  • Chip rows: Kind, Library, Tier, WCAG.
  • Multi-select per dimension, AND across dimensions.
  • Filter state persists in the URL.