Language reference · 0.8.7

The `.wrn` language

File anatomy

page Account {
  layout = "public"
  seo { title = "Account" description = "Manage your account." }
  state count = 0
  view { <button @click="count++">Count {count}</button> }
}

Pages, components, layouts, props, and state

Pages are routes. Components declare default-valued props and may hold state. Layouts provide shared slots. Mount components with data-component; fill default or named slots with data-slot.

Interpolation, conditionals, and loops

Interpolation is HTML-escaped. Use server {#if} and {#each} for SSR data. Use data-show for reactive client visibility.

Events and directives

@click and other events execute in the reactive scope. Data attributes opt into forms, i18n, themes, realtime, uploader, browser, and mobile behavior. Consult the exact package page because availability varies.

Forms, i18n, themes, and realtime

form[data-schema] connects descriptors to client and server validation. Translation keys use {t:key}. Theme toggles use data-wire-theme-toggle. Realtime pages opt into a named room.

Escaping and security

Text interpolation is escaped by default. Do not construct trusted HTML from user input. Server-only refinements must be repeated at the authoritative mutation boundary.

Common compiler errors

Use balanced braces; a literal brace must be escaped.
Declare UI in view, not JSX or hooks.
Use a valid page, component, or layout declaration matching the file role.
Keep server loops tied to available SSR bindings.
Check troubleshooting and compiler API for this release.

The .wrn language