YASSB · Static sites, agent-ready

Dependencies: 5
Runtimes: Node · Bun
Faster than 1.x: 2.6×
Features tracked: 58
License: MIT

The mental model

One file per job. Readable at a glance.

Data lives in JSON, the page declares what it shows, a typed function renders it. No template language to learn, no magic to reverse-engineer: you, your teammates and your coding agent can read every page and know where everything comes from.

my-site

UIsrc/app/pages/index.html

<main>
  <!-- component="site/header.html" -->
  <h1 data-t="HOME.TITLE">Talks</h1>
  <ul class="talks">
    <!-- create-from-data-source="talks.json" renderer="talkList" options="{"limit":3}" -->
  </ul>
</main>

Datadata-sources/talks.json

[
  {
    "title": "Static sites in 2026",
    "date": "2026-03-12",
    "place": "Milan"
  },
  {
    "title": "Agents and the web",
    "date": "2026-05-02",
    "place": "Online"
  }
]

Logicbuilder/renderers.ts

import { RendererProps } from 'yassb-web';

export function talkList({ source, options }:
  RendererProps<Talk[], { limit?: number }>) {
  return source
    .slice(0, options?.limit)
    .map(t => `<li>${t.title} · ${t.place}</li>`)
    .join('');
}

Everything included

All a static site needs. Nothing it doesn't.

↵

↵

Components

Pages are just HTML

Reuse headers, footers and sections with one comment. HTML, SVG and Markdown components, nested as deep as you like, with front matter placeholders.

[
{ "title": "Agents" },
{ "title": "Speed" }
]

talkList()→

Agents

Speed

Data + renderers

Content in JSON, markup from TypeScript

A page names the file it shows and the function that renders it. Typed props, no template language, nothing hidden.

---

title: Hello world

date: 2026-01-15

---

# Hello

Write **Markdown**, get a page.

Markdown

Blogs and docs

One page per Markdown file, with front matter. These docs are built that way.

enWelcome itBenvenuti deWillkommen

Translations

One markup, every language

Mark text with a key; each page is built once per language, and missing keys are reported.

Sass Tailwind esbuild TypeScript

Assets

Bring your CSS, keep your TS

Sass by default, Tailwind or any PostCSS pipeline in five lines, TypeScript and JSX bundled with esbuild.

Agent-ready

Built to be read by coding agents.

An agent needs a map, the rules and a way to know it got it right. YASSB ships all three in the command line, in plain text and JSON.

$ npx yassb inspect
YASSB project my-site@1.4.0 (yassb-web 2.0.0)
Languages: en, it (first one served at /)

Pages (6):
  src/app/pages/index.html  "Home"
    components: site/footer.html, site/header.html
    data: talks.json→talkList, team.json→peopleCards
Data sources (4):
  talks.json   array(12) of {title, date, place}
               ← src/app/pages/index.html:18
Renderers:
  talkList     custom    used 2×
  peopleCards  custom    used 1×

yassb inspect

A map of any site in one command

Pages, components, data sources, renderers and every directive with file and line. Read-only, half a second, and --json for a full manifest.

$ npx yassb check
error DATA_SOURCE_NOT_FOUND
  src/app/pages/index.html:18
  Data source "talk.json" not found.
  hint: paths are relative to data-sources/

✗ 1 error(s), 0 warning(s)  → exit 1

yassb check

Knows when a change is right

Builds and validates: directives, data, translations, links, undeclared packages. Exit code 0 means done.

{
  "level": "error",
  "code": "RENDERER_FAILED",
  "file": "src/app/pages/index.html",
  "line": 18,
  "message": "Renderer \"talkList\" failed: …",
  "fatal": true
}

Diagnostics

Errors an agent can act on

Every problem has a stable code, the source file, the line and a hint. No more guessing from a stack trace.

$ npx yassb docs features
directive (8)
  directive.component
  directive.create-from-data-source
  directive.url-to   …
config (21)   cli (8)   i18n (2)   …

yassb docs

The manual, in the terminal

The whole guide ships with the package and always matches the installed version. No browsing, no hallucinated APIs.

features · 100% documented

Feature catalogue

Docs that can't fall behind

Every feature is tagged in the code. If one is missing from the docs, YASSB's own build fails.

Developer experience

A watch mode you can trust.

Save a file, see the page. Change a renderer, the config, even package.json: picked up, every time.

1A fresh process for every build.: Nothing stale, nothing cached: your code is always the code that runs.
2Errors in the page, not in a log.: If your code throws, the server stays up and the browser shows what broke, with file and line.
3Only what changed.: A stylesheet edit swaps the CSS without reloading; a script edit only rebundles the scripts.
4TypeScript with zero setup.: Config, renderers and directives in TS or TSX, compiled by esbuild. No ts-node, no build step.

localhost:3000

YASSB: rebuilding…

YASSB: 1 error(s) in the last buildclose

RENDERER_FAILED src/app/pages/index.html:18

Renderer "talkList" failed: Cannot read properties of undefined (reading 'title')

YASSB 2.0

Lighter, faster, and your 1.x site still builds.

Measured on a real bilingual site: thirteen pages, a blog, Tailwind and custom directives.

Runtime dependencies

26 5

From 393 installed packages to 58. Node built-ins first, one tool per job.

Full build

4.8s 1.8s

esbuild instead of webpack and ts-node; 1.4 s on Bun.

Changes to upgrade

Same directives, same config, same pages: checked against 1.4.3 output. Upgrade guide →

Static sites, agent‑ready.