CSS snippets

Snippets are small CSS stylesheets you write to restyle your documents. When you attach a snippet to a document, everyone who can view that document sees your styling — on the public page, a share link, or inside the workspace.

Snippets are sanitized on the server before anyone sees them, so they can only ever change the look of your document's body. They cannot touch the app around it, other pages, other documents, or the network. You write plain selectors; Vault confines them for you.

---

Quick start

1. Open Settings → Snippets, give a snippet a name, and click Create.
2. Click Edit CSS, write your CSS, and watch the live preview. The preview shows exactly what viewers see — including a note for any rule that was dropped and why.
3. Click Save.
4. Open a document you own, and in the right-hand Styling card attach the snippet. A document can hold up to five snippets; they apply in listed order.

Viewers get a Custom styling pill to turn your styling off for their view, and signed-in users can disable all author styling globally from Settings → Snippets.

---

Where snippets apply

Editing in Live mode now shows your styling on the rendered blocks as you work. To see the document exactly as a viewer will — every element, full layout — switch the editor to Read mode (the mode switch is above the editor).

---

How scoping works

Every selector you write is automatically rewritten to live inside your document's body only. Concretely, Vault prefixes each selector with a per-document scope:

/* you write */
.vault-md-h1 { letter-spacing: -0.01em; }

/* Vault compiles it to (conceptually) */
[data-vault-snippet-scope="<documentId>"] .vault-md-h1 { letter-spacing: -0.01em; }

Because of this you cannot target :root, html, or body (those are rejected), and nothing you write can affect anything outside the document body.

---

The class contract

These are the stable, supported class names on rendered document content. Treat them as the public API — internal/editor classes (.vault-cm-*, .cm-*, Tailwind utilities, workspace chrome) are not part of the contract and may change or break at any time.

Block text

Inline text

Tables & definition lists

Media

Wiki links, regions, embeds

Asset embeds

Layout modifiers (set from the embed's attribute block, not usually restyled): .vault-asset-width-*, .vault-asset-align-*, .vault-asset-layout-*, and for groups .vault-asset-group-columns-N, -gap-*, -align-*, -width-*.

---

Callouts

Callouts are the richest styling target. A callout renders as:

<div class="callout" data-callout="tip" data-callout-resolved="tip">
  <div class="callout-title">
    <span class="callout-icon">…svg…</span>
    <span class="callout-title-inner">Title</span>
  </div>
  <div class="callout-content">…body…</div>
</div>

A foldable callout (> [!tip]+ / -) is a <details class="callout"> with a .callout-summary in place of .callout-title, and carries data-callout-fold.

Callout parts

The --callout-color variable (read this carefully)

Each callout type sets --callout-color as an RGB triple — three numbers, not a hex or named color. It is consumed as rgb(var(--callout-color)) and rgba(var(--callout-color), <alpha>), which is how one value drives the text, icon, border, and tinted background together.

/* ✅ correct — a triple */
.callout[data-callout-resolved="tip"] { --callout-color: 120, 82, 238; }

/* ❌ wrong — breaks every rgb()/rgba() that reads it */
.callout[data-callout-resolved="tip"] { --callout-color: #7852ee; }

Recolor by resolved type, or override one raw alias, or restyle the container directly:

/* retint the whole "tip" family */
.callout[data-callout-resolved="tip"] { --callout-color: 16, 185, 129; }

/* only when someone typed [!important] specifically */
.callout[data-callout="important"] { --callout-color: 244, 63, 94; }

/* change the shape without touching the color system */
.callout { border-radius: 14px; border-left-width: 4px; }

Built-in callout types and their colors

Aliases resolve to one of these canonical types (shown in data-callout-resolved); target the resolved type to catch all aliases.

Changing the icon with --callout-icon

Set --callout-icon to a Lucide icon ID prefixed with lucide-, exactly like Obsidian. Vault reads the variable and swaps the icon in:

.callout[data-callout-resolved="tip"] { --callout-icon: lucide-rocket; }

• The value is a Lucide icon ID from lucide.dev/icons with a lucide- prefix (e.g. lucide-shield, lucide-target, lucide-code). Unknown names are ignored and the built-in icon stays.
• Unlike Obsidian, a raw <svg>…</svg> value is not supported — the compiler strips any value containing < or >. Use a Lucide ID.
• The icon inherits --callout-color, so recolor with the color variable.

You can still style the icon element directly:

.callout-icon svg { width: 1.25rem; height: 1.25rem; }  /* resize */
.callout-icon { color: rgb(158, 158, 158); }             /* recolor just the icon */
.callout[data-callout-resolved="note"] .callout-icon { display: none; } /* hide it */

Custom callout types

Any [!type] you invent works — it renders with the note fallback styling and gets a data-callout="<your-type>" hook you can target. Combine a color and an icon to define a brand-new callout. For a game design doc:

> [!defence] Defence
> Reduces incoming damage by the shown percentage.

.callout[data-callout="defence"] {
  --callout-color: 59, 130, 246;   /* RGB triple */
  --callout-icon: lucide-shield;   /* any lucide.dev icon */
}

---

Variables

Your own --snip-* variables

Define and reuse your own variables freely:

.vault-md-h2 {
  --snip-accent: oklch(0.7 0.15 250);
  color: var(--snip-accent);
  border-bottom: 2px solid var(--snip-accent);
}

Theme tokens (readable, but names not guaranteed)

You may read the app's theme tokens so your styling adapts to light/dark mode. These are convenient but not part of the stable contract — names can change:

Using them keeps a snippet theme-aware:

.vault-md-blockquote {
  border-left: 3px solid var(--border);
  color: var(--muted-foreground);
}

---

Author hook classes (snip-*)

Need a target that isn't a standard element? Add your own class in raw HTML — but only the snip- prefix survives sanitizing (every other author-supplied class is stripped):

<div class="snip-hero">

# A styled hero

</div>

.snip-hero {
  padding: 2rem;
  border-radius: var(--radius);
  background: linear-gradient(120deg, #1e293b, #0f172a);
}

---

What CSS is allowed

Snippets are declarative CSS only. The compiler keeps what's safe and drops the rest, telling you which rule and why.

At-rules

Properties (by category — most common CSS works)

• Typography: color, font*, line-height, letter-spacing, text-*, white-space, word-break, list-style*, content, quotes, counters, -webkit-line-clamp, -webkit-background-clip, …
• Color & background: background* (including gradients), opacity, mix-blend-mode, accent-color, caret-color, color-scheme.
• Box model: margin*, padding*, border*, border-radius, outline*, box-shadow, box-sizing, width/height (+ min/max, logical sizes), aspect-ratio, gap.
• Layout: display, position (see limit below), top/right/bottom/left, inset*, float, clear, z-index, overflow*, visibility, object-fit, full flexbox and grid, multi-column.
• Effects & motion: transform*, perspective, transition*, animation*, filter, backdrop-filter, clip-path, mix-blend-mode.
• Interaction: cursor, pointer-events, user-select, scroll-behavior, resize, isolation.

Any property not on the allowlist (e.g. performance/containment escape hatches) is dropped silently-with-a-warning.

What is blocked, and why

Gradients are fine (they load nothing). Animations and transitions are allowed but automatically paused for viewers who prefer reduced motion.

---

Limits

---

Recipes

Serif headings with tighter tracking

.vault-md-h1, .vault-md-h2 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: -0.015em;
}

Softer, rounder callouts with a custom "tip" color

.callout { border-radius: 14px; }
.callout[data-callout-resolved="tip"] { --callout-color: 16, 185, 129; }

Zebra-striped tables

.vault-md-table tr:nth-child(even) .vault-md-td {
  background: color-mix(in oklab, var(--foreground) 5%, transparent);
}

A callout-style hero block via a hook class

.snip-hero {
  padding: 2rem;
  border-radius: var(--radius);
  color: var(--card-foreground);
  background: linear-gradient(120deg, var(--card), color-mix(in oklab, var(--accent) 40%, var(--card)));
}

---

Troubleshooting