Unlock OrbLayout's full power with markdown blocks, {{#with}} scoping, partials, component imports, :class directives, and more.
Write content in markdown directly inside your .orb files. OrbLayout converts it to HTML at build time.
<markdown>
# Hello World
This is **bold** and *italic*.
- Item one
- Item two
- Item three
[Visit OrbLayout](https://github.com
/rukkit-official/orblayout)
---
Here's some `inline code`.
</markdown><h1>Hello World</h1>
<p>This is <strong>bold</strong>
and <em>italic</em>.</p>
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>
<a href="...">Visit</a>
<hr>
<p>Here's <code>inline</code>.</p>| Markdown | HTML Output |
|---|---|
# Heading | <h1> |
## Heading | <h2> |
### Heading | <h3> |
**bold** | <strong> |
*italic* | <em> |
`code` | <code> |
[text](url) | <a href> |
 | <img> |
- item | <ul><li> |
--- | <hr> |
Perfect for: Blog posts, documentation pages, changelog sections — anywhere you want to write content quickly without HTML tags.
{{#with}} lets you "enter" a nested object so you can reference its properties directly.
<!-- You'd need dot notation (which OrbLayout doesn't support) -->
<!-- So without {{#with}}, you can't access nested data easily --><script data>
({
author: {
name: "Dan",
bio: "Full-stack developer & OrbLayout creator",
twitter: "@dan_dev",
avatar: "/assets/dan.jpg"
}
})
</script>
<div class="author-card">
{{#with author}}
<img src="{{ avatar }}" alt="{{ name }}" />
<h3>{{ name }}</h3>
<p>{{ bio }}</p>
<a href="https://twitter.com/{{ twitter }}">Follow</a>
{{/with}}
</div>Inside {{#with author}}, variables like {{ name }} automatically refer to author.name.
Partials let you include another .orb file as-is, without props. Think of it as a simple HTML include.
<!-- Google Analytics snippet -->
<script async
src="https://gtag...">
</script>
<script>
window.dataLayer = ...
</script><head>
...
<use partial="analytics" />
</head>| Feature | Component | Partial |
|---|---|---|
| Syntax | <use component="..." /> | <use partial="..." /> |
| Props | ✅ Yes — pass data via attributes | ❌ No — inserted as-is |
| Use case | Dynamic UI blocks (cards, heroes) | Static snippets (analytics, meta tags) |
Conditionally apply CSS classes based on data values. Similar to Vue.js's :class binding.
<script data>
({
isActive: true,
isHidden: false,
isDarkMode: true
})
</script>
<div class="card"
:class="{ active: isActive, hidden: isHidden, dark: isDarkMode }">
...
</div>
<!-- Output: <div class="card active dark"> -->Only classes with truthy conditions get applied. hidden doesn't appear because isHidden is false.
If multiple components on a page have identical <style> blocks, OrbLayout only includes the CSS once:
<!-- components/card.orb -->
<style>
.card { background: #fff; padding: 1rem; border-radius: 12px; }
</style>
<div class="card">...</div>
<!-- ✅ CSS is only included ONCE in <head>, not 5 times -->If your page uses card.orb, badge.orb, and hero.orb — each with their own <style> — all three CSS blocks are collected and injected into a single <style> tag in the page's <head>.
Here's a page that uses every advanced feature together:
<script data>
({
title: "Advanced Showcase",
showIntro: true,
author: {
name: "Dan",
role: "Creator"
},
features: [
{ name: "Markdown", desc: "Write content faster" },
{ name: "Filters", desc: "Transform data inline" }
]
})
</script>
<import component="card" as="Card" />
<layout src="main.layout">
<content>
<h1>{{ title | uppercase }}</h1>
{{#if showIntro}}
<markdown>
## Welcome!
This page shows **every** advanced feature.
</markdown>
{{/if}}
{{#with author}}
<p>By {{ name }}, {{ role }}</p>
{{/with}}
{{#each features}}
<Card title="{{ name }}" description="{{ desc }}" />
{{/each}}
<use partial="analytics" />
<p>Built: {{ @page.date }}</p>
</content>
</layout>This single page uses: data blocks, imports, layouts, filters, conditionals, markdown, {{#with}} scoping, loops, components, partials, and built-in @page variables.
You should now be able to:
<markdown> blocks{{#with object}}<use partial="..." />:class directives