The fable format
A fable is Markdown plus a toolbox of declarative components. You never write code — you declare components and pass them data, and BrainFables renders them. That is what makes fables safe to share: content is data, not code.
The authoring loop
- Copy the format prompt below into your model of choice, plus your topic.
- Paste the result into the editor — the live preview runs the exact compiler the server uses, with line-level errors.
- Publish. Readers comment on individual sections; votes build your reputation.
The toolbox
Eleven components. Each links to a worked example below.
:::asideMargin note — info, warning, history, intuition, or caveat.:::deeperCollapsed deep-dive with a ◆ difficulty rating. The layering primitive.::::stepsNumbered walkthrough of ::: step items.::::tabsAlternative views of the same idea (::: tab items).:::paramsDeclares sliders. Reference live values in prose as {name}.:::plotFunction plot over x and your params — reacts to sliders live.:::chartLine, area, bar or scatter chart from inline data points.:::timelineChronology with dates, events and optional detail.:::quizMultiple choice with an explanation reveal.:::tableSortable data table.::figureCaptioned https image.Plus everything Markdown already gives you, and KaTeX math via $…$ and $$…$$. Raw HTML is stripped. Fables are capped at 60,000 characters, five per author per day, licensed CC BY-SA 4.0.
Every tool, with an example
The left side is exactly what you write; the right side is the live render — the same compiler that gates submission. The sliders and quizzes below are real, so go ahead and touch them.
:::aside
Margin note — info, warning, history, intuition, or caveat.:::aside{kind="intuition" title="The shortcut"}
An aside is a thought worth keeping *beside* the main path, not blocking it.
Pick a **kind** — info, warning, history, intuition, caveat — to set its tone.
:::compiling…
:::deeper
Collapsed deep-dive with a ◆ difficulty rating. The layering primitive.:::deeper{title="Why the limit equals k" difficulty=3}
Keep the main path readable, then push rigor into a panel like this. The
difficulty diamonds warn the reader how steep the climb is before they open it.
$$\lim_{x \to 0} \frac{\sin(kx)}{x} = k$$
:::compiling…
::::steps
Numbered walkthrough of ::: step items.::::steps
:::step{title="Square it"}
Multiply the number by itself.
:::
:::step{title="Subtract one"}
Take the result and step down by a single unit.
:::
:::step{title="Factor"}
Now `n² − 1` reveals itself as `(n − 1)(n + 1)`.
:::
::::compiling…
::::tabs
Alternative views of the same idea (::: tab items).::::tabs
:::tab{label="Geometric"}
A derivative is the **slope** of the curve where you're standing.
:::
:::tab{label="Algebraic"}
A derivative is the limit $\lim_{h \to 0} \frac{f(x+h) - f(x)}{h}$.
:::
::::compiling…
:::params
Declares sliders. Reference live values in prose as {name}.:::params
```yaml
k: { min: 0.5, max: 8, init: 2, step: 0.1, label: Steepness }
```
:::
The steepness is now **{k}** — drag the slider and watch this number, and
every plot in the fable, update live.compiling…
:::plot
Function plot over x and your params — reacts to sliders live.:::params
```yaml
k: { min: 0.5, max: 8, init: 2, step: 0.1, label: Steepness }
```
:::
:::plot
```yaml
height: 280
x: { min: -15, max: 15 }
series:
- { name: "sin(kx)/x", expr: "sin(k*x)/x" }
- { name: "envelope", expr: "1/abs(x)" }
```
:::compiling…
:::chart
Line, area, bar or scatter chart from inline data points.:::chart
```yaml
kind: bar
xLabel: n
yLabel: primes below n
series:
- name: π(n)
points: [["10", 4], ["100", 25], ["1000", 168], ["10000", 1229]]
```
:::compiling…
:::timeline
Chronology with dates, events and optional detail.:::timeline
```yaml
- { when: "1859", what: "Riemann's paper", detail: "Eight pages that defined a century of work." }
- { when: "1914", what: "Hardy: infinitely many zeros on the line" }
- { when: "2004", what: "First 10 trillion zeros checked" }
```
:::compiling…
:::quiz
Multiple choice with an explanation reveal.:::quiz ```yaml question: As k grows, the central peak of sin(kx)/x… options: ["gets shorter", "gets taller", "stays the same"] answer: 1 explanation: The limit at zero equals k itself, so steeper waves peak higher. ``` :::
compiling…
:::table
Sortable data table.:::table ```yaml columns: [n, "π(n)", "n/ln(n)"] rows: - [1000, 168, 145] - [1000000, 78498, 72382] - [1000000000, 50847534, 48254942] ``` :::
compiling…
::figure
Captioned https image.::figure{src="https://picsum.photos/seed/brainfables/720/360" alt="A placeholder photograph" caption="Figures take an https src, required alt text, and an optional caption."}compiling…
The format prompt
This is the whole spec, written for a model. Copy it, append “Topic: …”, and let your model write.
You are writing a "fable" for BrainFables: a single-page interactive explainer in an extended Markdown format. Your goal is a layered, visual, honest explanation of one topic — the quality bar is a great museum exhibit crossed with a textbook chapter. Visualizations lead; text supports.
OUTPUT RULES
- Output ONE markdown document, nothing else.
- Start with YAML frontmatter:
---
title: A clear, curious title (≤120 chars)
summary: One-sentence hook shown in listings (≤300 chars)
tags: [two-to-five, lowercase-tags]
difficulty: 1 # 1 (anyone) to 5 (expert)
model: your-model-name # e.g. claude-fable-5
prompt_public: true
---
- Standard Markdown works: headings, lists, links, blockquotes, code fences, tables, images.
- Math: inline $...$ and display $$...$$ (KaTeX).
- Interactive components use ::: container directives. Component bodies that hold data must be a yaml code fence inside the directive.
- NO raw HTML, NO scripts, NO iframes — they are stripped/rejected.
COMPONENTS
:::aside{kind="intuition" title="Optional title"}
Margin note. kinds: info | warning | history | intuition | caveat
:::
:::deeper{title="Why this is true" difficulty=3}
Collapsed-by-default deep dive. Use these generously: keep the main path
readable at difficulty N, push rigor into deeper panels at N+1 or N+2.
:::
::::steps
:::step{title="First"}
Numbered walkthrough item (note: outer fence has FOUR colons, items have three).
:::
:::step{title="Then"}
...
:::
::::
::::tabs
:::tab{label="Geometric view"}
...
:::
:::tab{label="Algebraic view"}
...
:::
::::
:::params
```yaml
k: { min: 0.5, max: 8, init: 2, step: 0.1, label: Steepness }
```
:::
Declares interactive sliders (max 6 per fable). Names start with a letter and
may use letters, digits and underscores (e.g. k, L, H_kv) — pick whatever the
math wants. Reference a param's live value anywhere in prose as {k}. All plots
react to params automatically.
:::plot
```yaml
height: 300
x: { min: -10, max: 10 }
series:
- { name: wave, expr: "sin(k*x)/x" }
```
:::
Function plot. expr is a math expression over x plus your declared params.
Allowed functions: sin cos tan asin acos atan atan2 sinh cosh tanh exp log
log10 log2 sqrt abs pow min max floor ceil round sign mod gamma. Constants:
pi, e, tau, phi. THIS + params is the heart of the format: prefer a slider
the reader can drag over a paragraph describing what would change.
:::chart
```yaml
kind: line # line | area | bar | scatter
xLabel: year
yLabel: count
series:
- name: primes
points: [[1, 4], [2, 25], [3, 168]]
```
:::
:::timeline
```yaml
- { when: "1859", what: "Riemann's paper", detail: "Eight pages that defined a century of work." }
- { when: "1914", what: "Hardy: infinitely many zeros on the line" }
```
:::
:::quiz
```yaml
question: Where do all known nontrivial zeros lie?
options: ["On the real axis", "On the critical line", "Outside the critical strip"]
answer: 1
explanation: Every zero ever computed has real part exactly 1/2.
```
:::
:::table
```yaml
columns: [n, "π(n)", "n/ln(n)"]
rows:
- [1000, 168, 145]
- [1000000, 78498, 72382]
```
:::
::figure{src="https://example.com/image.png" alt="Required alt text" caption="Optional caption"}
STRUCTURE GUIDANCE
- Open with a hook paragraph a smart 12-year-old could follow.
- Alternate prose with interactive elements; aim for something to touch or
expand every 3–4 blocks.
- Use :::deeper panels for each audience layer rather than writing one flat
difficulty.
- End with a quiz or an open question.
- Components cannot be nested inside aside/deeper/step/tab bodies (prose and
math only there).
- Total length under 60,000 characters.