How a Page Is Compiled
A short walk through the compiler · form + function
Every styled note is wrapped in a scoped element — [data-templar-scope] — and receives exactly one generated stylesheet. Two panes showing the same note stay isolated from each other.
The generated CSS never touches body or global selectors. It opens with [data-templar-scope="templar-leaf-1"] and every rule descends from that root.
From frontmatter to pixels
templar:
style-name: Bauhaus Review
template-id: bauhaus-review
paper:
color: "#f3f0e5"
pattern: graph
baseline:
enabled: true
unit: 24
typography:
body-font: Futura, "Avenir Next", system-ui, sans-serif
body-size: 15The compiler measures real fonts, fits every element to the baseline grid, and emits one stylesheet — capped at 1 MiB for safety.
| Safety boundary | Value |
|---|---|
| Generated stylesheet | 1 MiB maximum |
| Custom CSS selectors | Validated, then rewritten under the scope |
| Unknown style versions | Refused — protected data fails closed |
| Network requests | None, ever |
What the compiler does
- Parses the note's
templarblock into a validated style. - Measures the body, all six headings, and code against real browser fonts.
- Emits paper, typography, blocks, lists, images, and attachments as scoped CSS.
- Compiles custom CSS last so it wins — still inside the scope.
Invalid selectors and unsafe values are rejected with an issue list, not silently rewritten. Protected data is never overwritten by a style upgrade.
The output
[data-templar-scope="templar-leaf-1"] .templar-page {
background: #f3f0e5;
color: #24292d;
font-family: Futura, "Avenir Next", system-ui, sans-serif;
font-size: 15px;
line-height: 24px;
}- Scoped to one leaf
- Real font metrics, not guesses
- Baseline-aware after variable-height blocks
If you can read the compiled stylesheet, you can trust the page.