Getting started

About 2 min read

Your first Folio document — 30 seconds to a rendered result, zero install.

1. Open the playground

Go to → playground

Source on the left, preview on the right. The default “Three months learning to run” example shows off Folio‘s core commands:

Change a number and watch the preview update.

2. Make it yours

In the dropdown at the top of the playground, switch to “Templates → Starter · 30 lines to edit”. Replace its content with your own — this is the minimal shape:

---
title: My first Folio
theme: swiss
notes:
  PMF: "Product-Market Fit — the signal product and market match"
---

# Q3 retrospective

This quarter we hit ==PMF==. Three things moved the numbers:

1. Cut non-core features
2. Rewrote new-user onboarding
3. Tiered pricing

:::对比 mode=before-after
left:
  title: Q1
  metrics:
    - Retention: 38%
    - Weekly active: 120
right:
  title: Q3
  metrics:
    - Retention: 67%
    - Weekly active: 580
:::

3. (Optional) Install locally

If you want to compile offline, batch-build, or wire it into CI:

npx @foliolang/cli init

This creates article.md, folio.config.json, and .env.example.

You need an LLM API key only for AI commands (:::insert-flow / :::insert-chart / :::insert-interactive). Pure static commands (:::对比 / :::时间线 / :::注释 / :::引用 / :::insert-table) work without a key.

export DEEPSEEK_API_KEY=sk-...  # or another provider
npx @foliolang/cli build article.md

Outputs article.html — open in any browser.

4. (Optional) Live preview

npx @foliolang/cli dev article.md

Open http://localhost:5173. Save article.md and the browser refreshes automatically.

Next