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.
$
🌱 Tip: klik ergens in het bos om een boom te planten🌱 Tip: click anywhere in the forest to plant a tree
Eén commando en je bos staat. Kies npm of pnpm.One command and your forest is planted. Choose npm or pnpm.
# Nieuw project plantenPlant a new project
npm create wald@latest my-forest
cd my-forest
npm install
npm run dev
# Of met pnpmOr with pnpm
pnpm dlx @waldjs/cli plant my-forest
cd my-forest
pnpm install
pnpm dev
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.
--- const title = "Hello World" --- <h1>{title}</h1> <p>Welkom in je bos.Welcome to your forest.</p>
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.
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.
Het bos — je hele website.The forest — your whole website.
De compiler die .wald-bestanden transformeert.The compiler that transforms .wald files.
Pagina's — .wald-bestanden in src/pages/.Pages — .wald files in src/pages/.
Componenten — herbruikbare .wald-bestanden.Components — reusable .wald files.
Client-side hydration (komt in Fase 3).Client-side hydration (coming in Phase 3).
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 |
--- import { getCollection } from 'wald:content' const posts = await getCollection('blog') --- <ul> {posts.map(p => '<li>' + p.data.title + '</li>').join('')} </ul>
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).
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.
--- 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>
| 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 | 🚧 Fase 3Phase 3 | ✓ | — |
| Bos-terminologieForest terminology | 🌲 | — | — |
Interne metingen op een blog met 1.000 Markdown-pagina's, vergeleken met Astro en Eleventy. Internal measurements on a blog with 1,000 Markdown pages, compared to Astro and Eleventy.
* Indicatieve interne metingen (Phase 4b-build, M-serie laptop). Resultaten variëren per project en hardware. Reproduceerbare benchmarks volgen bij de 1.0-release. * Indicative internal measurements (Phase 4b build, M-series laptop). Results vary per project and hardware. Reproducible benchmarks will ship with the 1.0 release.
wald plant <name>Maak een nieuw project aan.Create a new project.
wald growStart de dev-server op localhost:7233.Start the dev server at localhost:7233.
wald buildBouw naar dist/ (Vite SSR + statische pre-render).Build to dist/ (Vite SSR + static pre-render).
wald previewBekijk de build op localhost:4321.Preview the build at localhost:4321.
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
Configureren kan met een optionele wald.config.ts in de projectroot — 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 — 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.
import { defineConfig } from '@waldjs/cli' export default defineConfig({ outDir: 'dist', base: '/', vite: { plugins: [] }, })
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.
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.
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.
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.
Elke release een jaarring. Dit is er tot nu toe gegroeid.Every release a growth ring. Here's what has grown so far.
src/assets correct tijdens wald growThe dev server now correctly serves src/assets during wald growwald.config.ts met outDir, base en Vite-passthroughwald.config.ts with outDir, base and Vite passthroughwald:contentContent collections via wald:content