Plant je site.
Laat hem groeien.Plant your site.
Watch it grow.

WaldJS is een content-first webframework voor razendsnelle, statische websites. Schrijf .wald-bestanden — deels frontmatter, deels HTML-template — en WaldJS compileert ze tot een statische site.WaldJS is a content-first web framework for blazing-fast, static-first websites. Write .wald files — part frontmatter, part HTML template — and WaldJS compiles them into a static site.

Plant je eerste bos 🌱Plant your first forest 🌱 Bekijk op GitHubView on GitHub
⭐ – stars 🍴 – forks Open sourceOpen source · MIT
terminal
$

🌱 Tip: klik ergens in het bos om een boom te planten🌱 Tip: click anywhere in the forest to plant a tree

Quick start

Van zaadje tot site in 30 secondenFrom seed to site in 30 seconds

Eén commando en je bos staat. Kies npm of pnpm.One command and your forest is planted. Choose npm or pnpm.

npm
# Nieuw project plantenPlant a new project
npm create wald@latest my-forest
cd my-forest
npm run dev
pnpm
# Of met pnpmOr with pnpm
pnpm create wald my-forest
cd my-forest
pnpm dev

Het bestandsformaatThe file format Eén .wald-bestand, twee delenOne .wald file, two parts

Boven de --- schrijf je gewone JavaScript of TypeScript (frontmatter). Daaronder een HTML-template waarin {expressies} waarden interpoleren.Above the --- you write plain JavaScript or TypeScript (frontmatter). Below it an HTML template where {expressions} interpolate values.

Alle geïnterpoleerde waarden worden standaard HTML-escaped. Veilig vanaf de wortel.All interpolated values are HTML-escaped by default. Safe from the roots up.

src/pages/index.wald
---
const title = "Hello World"
---
<h1>{title}</h1>
<p>Welkom in je bos.Welcome to your forest.</p>
Playground

Probeer het zelfTry it yourself

Bewerk het .wald-bestand links en zie de pagina rechts direct meegroeien.Edit the .wald file on the left and watch the page grow on the right.

speeltuin.wald
De bos-metafoorThe forest metaphor

Denk in bomen, niet in buzzwordsThink in trees, not buzzwords

WaldJS gebruikt overal een bos-metafoor. Eén terminologie, van CLI tot compiler.WaldJS uses a forest metaphor throughout. One terminology, from CLI to compiler.

🌲

Wald

Het bos — je hele website.The forest — your whole website.

🫚

Roots

De compiler die .wald-bestanden transformeert.The compiler that transforms .wald files.

🌳

Trees

Pagina's — .wald-bestanden in src/pages/.Pages — .wald files in src/pages/.

🌿

Branches

Componenten — herbruikbare .wald-bestanden.Components — reusable .wald files.

🍃

Canopies

Interactieve eilandjes op een statische pagina: canopy:load, canopy:idle of canopy:visible.Interactive islands on a static page: canopy:load, canopy:idle or canopy:visible.

Features

Alles wat een bos nodig heeftEverything a forest needs

Pagina'sPages Bestanden worden vanzelf routesFiles become routes automatically

Elk bestand in src/pages/ wordt automatisch een route. Geen router-configuratie, geen gedoe.Every file in src/pages/ automatically becomes a route. No router configuration, no fuss.

BestandFile Route
src/pages/index.wald /
src/pages/about.wald /about
src/pages/blog/index.wald /blog
src/pages/blog/[slug].wald /blog/:slug
src/pages/blog/index.wald 
---
import { getCollection } from 'wald:content'
const posts = await getCollection('blog')
---
<ul>
  {posts.map(p => '<li>' + p.data.title + '</li>').join('')}
</ul>

Content collections Markdown als voedingsbodemMarkdown as fertile soil

Zet Markdown-bestanden in content/<collectie>/ en importeer getCollection en getEntry uit wald:content. Elk item heeft een slug, data (frontmatter) en body (gerenderde HTML).Put Markdown files in content/<collection>/ and import getCollection and getEntry from wald:content. Each entry has a slug, data (frontmatter) and body (rendered HTML).

Dynamische routesDynamic routes getStaticPaths() bepaalt wat er groeitgetStaticPaths() decides what grows

Exporteer getStaticPaths() vanuit de frontmatter van een dynamische route zoals [slug].wald. Bij wald build wordt die aangeroepen om te bepalen welke pagina's gegenereerd worden. $$props bevat de route-parameters tijdens het renderen.Export getStaticPaths() from the frontmatter of a dynamic route like [slug].wald. wald build calls it to know which pages to generate. $$props contains the route params during rendering.

src/pages/blog/[slug].wald 
---
import { getCollection, getEntry } from 'wald:content'

export async function getStaticPaths() {
  const posts = await getCollection('blog')
  return posts.map(p => ({ params: { slug: p.slug } }))
}

const post = await getEntry('blog', $$props.slug)
---
<h1>{post.data.title}</h1>
<div>{post.body}</div>
VergelijkingComparison

Hoe verhoudt Wald zich?How does Wald compare?

Feature WaldJS Astro Eleventy
Single-file formaat (frontmatter + template)Single-file format (frontmatter + template) ✓ .wald ✓ .astro —
File-based routing ✓ ✓ ✓
Content collections ✓ ✓ deelspartial
0 KB JavaScript standaard0 KB JavaScript by default ✓ ✓ ✓
getStaticPaths() ✓ ✓ pagination
Vite-integratieVite integration ✓ ✓ —
Partial hydration ✓ canopy'scanopies ✓ —
Bos-terminologieForest terminology 🌲 — —
Benchmarks

Snel als een sprintende hertenbokFast as a sprinting deer

Gemeten op een blog met 50 en met 1.000 Markdown-posts: mediaan van 7 builds na 2 opwarmrondes, op een Apple M1 Pro met Node 22.Measured on a blog with 50 and with 1,000 Markdown posts: median of 7 builds after 2 warm-up runs, on an Apple M1 Pro with Node 22.

⚡ Buildtijd · 1.000 postsBuild time · 1,000 posts

lager is beterlower is better
WaldJS0,90 s0.90 s
Eleventy 3.11,26 s1.26 s
Astro 4.169,43 s9.43 s

🌱 Buildtijd · 50 postsBuild time · 50 posts

lager is beterlower is better
WaldJS0,53 s0.53 s
Eleventy 3.10,73 s0.73 s
Astro 4.162,27 s2.27 s

WaldJS is het snelst, bij 50 én bij 1.000 posts (WaldJS 0.14). Meet het zelf na met pnpm bench: de opzet en scripts staan in de repo.WaldJS is the fastest at both 50 and 1,000 posts (WaldJS 0.14). Measure it yourself with pnpm bench: the setup and scripts are in the repo.

CLI

Vier commando's, één bosFour commands, one forest

wald plant <name>

Maak een nieuw project aan.Create a new project.

wald grow

Start de dev-server op localhost:7233.Start the dev server at localhost:7233.

wald build

Bouw naar dist/ (Vite SSR + statische pre-render).Build to dist/ (Vite SSR + static pre-render).

wald preview

Bekijk de build op localhost:4321.Preview the build at localhost:4321.

projectstructuurproject structure
my-forest/
├── content/
│   └── blog/
│       └── hello-world.md
├── src/
│   ├── layouts/
│   │   └── Layout.wald
│   ├── components/
│   │   └── Card.wald
│   └── pages/
│       ├── index.wald
│       └── blog/
│           ├── index.wald
│           └── [slug].wald
├── public/           # 1-op-1 naar dist/copied to dist/ as-is
├── wald.config.ts    # optioneeloptional
└── package.json

Structuur & configStructure & config Overzichtelijk als een aangeplant bosAs orderly as a planted forest

Configureren kan met een optionele wald.config.ts in de projectroot — adapter, outDir, base voor sub-directory-deploys, en een vite-blok dat rechtstreeks naar Vite gaat (plugins, resolve, etc.). Zonder config gebruikt WaldJS verstandige standaardwaarden.Configure via an optional wald.config.ts in your project root — adapter, outDir, base for sub-directory deploys, and a vite block passed straight to Vite (plugins, resolve, etc.). Without a config file WaldJS uses sensible defaults.

wald.config.ts
import { defineConfig, vercelAdapter } from '@waldjs/cli'

export default defineConfig({
  adapter: vercelAdapter(),
  base: '/',
  vite: { plugins: [] },
})
Packages

Het ecosysteemThe ecosystem

@waldjs/cli · plant, grow, build, preview @waldjs/compiler · .wald → JS-modules.wald → JS modules @waldjs/runtime · createTree, renderTemplate @waldjs/content · readCollection, readEntry
Roadmap

Van wortel tot kruinlaagFrom roots to canopy

Fase 5 is een ideeënlijst, nog niet uitgewerkt als GitHub issue — een richting, geen belofte.Phase 5 is a list of ideas, not yet written up as a GitHub issue — a direction, not a promise.

FAQ

Veelgestelde vragenFrequently asked questions

Waarom nóg een framework?Why yet another framework?

WaldJS is compromisloos content-first: één .wald-bestandsformaat, nul kilobyte JavaScript standaard, en een terminologie die je kunt onthouden. Geen configuratie-oerwoud — gewoon planten en groeien.WaldJS is uncompromisingly content-first: one .wald file format, zero kilobytes of JavaScript by default, and terminology you can actually remember. No configuration jungle — just plant and grow.

Is WaldJS klaar voor productie?Is WaldJS production-ready?

Nog niet helemaal — het framework is in actieve ontwikkeling. Fase 0 t/m 2b en 4a/4b zijn af; client-side hydration (fase 3) is onderweg. Voor statische sites zonder interactiviteit kun je vandaag al bouwen.Not quite yet — the framework is in active development. Phases 0 through 2b and 4a/4b are complete; client-side hydration (phase 3) is on its way. For static sites without interactivity you can build today.

Kan ik migreren vanaf Astro?Can I migrate from Astro?

De concepten lijken sterk op elkaar: frontmatter + template, file-based routing, content collections en getStaticPaths() werken vrijwel hetzelfde. Meestal is het hernoemen van .astro naar .wald en het aanpassen van imports naar wald:content het grootste werk.The concepts are very similar: frontmatter + template, file-based routing, content collections and getStaticPaths() work almost identically. Usually renaming .astro to .wald and updating imports to wald:content is the bulk of the work.

Werken mijn Vite-plugins?Do my Vite plugins work?

Ja — via het vite-blok in wald.config.ts gaat alles rechtstreeks naar Vite door, inclusief plugins en resolve-opties.Yes — the vite block in wald.config.ts passes everything straight through to Vite, including plugins and resolve options.

GroeidagboekGrowth log

Changelog

Elke release een jaarring. Dit is er tot nu toe gegroeid.Every release a growth ring. Here's what has grown so far.

npm version huidige npm-versie — de fasenamen hieronder zijn mijlpalen, geen versienummerscurrent npm version — the phase names below are milestones, not version numbers

Forest

september 2026
  • Deployment-adapters voor static, Netlify, Cloudflare Pages en VercelDeployment adapters for static, Netlify, Cloudflare Pages and Vercel
  • adapter in wald.config.ts met host-specifieke output en post-build bestandenadapter in wald.config.ts with host-specific output and post-build files
  • CLI-buildsummary toont nu ook welke adapter je bos gebruiktThe CLI build summary now shows which adapter your forest uses

Forest Polish

september 2026
  • Marketing-site opgefrist met een branded favicon en scherpere CTA-statesRefreshed the marketing site with a branded favicon and sharper CTA states
  • 3D-depth toegevoegd aan knoppen, kaarten, terminals en footerAdded 3D depth to buttons, cards, terminals and the footer
  • Dev-server serveert nu ook src/assets correct tijdens wald growThe dev server now correctly serves src/assets during wald grow

Canopy

augustus 2026
  • Client-side hydration — interactieve eilandjes in je statische bosClient-side hydration — interactive islands in your static forest
  • Canopy-directives: canopy:load, canopy:idle en canopy:visibleCanopy directives: canopy:load, canopy:idle and canopy:visible
  • Het <wald-canopy>-element laadt islands als ES-modules — de rest blijft 0 KB JavaScriptThe <wald-canopy> element loads islands as ES modules — the rest stays 0 KB JavaScript

Bekijk alle updatesSee all updates