Live examples

See Doqs work, then read how.

Everything on this page is a real Angular component or a real link into the documentation, which is itself built with Doqs. Change a control and the component answers; copy the code and it is the code that is on screen.

Markdown

An Angular component, placed from Markdown

One line names a component your application registered. It is rendered on the server, hydrated in the browser and sits between ordinary paragraphs. Doqs is not MDX: nothing in the Markdown is evaluated.

Interactive components

docs/guides/example.md

## Try it

::demo[enter-animation]

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

Rendered

::demo[enter-animation], animated with Angular Movement

fade-up

src/app/doq.config.ts

const doqConfig = defineDoqConfig({
  ...doqPaths,
  demos: { 'install-command': InstallDemo, 'enter-animation': EnterDemo },
  playgrounds: {
    'movement-enter': { component: MovementPlaygroundComponent, controls: [/* preset, duration, … */] },
  },
});

Playground

Inputs, outputs and usage code that stay in sync

A playground lets readers change the inputs of a real component and watch its outputs. Here the controls are Volt UI and the component is the Angular Movement wrapper the documentation registers as movement-enter.

Interactive playgrounds

Preset

Duration

Animation

fade-up

usage

<div
  moveEnter="fade-up"
  [moveDuration]="600"
>
  Content
</div>

Demo

A copyable install command

The same component that sits in the Getting started guide: pick a package manager and copy the exact command.

Getting started

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

Content tooling

Code that comes from your source

A directive pulls a region or line range straight from a file in your repository, so a code sample cannot drift from the code it documents. doq content check fails CI when a generated page is stale.

Source-backed code

docs/guides/content-authoring.md

::source{file="packages/doq/bin/content/regions.mjs" region="marker" title="regions.mjs"}

The guide shows the attributes, how regions are marked in the source and a block rendered from Doqs's own code: see regions in the documentation.

API reference

Reference pages generated from TypeScript

doq-api reads a public entry point with your own TypeScript and writes ordinary Markdown pages: one per symbol, with signatures and JSDoc.

Angular API reference

terminal

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

Navigation

Search and navigation, without a backend

The sidebar, the sticky table of contents and Pagefind full-text search come with the documentation region. Open it and try them.

Navigation and search

The search box is at the top of every documentation page. The index is static and built from the prerendered pages.

Open the documentation