FOLIO · CONTENT-AS-INTERFACE · MIT · v1.0

Notes that bloom.

Charts, diagrams, illustrations and live widgets grow inline from natural-language description. One source, three audiences: humans read, LLMs generate, agents query.

▶ Open Playground Read Docs Join Cloud waitlist
NEW

AI agents can read Folio out of the box.

Every Folio document ships data-folio-block markers and JSON-LD. Open this page in your favorite AI:

What it does

//insert-chart

Charts from prose

Describe a chart in plain language → LLM produces a Vega-Lite spec → browser renders interactively.

::: /insert-chart ref@sales
Bar chart, X = quarter, Y = sales
Highlight Q4
:::
//insert-diagram

Diagrams from prose

Describe a flow → LLM produces Mermaid → browser renders.

::: /insert-flow
Login: enter → validate →
success to home / failure to error
:::
//insert-interactive

Interactive widgets

LLM picks a widget (filterable table, tabs, slider calc, accordion) and fills its config.

::: /insert-interactive ref@sales
Filterable + sortable sales table
:::

Who uses it

AGENTS

For agents

One MCP server config and your agent gets folio_build + folio_publish tool calls that return URLs.

{
  "mcpServers": {
    "folio": {
      "command": "npx",
      "args": ["@foliolang/cli/folio-mcp"]
    }
  }
}
HUMANS

For humans

CLI + local dev server. Write markdown, save, browser auto-reloads.

$ folio dev article.md
✓ http://localhost:5173

3 steps to start

  1. 01

    Install

    npm install -g @foliolang/cli
  2. 02

    Write

    # My article
::: /insert-flow
Login flow: enter → validate → success / fail
:::
  3. 03

    Build

    $ folio build article.md
✓ article.html