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

  1. Copy the format prompt below into your model of choice, plus your topic.
  2. Paste the result into the editor — the live preview runs the exact compiler the server uses, with line-level errors.
  3. Publish. Readers comment on individual sections; votes build your reputation.

The toolbox

Eleven components. Each links to a worked example below.

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.
source
:::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.
:::
renders as

compiling…

:::deeper

Collapsed deep-dive with a ◆ difficulty rating. The layering primitive.
source
:::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$$
:::
renders as

compiling…

::::steps

Numbered walkthrough of ::: step items.
source
::::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)`.
:::
::::
renders as

compiling…

::::tabs

Alternative views of the same idea (::: tab items).
source
::::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}$.
:::
::::
renders as

compiling…

:::params

Declares sliders. Reference live values in prose as {name}.
source
:::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.
renders as

compiling…

:::plot

Function plot over x and your params — reacts to sliders live.
source
:::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)" }
```
:::
renders as

compiling…

:::chart

Line, area, bar or scatter chart from inline data points.
source
:::chart
```yaml
kind: bar
xLabel: n
yLabel: primes below n
series:
  - name: π(n)
    points: [["10", 4], ["100", 25], ["1000", 168], ["10000", 1229]]
```
:::
renders as

compiling…

:::timeline

Chronology with dates, events and optional detail.
source
:::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" }
```
:::
renders as

compiling…

:::quiz

Multiple choice with an explanation reveal.
source
:::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.
```
:::
renders as

compiling…

:::table

Sortable data table.
source
:::table
```yaml
columns: [n, "π(n)", "n/ln(n)"]
rows:
  - [1000, 168, 145]
  - [1000000, 78498, 72382]
  - [1000000000, 50847534, 48254942]
```
:::
renders as

compiling…

::figure

Captioned https image.
source
::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."}
renders as

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.