Kitchen Sink

This page renders every custom extension provided by Sarde in one place. It is a visual reference, not a tutorial. For usage details, see the individual extension pages in the sidebar.

Inline Extensions

Highlight

Use ==text== to highlight a word or phrase inline.

Spoiler

Use ||text|| to hide content until hovered or clicked. The answer is 42.

Keyboard Keys

Default: Ctrl+Shift+P | Small: Ctrl+S | Large: Ctrl+S

Wide keys: Space Enter Backspace

Combined: Space Tab

Special keys: Esc Tab ⇧ ⌘ ⌥ ⌃ ↑ ↓ ← → Delete

Copy Text

Install with go install github.com/getsarde/sarde@latest and configure at ~/.config/sarde.yaml.

Annotation

Highlight style: the virtual DOM pattern enables fast UI updates.

Plain style: check the SSR configuration for production deployments.

Icons

Lucide (default):

Tabler:

Simple Icons:

Inline Math

Einstein's equation $$E = mc^2$$ and the quadratic formula $x = \frac{-b \pm \sqrt{b^2 - 4ac}}{2a}$ .

Block Extensions

Asides

:::success
A success aside confirming that a step completed correctly.
:::

GitHub-Flavored Asides

Rich Content in Asides

Badges

NewDeprecatedRemovedBetav2.0.0Preview

Outline Badges

StableExperimentalBreaking

Badge Sizes

SmallDefaultLarge

Badge without Icon

No Icon

Badge Group

GET/api/usersAuth Required

Details

Click to expand

Hidden content with any markdown: lists, formatting, and code blocks.

site:
  title: "My Site"

Expanded by default

This details block starts open.

Accordion

Default (exclusive, one open at a time):

What is Sarde?

A zero-config, Go-based static site generator.

How do I install it?

Run go install github.com/getsarde/sarde@latest to install.

Is it extensible?

Yes, with a plugin system offering four lifecycle hooks.

Independent (multiple open):

Item one

This item can stay open independently of the others.

Item two

So can this one.

Cards

Getting Started

Learn how to set up your first Sarde project in under five minutes.

Highlighted Card

Use variant="highlighted" for an accent border.

Subtle Card

Use variant="subtle" for a transparent background with a dashed border.

Card Grid (auto columns)

Fast Builds

Parallel rendering and incremental builds.

Zero Config

Drop Markdown files into content/ and go.

Extensible

Four lifecycle hooks for plugins.

Themeable

Template overlay resolution at every level.

Card Grid (fixed 3 columns)

Routes

URL routes with parameters and wildcards.

Templates

Go html/template with custom functions.

Plugins

Extend every stage of the build pipeline.

Card Grid (stagger)

Fast Builds

Parallel rendering keeps builds under a second.

Zero Config

Drop Markdown into content/ and get a production site.

Extensible

Four lifecycle hooks for the build pipeline.

Themeable

Override any template at any level.

Link Cards

Getting Started Guide

Follow the step-by-step setup guide.

External Link Card

GitHub Repository

View the source code and contribute.

github.com

Link Card with Image

Sarde Desktop

A visual authoring environment powered by Tauri and Svelte.

github.com

Tab Behavior Override

Internal (opens new tab)

This internal link opens in a new tab.

External (same tab)

This external link stays in the same tab.

go.dev

Link Buttons

Primary Secondary Minimal Ghost Outline

Button Sizes

Small Default Large

Icon-Only Buttons

Columns

Left Column

Content on the left side. Columns collapse to a single column on small screens.

Right Column

Content on the right side. Each column can contain any markdown.

One

First of three columns.

Two

Second of three columns.

Three

Third of three columns.

Steps

Install Sarde. Download the binary or install via your package manager.
Create a project. Run sarde new my-site to scaffold a new project.
Add content. Drop Markdown files into the content/ directory.
Start the dev server. Run sarde dev and open http://localhost:4727.
Build for production. Run sarde build to generate the static site in dist/.

Steps with Headings

Install dependencies

go install github.com/getsarde/sarde@latest

Create your configuration

site:
  title: "My Documentation"
  url: "https://docs.example.com"

Write your first page

Create content/docs/getting-started.md. Sarde will auto-detect it as a docs collection page.

Deploy

sarde build

Tabs

npm install -g sarde

pnpm add -g sarde

yarn global add sarde

go install github.com/getsarde/sarde@latest

Tabs with Icons

console.log("Hello, world!");

const greeting: string = "Hello, world!";
console.log(greeting);

print("Hello, world!")

fmt.Println("Hello, world!")

Code Group

package main
import "fmt"
func main() {
    fmt.Println("Hello from Go")
}

function main() {
    console.log("Hello from TypeScript");
}

def main():
    print("Hello from Python")
main()

File Tree

my-site
- content
  - docs
    - getting-started.md
    - configuration.md
    - _index.md
  - blog
    - 2025-01-01-hello-world.md
    - _index.md
  - _index.md
- themes
  - default
    - layouts
    - public
    - ...
- public
  - images
  - favicon.ico
- sarde.yamlSite configuration
- package.json

Figure

Build Pipeline — The Sarde build pipeline processes content through six stages

Gallery

Screenshot Gallery

Image Compare

Before and After Optimization

Before

After

Video

Video Embed

4:3 Aspect Ratio

4:3 format

Autoplay, Muted, Loop

Vimeo

Vimeo Showcase

Timeline

v2.0.0 (September 2025)

Major release: new engine, Goldmark extensions, Orama search, and the Tauri desktop app.

v2.1.0 (December 2025)

Added collection versioning, tabbed docs, and the announcements plugin.

v2.2.0 (February 2026)

Introduced the Python SDK, expanded i18n, and added content linting.

v2.3.0 (April 2026)

Improved cold start times by 40% and added focus mode.

v2.4.0 (June 2026)

Region-aware Realtime presence and the columns extension.

Timeline with Headings

Alpha

Opened to a small group of design partners.

Beta

Public beta with production workloads.

General Availability

Stable release with SLA guarantees.

Terminal

$ sarde new my-docs
Creating new project in ./my-docs...
Created content/
Created sarde.yaml
Installed default theme
Created content/_index.md
$ cd my-docs && sarde dev
Starting dev server...
Discovered 1 page
Built site in 12ms
http://localhost:4727

Block Math

$$ $$

$$ $$

$$ $$

Mermaid Diagrams

graph TD A[Content Files] --> B[Discover] B --> C[Parse] C --> D[Assemble] D --> E[Render] E --> F[Write] F --> G[Static Site]

sequenceDiagram participant U as User participant C as CLI participant E as Engine participant T as Theme U->>C: sarde build C->>E: BuildSite() E->>E: Discover content E->>E: Parse frontmatter E->>T: Resolve templates T-->>E: Rendered HTML E->>E: Write to dist/ E-->>C: Build complete C-->>U: 42 pages in 1.2s

Code Diff

- const config = loadConfig("config.json")
+ const config = loadConfig("sarde.yaml")
  
  func buildSite(cfg Config) error {
-     pages, err := discover(cfg.ContentDir)
+     pages, err := discoverParallel(cfg.ContentDir, cfg.Workers)
      if err != nil {
          return err
      }
  }

Code Block Features

Titles, line numbers, and line annotations:

1
package main
2
3
import "fmt"
4
5
func greet(name string) string {
6
    return fmt.Sprintf("Hello, %s!", name)
7
}
8
9
func main() { greet("world") }
10
func main() { greet("Sarde") }

Focus and collapse:

export const config = {
  title: "My Site",
  description: "Built with Sarde",
  url: "https://example.com",
  theme: {
    preset: "ocean",
    dark: true,
  },
  build: {
    minify: true,
    parallel: true,
  },
};

Terminal chrome (applied automatically for bash, sh, zsh, powershell, cmd):

sarde build --minify

sarde build --minify

Combining Extensions

Extensions compose naturally. Here are some examples of nesting and mixing.

Full Configuration Example

site:
  title: "My Site"

site:
  title: "My Site"
  description: "A comprehensive documentation site"
  url: "https://example.com"
  language: "en"
build:
  minify: true
plugins:
  enabled:
    - search
    - seo
    - sitemap