Components, layouts, loops, conditionals — all the power of modern frameworks, compiled to pure static HTML. Zero runtime. Zero JavaScript. Just HTML.
OrbLayout gives you modern component architecture without the bloat of JavaScript frameworks.
Create reusable HTML components with props. Nest them infinitely. Import them with custom aliases.
Define page layouts once, reuse everywhere. Named slots let you inject content into multiple areas.
{{#each}} for iteration, {{#if}}/{{#unless}} for conditionals. Built-in @index, @first, @last helpers.
Transform data with {{ title | uppercase }}, {{ name | slugify }}, {{ text | truncate }} and more.
Write <markdown> blocks right in your .orb files. Headers, bold, links, lists — auto-converted to HTML.
Built-in dev server with SSE-based live reload. Edit a file, see changes instantly. No config needed.
Add <style> blocks in components. Styles are auto-collected and injected into the page <head>.
Output is pure, clean HTML. No JavaScript bundle. No hydration. Just static files ready to deploy anywhere.
Compile hundreds of pages in under 100ms. No Webpack, no Vite, no Rollup. Just Node.js doing its thing.
Write .orb files that look like HTML. The compiler handles the rest.
<!-- Define page data --> <script data> ({ title: "Home", features: ["Fast", "Simple", "Powerful"] }) </script> <!-- Use a layout --> <layout src="main.layout"> <content> <h1>Welcome to {{ title }}</h1> <!-- Use a component --> <use component="hero" heading="Hello World" /> <!-- Loop over data --> {{#each features}} <li>{{ this }}</li> {{/each}} </content> </layout>
<!DOCTYPE html> <html> <head> <title>Home</title> </head> <body> <!-- header component rendered --> <header>...</header> <main> <h1>Welcome to Home</h1> <!-- hero component inline --> <section>Hello World</section> <!-- each loop expanded --> <li>Fast</li> <li>Simple</li> <li>Powerful</li> </main> <!-- footer component rendered --> <footer>...</footer> </body> </html>
All the syntax features available in OrbLayout v1.2.
<layout src="main.layout">
<content>
<h1>Page content here</h1>
</content>
</layout>
<use component="card"
title="Hello"
description="World" />
<import component="card" as="Card" />
<Card title="Hey" />
{{#each items}}
<li>{{ @number }}. {{ this }}</li>
{{/each}}
{{#if loggedIn}}
<button>Logout</button>
{{else}}
<button>Login</button>
{{/if}}
{{ title | uppercase }}
{{ name | slugify }}
{{ text | capitalize | trim }}
<script data>
({
title: "My Page",
items: ["A", "B", "C"],
showNav: true
})
</script>
<markdown>
# Hello World
This is **bold** and *italic*.
[Link](https://example.com)
</markdown>
<layout src="docs.layout">
<content>Main content</content>
<slot:sidebar>
Side navigation
</slot:sidebar>
</layout>
{{#with author}}
<h3>{{ name }}</h3>
<p>{{ bio }}</p>
{{/with}}
From .orb files to static HTML in milliseconds.
Create pages, components, and layouts using familiar HTML enhanced with OrbLayout syntax.
The compiler reads pages, resolves layouts, injects components, processes loops & conditionals.
Output is clean, static HTML files. No JavaScript. No runtime. Deploy anywhere instantly.
GitHub Pages, Netlify, Vercel, S3, or any web server. Just upload the dist/ folder.
Everything you need from a single orb command.
Install OrbLayout globally or as a project dependency.
Scaffold a new project with pages, components, layouts, and config.
Compile all .orb pages to static HTML in the dist/ folder.
Build with HTML/CSS/JS minification for production deployment.
Start dev server with live reload at localhost:3000.
Use a custom port for the development server.
Remove the dist/ output folder for a clean rebuild.
Show all available commands and options.
Import OrbLayout into your own Node.js scripts for custom build pipelines.
const { loadConfig, OrbBuilder, OrbCompiler } = require("orblayout"); // Load config from current directory const config = loadConfig(process.cwd()); // Option 1: Build all pages const builder = new OrbBuilder(config); builder.build().then(result => { console.log(`Built ${result.pages} pages in ${result.time}ms`); }); // Option 2: Compile a single page const compiler = new OrbCompiler(config); // Register custom filters compiler.registerFilter("shout", v => v + "!!!"); const html = compiler.compilePage("pages/index.orb"); console.log(html);
All the DX of modern frameworks. None of the bloat.
| Feature | OrbLayout | Plain HTML | React / Next | Hugo |
|---|---|---|---|---|
| Components | ✓ | ✗ | ✓ | ✓ |
| Layouts | ✓ | ✗ | ✓ | ✓ |
| Props | ✓ | ✗ | ✓ | Partial |
| Loops & Conditionals | ✓ | ✗ | ✓ | ✓ |
| Pipe Filters | ✓ | ✗ | ✗ | Partial |
| Markdown | ✓ | ✗ | Plugin | ✓ |
| Zero JS Runtime | ✓ | ✓ | ✗ | ✓ |
| No Build Toolchain | ✓ | ✓ | ✗ | ✗ |
| Learning Curve | Low | None | High | Med |
| Live Reload | ✓ | ✗ | ✓ | ✓ |
| Output Size | Tiny | Tiny | Large | Tiny |
Use pipe syntax to transform variables on the fly.
{{ title | uppercase }} → "HELLO"
{{ title | lowercase }} → "hello"
{{ name | capitalize }} → "Hello"
{{ title | slugify }} → "hello-world"
{{ text | truncate }} → "Hello wo..."
{{ html | escape }} → "<div>"
{{ data | json }} → '{"key":"val"}'
{{ text | reverse }} → "olleH"
{{ price | number }} → "1,234,567"
{{ url | encode }} → "hello%20world"
{{ text | trim }} → "hello"
{{ items | length }} → "5"
Install in seconds. Deploy in minutes. No framework fatigue.