Angular · Analog.js · Markdown

Your documentation, inside your Angular app.

Doqs adds Markdown documentation to the Angular and Analog.js application you already have: server-rendered, statically generated and searchable, with real Angular components living between the paragraphs. Your layout, routes and theme stay yours.

Get started Explore examples

pnpm add @doqs/analog @analogjs/content @analogjs/router prismjs

doqs.andersseen.dev/docs/guides/interactive-playgrounds

Guides

Interactive playgrounds

Let readers change a real Angular component's inputs, watch its outputs and copy usage code.

Rendered

Markdown

fade-up

## Register

Register the component once, then place it:

::demo[enter-animation]

## Place

The text after a demo is still ordinary,
searchable Markdown.

A page from the Doqs documentation: real navigation, a real Angular component. Open the full page

What Doqs adds

Documentation that is made of your app, not wrapped around it

Angular components inside Markdown

Register a standalone component once and place it between paragraphs with one line. It renders on the server and hydrates in the browser. Register it as a playground and readers can change its inputs, watch its outputs and copy usage code. Doqs is not MDX: a directive only names a component your application registered.

See it working

docs/guides/example.md

## Try it

::demo[enter-animation]

API reference generated from your source

doq-api reads your library’s public TypeScript API, with signal inputs, outputs, models and JSDoc, and writes ordinary Markdown pages that share the sidebar, search and theme. A check command fails CI when they are stale.

Angular API reference

terminal

pnpm exec doq-api generate --entry src/public-api.ts
pnpm exec doq-api check --entry src/public-api.ts

Examples that cannot drift

Pull a named region or line range straight from a file in your repository. The page is generated, committed and checked, so a code sample always matches the code it documents.

Source-backed code

docs/guides/example.md

::source{file="src/button.ts" region="usage" title="button.ts"}

Static full-text search
Optional Pagefind index built from your prerendered output. No backend, off by default.
SSR and SSG
doqPrerenderRoutes() feeds Analog’s prerenderer: every page ships as static HTML and hydrates cleanly.
Versioned documentation
Keep older releases readable at stable /v/<id> URLs, with a version selector and version-filtered search.
Host-owned theme and layout
Restyle with --host-docs-* CSS tokens. Doqs sets no global html or body styles.
Composition slots
Add your own standalone components after the docs index intro or after every document.
CLI
doq init scaffolds the files, doq doctor checks the integration and reports what it cannot verify.

Quick start

Up and running in four steps

Doqs plugs into an Analog app. Analog keeps its own configuration; Doqs adds its own. The two are separate on purpose.

Install
Add the package next to Analog’s content packages.
Configure
Share the paths, prerender with Analog and register Doqs in your app config.
Write Markdown
Drop files into src/content/docs. Routes, sidebar and table of contents follow.
Build and deploy
vite build prerenders everything to static files you can host anywhere.

Shared paths

Analog prerender

Angular providers

API reference

Demo registration

src/doq.paths.ts

// shared by vite.config.ts, so no Angular components here
export const doqPaths = {
  contentDirectory: 'docs',
  basePath: '/docs',
  // optional: keep older releases readable at /docs/v/1.3
  versioning: {
    current: { id: 'latest', label: 'Latest' },
    archives: [{ id: '1.3', label: 'v1.3', contentDirectory: 'docs-v1-3' }],
  },
} as const;

vite.config.ts

// Analog configuration: prerender routes
import { doqPrerenderRoutes } from '@doqs/analog';
import { doqPaths } from './src/doq.paths';

analog({
  ssr: true,
  static: true,
  content: { highlighter: 'prism' },
  prerender: { routes: async () => ['/', ...doqPrerenderRoutes(doqPaths)] },
});

src/app/app.config.ts

// Doqs configuration next to Analog's providers
import { provideContent, withMarkdownRenderer } from '@analogjs/content';
import { provideFileRouter, withExtraRoutes } from '@analogjs/router';
import { defineDoqConfig, doqRoutes, provideDoq } from '@doqs/analog';
import { doqPaths } from '../doq.paths';

const doqConfig = defineDoqConfig({ ...doqPaths, sidebar: 'left', showTableOfContents: true });

export const appConfig: ApplicationConfig = {
  providers: [
    provideFileRouter(withExtraRoutes(doqRoutes(doqConfig))),
    provideContent(withMarkdownRenderer()),
    provideDoq(doqConfig),
  ],
};

package.json

// optional: reference pages generated from your public TypeScript API
"scripts": {
  "api": "doq-api generate --entry src/public-api.ts",
  "api:check": "doq-api check --entry src/public-api.ts"
}

src/app/app.config.ts

// one registry for inline and frontmatter demos
const doqConfig = defineDoqConfig({
  ...doqPaths,
  demos: {
    'install-command': InstallCommandComponent,
    'enter-animation': EnterAnimationDemoComponent,
  },
});

Import @doqs/analog/styles.css once in your global stylesheet, then run pnpm exec doq init to scaffold the files. The complete walkthrough is the getting started guide.

In use

Built with Doqs, checked against real sites

You are looking at it

The documentation of this site is a Doqs consumer: Markdown files, the Doqs sidebar, table of contents and Pagefind search, Angular demos and playgrounds, generated API pages, all prerendered and loaded as a lazy route.

Open the documentation

Verified on real documentation sites

The repository’s adoption checks migrate disposable copies of the Angular Movement and Volt UI documentation sites onto Doqs, keep their URLs, build them from the packed tarball and run them in a browser. Each capability is classified as replaced, host-owned or blocked.

Read the parity report

Put your documentation where your components already are.

Get started View on GitHub

Your documentation, inside your Angular app.

Documentation that is made of your app, not wrapped around it

Angular components inside Markdown

API reference generated from your source

Examples that cannot drift

Static full-text search

SSR and SSG

Versioned documentation

Host-owned theme and layout

Composition slots

CLI

Up and running in four steps

Install

Configure

Write Markdown

Build and deploy

Built with Doqs, checked against real sites

You are looking at it

Verified on real documentation sites

Put your documentation where your components already are.