⚠️ Design system CSS not found. Check the path in cms/docs.config.js → designSystemPath, then re-run npm run docgen.

Tool

The loosest layout. The shell, and a way out.

Mode

A tool can look like anything. This type supplies the site shell and nothing else by default — no page header, no contents rail, no pager. The header above is opted into from this page’s own frontmatter (header: "true"); the two full-bleed tools on this site skip even that.

One bar per page. It is this body’s own markup — the same .bar component every doc page uses, its content region carrying the tool’s instruments where a doc page carries its breadcrumb — and it ends the same way: actions, the overflow trigger, the close.

The close is the reader’s way out and the build enforces it: put data-page-close on an <a>, leave the href off, and the section index is filled in. A tool page without one fails the build.

Source: cms/examples/tool.md and cms/examples/tool.html. Real ones live in cms/apps/ — see SVG Cleaner for the framed shape and Logo Tool for the full-bleed one.

Was this page helpful?

We use this feedback to improve our documentation.

Thanks for your feedback

Send feedback

© 2026 By Default