Documentation for Angular projects, generated from your code.
Write guides in Markdown with Nunjucks, get an API reference straight from your TypeScript, and drop live demos and playgrounds into any page, all inside a regular Angular app you control.
ng add @ng-doc/addGuides, API and live examples, linked together
NgDoc plugs into the Angular build, generates pages and routes for your docs, and keeps them up to date while you write.
Markdown + Nunjucks
Write guides in Markdown and reuse content with includes, macros and template logic.
Templates →API docs from your code
Classes, components, interfaces and functions documented from TypeScript and JSDoc, with no duplicate writing.
API pages →Demos and demo panes
Render any Angular component on a page with one line, with its source shown next to it.
Demos →Playgrounds
Controls generated from your component inputs let readers try every option live.
Playgrounds →Offline full-text search
Guides and API are indexed at build time, so search works without a hosted service.
Search →Keywords and auto-linking
Mention a declaration anywhere, even inside code blocks, and it links to its API page.
Links and keywords →Themeable, replaceable
CSS variables for colours, type and layout; swap the navbar or sidebar for your own components.
Themes and colors →SSR-ready, rebuilt as you type
Prerender to static HTML for fast loads and SEO. In development NgDoc watches your docs and API sources and rebuilds only what changed.
Prerendering →A folder, two files, one page
Each page is a folder with an ng-doc.page.ts and a Markdown file. NgDoc turns it into a routed Angular page with a table of contents, a search entry and links.
# {{ NgDocPage.title }} A button is an interface element that allowsthe user to perform an action when clicked. {% include "../shared/import-note.md" %} {{ NgDocActions.demo("ButtonDemoComponent") }} Configure it with `ButtonComponent` inputs.
Button
A button is an interface element that allows the user to perform an action when clicked.
Component can be imported from the root of my-lib.
Configure it with ButtonComponent inputs.
Three steps to your first page
NgDoc does not create a separate app: it generates pages into the Angular application you already have, so you can customise anything.
Add NgDoc
The schematic installs the packages and configures the builder for Angular CLI or Nx.
ng add @ng-doc/addCreate a page
Add a folder with a page config and Markdown next to your code, or let NgDoc scan your API.
docs/button/ ng-doc.page.ts index.mdServe and ship
Run the dev server while you write, then build or prerender for any static host.
ng serve ng build
An API reference that never drifts
Point NgDoc at your entry points; every exported declaration gets a page, grouped by package and kind.
- Members, overloads, decorators and modifiers from TypeScript
- JSDoc descriptions,
@seelinks and deprecations - Scopes for multi-package workspaces
- NgDocCodeComponentComponent
- NgDocThemeServiceInjectable
- NgDocSidebarComponentComponent
- provideNgDocAppFunction
- NgDocCustomNavbarDirectiveDirective
- NgDocPageInterface
- NgDocDefaultSearchEngineClass
- NG_DOC_DEFAULT_PAGE_PROCESSORSVariable
Start documenting your library today
Install with one command, write your first page in Markdown, and ship a searchable docs site.