Angular 21+ · Open source · Node 22+
compodocx is a static documentation generator for Angular 21+ standalone code. Point it at your TypeScript source for a site that'sstandalone, signal-aware, themable.
Multi-version output, runnable StackBlitz playgrounds, CI diffs, LLM-context export - all included.
All from one CLI.
npm install -D @cngxjs/compodocxFeatures
Project structure
Entry points, imports, and folders decide where a symbol belongs. Every feature gets a page, and a References portal lists every documented symbol. Prefer one chapter per kind? Set menuLayout: 'type'.
Angular Support
input(), output(), model(), computed(), and linkedSignal() render as first-class members with their value types. Effects opt in via --showEffects.
Theming
Slate Noir, Ocean, Midnight, Nord, Rose Pine, Ember, Neon, Brutalist. Override any subset of --color-cdx-* tokens to ship your brand.
Build & CI
Docs for every release on one domain. Labels auto-detected from package.json. The version-switcher widget ships built in.
Tooling
compodocx diff fails CI when your public API breaks. compodocx playground:validate compiles every runnable demo before you ship it.
Tooling
Export your API as flat markdown or typed JSON. Drop it into your AI assistant, your code-review bot - or any downstream pipeline.
Export optionsAngular Support
Providers, feature functions, and injection tokens get their own pages. See which providers supply a token, who injects it, and what needs an injection context.
Dependency injection pagesAngular Support
Routes are read from provideRouter through the type checker, lazy loadChildren included. Components and guards link back to the routes that use them.
Theming
Comments above CSS custom properties and SCSS variables fill a Theming tab. styleFiles adds free-standing sheets, mixins, and a design tokens page.
Output
A static site where every standalone component, directive, and pipe gets a dedicated page. Deep links, full-text search, and a sticky source viewer included.
Coverage
Per-symbol coverage rolls up into a sortable report. Documented vs. not, broken down by kind. Set--coverageTest and your build fails below threshold.
--publicApiOnly to narrow further.Versioning
Each release writes into its own folder under a shared root. Aversions.json manifest drives the version-switcher in the topbar. Append-only, semver-sorted,no server-side config.
package.json, or override with--versionLabel.file://.Playground
Add a @playground JSDoc block to any component and compodocx ships a Playground tab on the rendered page with one launch button per block. Clicking opens a freshStackBlitz (opens in new tab) project, assembled at build time from your component sources. No iframe overlay, no library publication required.
Doc pages carry only an inert manifest, and nothing contacts StackBlitz until a reader clicks. @internal exports never leak into the public project.
Click-to-launch
StackBlitz opens in a fresh tab, not an embedded iframe.
Build-time assembled
Sources travel inline. No npm publish required to share a demo.
Launches on click
Nothing contacts StackBlitz until a reader clicks.
From compodoc
compodocx is a fork for Angular 21+ standalone code, not a drop-in replacement. Switching means changing the package and the script, running it once, and acting on the warnings it prints.
NgModules, @Input and other decorator members, constructor injection, and class-based guards, interceptors and resolvers. One legacy notice lists their locations.
Handlebars templates become JS overrides, rewritten by hand. Page URLs and the JSON export differ; redirects.json maps old paths to new ones.
ng add does for youSwaps the package, rewrites compodoc scripts, and seedstsconfig.doc.json.compodocx migrate jsdoc removes retired tags.
Setup
One command to install. One to run. The third is optional but recommended once your team is onboard.
Add it to your dev dependencies.
For Angular 21+ libraries and apps written with standalone APIs.
npm install -D @cngxjs/compodocxPoint at your tsconfig. Static docs land in ./documentation/<versionLabel>/.
Label auto-detected from package.json.
npx compodocx -p tsconfig.doc.jsonOr commit a JSON config so everyone on the team runs the same flags. Pin the theme.
{
"tsconfig": "tsconfig.doc.json",
"output": "documentation",
"theme": "ocean"
}Themes
Eight themes ship with compodocx. Try them live: your pick persists across pages. Want your own? Override any subset of --color-cdx-*tokens in a single CSS file.
FAQ
Quick answers to the questions that come up before adoption. Still stuck? Open an issue on GitHub.
@Input and @Output, constructor injection in Angular classes, or class-based guards, interceptors and resolvers. Page URLs, the JSON export and custom templates differ too.compodoc binary name and .compodocrc config names still work, and MIGRATION.md (opens in new tab) explains every warning the first run prints.computed() and linkedSignal(), inject(), the host metadata object, and functional guards, interceptors and resolvers.package.json, writes a versions.json manifest, and ships a runtime version-switcher widget.--color-cdx-* CSS custom properties in a single CSS file passed via --theme.compodocx diff compares two JSON exports and exits non-zero on API changes.--exportFormat json emits a typed export with a schemaVersion and a shipped JSON Schema.--coverageTest gates merges on documentation completeness.@playground JSDoc block to a component and compodocx renders a Playground tab with one launch button per block.@wcag A, AA, or AAA and a coloured chip lands in the page hero. Add @a11y for a free-form note attached to the entity for the llm-md export.