Lesson 04 of 10

Data & Variables

Define page-level data, use variables to inject values into your HTML, and access built-in page metadata. This is what makes your static pages dynamic.

In This Lesson

  1. Data Blocks
  2. Using Variables
  3. Supported Data Types
  4. Nested Objects
  5. Built-in @page.* Variables
  6. Data Flow: Page → Layout → Component
  7. Checkpoint

Data Blocks

A data block is a <script data> tag at the top of your .orb page that defines the page's data as a JavaScript object.

pages/index.orb .orb 
<script data>
({
  title: "Home",
  author: "Dan",
  year: 2026,
  showBanner: true
})
</script>

<layout src="main.layout">
  <content>
    <h1>{{ title }}</h1>
    <p>By {{ author }}, {{ year }}</p>
  </content>
</layout>
⚠️

Important: The data must be wrapped in ({ ... }) — an object literal inside parentheses. This is how OrbLayout safely evaluates it.

Using Variables

Use {{ variableName }} anywhere in your page to inject data values.

Variable Syntax .orb 
<!-- In text content -->
<h1>{{ title }}</h1>

<!-- In attributes -->
<img src="{{ imageUrl }}" alt="{{ imageAlt }}" />

<!-- In CSS -->
<div style="color: {{ textColor }}">...</div>

<!-- Mixed with text -->
<p>Copyright © {{ year }} {{ author }}</p>

Variables work everywhere — text content, HTML attributes, inline styles, even inside component props.

Supported Data Types

All Data Types .orb 
<script data>
({
  // Strings
  name: "OrbLayout",

  // Numbers
  version: 1.2,
  count: 42,

  // Booleans (for conditionals)
  showBanner: true,
  isAdmin: false,

  // Arrays (for loops)
  tags: ["html", "css", "static"],

  // Objects (for {{#with}} scoping)
  author: {
    name: "Dan",
    twitter: "@dan"
  },

  // Array of objects (for rich loops)
  features: [
    { name: "Fast", desc: "Zero runtime" },
    { name: "Simple", desc: "Just HTML" }
  ]
})
</script>
TypeExampleUsed With
String"Hello"{{ variable }}
Number42{{ variable }}, filters
Booleantrue / false{{#if}}, {{#unless}}
Array["a", "b"]{{#each}}
Object{ name: "Dan" }{{#with}}

Nested Objects

Access nested properties with {{#with}} blocks (covered in Lesson 8):

Nested Data Access .orb 
<script data>
({
  company: {
    name: "Acme Inc",
    founded: 2020,
    ceo: "Alice"
  }
})
</script>

{{#with company}}
  <h2>{{ name }}</h2>
  <p>Founded: {{ founded }}</p>
  <p>CEO: {{ ceo }}</p>
{{/with}}

Built-in @page.* Variables

OrbLayout provides built-in variables that are always available — no data block needed.

VariableOutputDescription
{{ @page.filename }}indexCurrent page filename (no extension)
{{ @page.date }}2026-03-04Today's date (YYYY-MM-DD)
{{ @page.year }}2026Current year
Using @page Variables .orb 
<footer>
  <p>© {{ @page.year }} My Website</p>
  <p>Last built: {{ @page.date }}</p>
  <p>Page: {{ @page.filename }}</p>
</footer>
💡

Use case: {{ @page.year }} in a footer component means you never have to update the copyright year manually!

Data Flow: Page → Layout → Component

Understanding how data flows is crucial:

Data Flow diagram 
   <script data>  ← You define data here
        │
        ▼
   Page (.orb)      ← Variables are resolved in the page
        │
        ▼
   Layout (.layout) ← Variables flow into the layout too
        │
        ▼
   Components (.orb) ← Components get data via props
  1. Data block defines the data object
  2. Page uses variables like {{ title }}
  3. Layout also receives the data — {{ title }} works in layouts
  4. Components receive data through props only — they can't directly access page data
📐

Key rule: Components are isolated. To pass data to a component, use props: <use component="card" title="{{ title }}" />

✅ Lesson 4 Checkpoint

You should now understand:

  1. How to define data with <script data>({ ... })</script>
  2. How to use variables with {{ variableName }}
  3. All supported data types: strings, numbers, booleans, arrays, objects
  4. Built-in @page.* variables for metadata
  5. How data flows from page → layout → components (via props)
← Previous Components & Props