📁 Writing .clera Files¶
A .clera file supports two authoring styles. Both produce identical HTML output. Use whichever feels more natural.
Clera Studio handles .clera files natively. Open any .clera file in Clera Studio and it provides syntax highlighting, live preview, and one-click export to HTML. No manual transpiler setup required.
Style A: Top-level declarations¶
Head content is declared at the top of the file, before <app>. This is the most compact style.
<title>My App</title>
<link rel="stylesheet" href="style.css">
<meta name="description" content="My Clera app">
<app>
<page name="home" id="home">
<h1>Welcome</h1>
<button page="settings">Settings</button>
</page>
<page name="settings" id="settings">
<h1>Settings</h1>
<button page="home">Back</button>
</page>
</app>
<script src="script.js"></script>
Style B: Head inside app¶
Head content is declared inside a <head> block within <app>. This style mirrors standard HTML structure more closely.
<app>
<head>
<title>My App</title>
<link rel="stylesheet" href="style.css">
</head>
<page name="home" id="home">
<h1>Welcome</h1>
</page>
</app>
<script src="script.js"></script>
Combined style¶
Both styles can coexist in one file. The transpiler merges them:
<title>Default Title</title>
<app>
<head>
<title>Real Title</title>
<link rel="stylesheet" href="style.css">
</head>
<page name="home">
<h1>Hello</h1>
</page>
</app>
Title rule: the last <title> wins. In the example above, “Real Title” is used because the inner <head> title appears after the top-level one.
🔧 What the transpiler injects automatically¶
Even if you declare nothing, the transpiler always produces a valid document:
<app>
<page name="home">
<h1>Hello</h1>
</page>
</app>
Output includes:
<!DOCTYPE html><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="clera.js"></script>