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.