S
Specra Docs
Specra Docs Comprehensive documentation for your project

Documentation

Features

Explore all the features of the Specra documentation platform

Content Features

MDX Support

Write documentation in MDX—Markdown with React components built in.

Code
mdx 
1# Hello World
2 
3This is **Markdown** with a <Badge variant="success">React component</Badge>!
Tip
MDX lets you create interactive, dynamic documentation that goes beyond static text.

Syntax Highlighting

Code blocks automatically get syntax highlighting with line numbers:

Code
typescript 
1interface User {
2  id: string;
3  name: string;
4  email: string;
5}
6 
7function greetUser(user: User): string {
8  return `Hello, ${user.name}!`;
9}

Supported languages include JavaScript, TypeScript, Python, Bash, JSON, CSS, and many more.

Math Equations

Render mathematical equations using KaTeX:

Inline:

Block:

Mermaid Diagrams

Create diagrams from text using Mermaid:

Documentation workflow

Automatic Sidebar

The sidebar is automatically generated from your folder structure. Use _category_.json to customize:

Code
json 
1{
2  "label": "Guides",
3  "position": 2,
4  "collapsible": true,
5  "collapsed": false
6}

Table of Contents

A floating table of contents is automatically generated from your headings. It highlights the current section as you scroll.

Breadcrumb navigation helps users understand their location in the documentation hierarchy.

Version Switcher

Support multiple documentation versions with easy switching:

  • /docs/v1.0.0/getting-started
  • /docs/v2.0.0/getting-started
  • /docs/next/getting-started (unreleased)

Full-Text Search

Powered by Meilisearch for instant, typo-tolerant search results.

  • Keyboard shortcut: Press ⌘K or Ctrl+K to open search
  • Typo tolerance: Finds results even with spelling mistakes
  • Highlighted results: See where your query matches

Search Indexing

Documentation is automatically indexed at build time for fast search.

Theme & Styling

Dark Mode

Automatic dark mode that respects system preferences:

  • Light mode
  • Dark mode
  • System preference (auto)

Toggle with the button in the header.

Customizable Design

All styling is based on CSS variables and Tailwind, making customization easy:

Code
css 
1:root {
2  --primary: oklch(0.55 0.22 264.376);
3  --background: oklch(1 0 0);
4  --foreground: oklch(0.145 0 0);
5}

Components

Rich Component Library

Built-in components for common documentation patterns:

Callouts

Info, warning, tip, error alerts

Tabs

Tabbed content sections

Steps

Step-by-step guides

Accordion

Collapsible content

Cards

Feature cards with icons

Code Blocks

Syntax highlighted code

See the Components section for documentation on each component.

Developer Experience

Hot Reload

Changes to MDX files are instantly reflected without a full page refresh.

Frontmatter Validation

Frontmatter fields are validated at build time to catch errors early.

SEO Optimization

Automatic meta tags, OpenGraph images, and structured data from frontmatter:

  • Title and description tags
  • OpenGraph and Twitter cards
  • Canonical URLs
  • Sitemap generation

Reading Time

Automatic calculation and display of estimated reading time for each page.

Production Features

Static Generation

All pages are pre-rendered at build time for maximum performance:

  • Zero JavaScript required for content
  • Edge caching friendly
  • Fast Time to First Byte (TTFB)

Performance

  • Lighthouse score: 90+ (desktop)
  • Lazy-loaded images with SvelteKit Image
  • Code splitting for components

Accessibility

  • Keyboard navigation
  • Screen reader support
  • High contrast support
  • Focus management
Edit this page Report an issue