Directives

CurveaScript directives start with @.

Some directives declare a file role. Others control layout usage, imports, data, logic, or asset blocks.

File role directives

@page
@layout Main(title)
@component Hero(title)
@document

Page layout usage

Pages attach layouts with @use.

@page
@use Main(title=page.title)

Only one @use directive is allowed per page.

Component imports

Use @import to import components.

@import Hero

Folder wildcard imports are supported:

@import sections/*

Data loading

Use @load to load JSON data.

@load site
@load posts as articles
@load products/*

Pagination

Use @paginate in page files.

@load posts
@paginate posts by 10

Pagination only works on non-dynamic page files.

Data block

Use @data to define page-local data.

@data
headline = "Welcome"
featured = true
@end

The block may also contain a JSON object.

SEO block

Use @seo inside page files.

@seo
title = "About Curvea"
description = "A static-first web engine."
@end

SEO output only appears when the SEO feature flag is enabled.

Logic blocks

@if page.title
  <h1>{{ page.title }}</h1>
@end

@for item in items
  <p>{{ item.title }}</p>
@end

Style and script blocks

@style
.hero { padding: 4rem; }
@end

@script
console.log("Loaded")
@end

Raw code

@code
<div>{{ this stays visible as code }}</div>
@endcode

There is also inline raw code expression support:

@code page.content