Example DocsExample Docs

Components

Writedocs injects a set of components into every MDX file automatically — no import statements needed. This page shows each one in use.

Nested MDX components must be provided automatically by Writedocs — you never write import statements. If you see an “undefined component” error, it’s a Writedocs bug, not something missing from your file.

Callouts

Four variants, for different levels of urgency:

A note — background information that’s useful but not critical.

A tip — a suggestion that makes something easier or faster.

A warning — something that could cause a problem if ignored.

A danger callout — reserved for destructive or irreversible actions.

Cards

Single card

🚀

Getting Started

Cards link to another page and show a short description underneath the title.

Card groups

Group cards into a responsive grid with CardGroup:

Two columns

cols={2} — the default.

Still two

Cards wrap onto a new row automatically.

Tabs

Useful for showing the same instruction across multiple package managers, languages, or platforms:

npm install writedocs
pnpm add writedocs
yarn add writedocs

Code groups

CodeGroup wraps one or more fenced code blocks with consistent spacing:

console.log("hello from writedocs");

Inline code and prose together

You can mix inline code like writedocs.config.json directly into a sentence, and it’ll pick up the same styling as fenced blocks, just smaller.

Accordions

Good for FAQs or optional detail you don’t want taking up space by default:

What is writedocs.json? #

It’s the config file describing navigation, theme, and metadata for your site. See the Configuration guide for the full schema.

Can I self-host the output? #

Yes — writedocs build produces a static dist/ folder you can host anywhere: Netlify, Cloudflare Pages, S3, or a plain nginx server.

Does it support versioned docs? #

Not yet — versioning is planned for a later phase. See WRITEDOCS_ARCHITECTURE.md in the repo root for the roadmap.

Steps

Numbered, connected steps for sequential instructions:

Write

Create or edit an .mdx file under docs/.

Preview

Run writedocs dev and check the change in your browser.

Ship

Run writedocs build and deploy the resulting dist/ folder.

Plain Markdown still works

Every component above is additive — regular Markdown syntax (lists, tables, blockquotes, links, bold/italic) works exactly as you’d expect without any component wrapper. See Writing content for a full rundown.