Code Editor and Tabs

Use HTML, CSS, JS, and Data tabs with Monaco editor features.

Laman uses the Monaco editor with a custom theme, word wrap, and a clean UI (no minimap) to keep the focus on content.

HTML Tab (Handlebars)

The HTML editor supports Handlebars templates. Data keys from the Data tab appear as autocomplete suggestions.

<h1>{{title}}</h1>
<p>{{subtitle}}</p>

Write standard CSS. The editor enables Emmet for fast authoring of selectors and properties.

Write inline scripts to add interactivity. The editor provides a global data object in runtime:

const data = __APP_DATA__;
console.log(data.title);

The Data tab opens a structured editor where you define JSON fields. Keys are used for template variables and JS properties.

Use the image button in the code toolbar to open the image picker, then click an image to copy its public URL.