A little HTML.
A lot more life.

Readable documents. Working graphics.
One import. A file you can keep.

Open the playground NO BUILD STEP · OPEN SOURCE · OFFLINE EXPORT

ONE FILE / MANY POSSIBILITIES

READABLE SOURCE<html>Made to open. Made to keep.

LIVE DATA / SAMPLE

Ideas, alive..html

TEXT + DATA + INTERACTION

Meet your next document.

LIVE EXAMPLES / SAMPLE DATA

Change the input.
See the thought move.

Drag the slider. The chart and the readout share one value.

Open this document ↗

A small experimentSample data

The baseline, multiplied by 1. No backend. No build step.

And this is the source.

<loam-range name="factor" label="Multiplier"
  min="0.5" max="2" step="0.1" value="1"></loam-range>

<loam-chart data-source="activity" type="area"
  x="month" y="activity" multiplier="factor"></loam-chart>

<p>Multiplied by <strong loam-bind="factor">1</strong>.</p>

Make an idea
understandable.

A working watch from Anatomy by Ryan. Focus the figure and press E to take it apart.

Figure Open full document ↗About Anatomy ↗

Make yourself comfortable.

A warm page at breakfast. A dark one after midnight. The theme travels with your file, and a handful of CSS variables makes it your own.

:root[data-theme="light"] {
  --loam-bg: #fbfaf8;
  --loam-text: #302f2d;
  --loam-accent: #b93f37;
  --loam-width: 740px;
}

Small source. Real possibilities.

Read the component guide ↗

<script defer src="https://loami.dev/v0.1.3/loami.js"></script>
<main>
  <h1>A thought worth sharing.</h1>
  <loam-chart data-source="data" type="area"
    x="month" y="activity"></loam-chart>
  <loam-table data-source="data" searchable></loam-table>
  <button data-loam-action="export">Save offline HTML</button>
</main>

PLAIN HTML. YOUR DATA. YOUR FILE.

Start with your agent.

Setup guide ↗

Give Claude Code or Codex the skill.
Make Loami your project’s document default.

Set up Loami for future documents in this project.

Copy, paste into your agent, and let it set up the project. Existing instructions are preserved.

SKILL.md Download ↓

Add the import yourself

Connect the MCP server

Read-only documentation and document generation. Agent reference ↗

A little HTML.A lot more life.

Meet your next document.

Change the input. See the thought move.

Data you can work with.

Make an idea understandable.

Make yourself comfortable.

Small source. Real possibilities.

A little HTML.
A lot more life.

Change the input.
See the thought move.

Make an idea
understandable.