---
slug: 41-frontend
title: Frontend
description: Server-side HTML in Synsema — render() templates with verbatim CSS/JS blocks, components with props, named slots, safe script data, content() for agents, and static assets with cache policy.
example_ids: [frontend]
---
# Frontend
Synsema serves HTML from the server (SSR) — no imposed framework or CSS. Two paths: **`render()`** templates (full design control) and **`content()`** (agent-negotiable). For the end-to-end walkthrough (layout, styling, forms, error pages), see [Build a website](41a-build-a-website).
```synsema
-- Doc example: render() templates. HTML with { holes }, loops with an empty branch,
-- chained conditionals, VERBATIM blocks for inline CSS/JS, components with props,
-- named slots, and safe JSON-for-"}])
assert(contains(js, "a\\u003c/script\\u003e")) -- cannot close the tag
assert(not contains(js, ""))
-- json_encode is for APIs/storage; json_for_script is for ` would break out of the tag).
Templates are parse-cached and **hot-reload per request** (edit → refresh, no restart); `render("literal.html")` paths are validated at startup and by `synsema check`. For the `.syn` itself, `synsema serve app.syn --watch` restarts on change.
**Capability (engine v0.6.14+):** rendering a template read from **disk** is a file read, so the
top-level `render(path)` needs `require file.read("")` (or `require file("templates/*")` for a
tree), just like `read_file` — this closes reading arbitrary files through a request-derived path.
Nested `{ include }`/`{ layout }` don't need their own declaration (they're static and confined to the
working directory), and a template **baked into a `synsema build` binary** needs no capability at all
(it's part of the program). One line covers a template tree: `require file.read("templates/*")`.
**Installable on phones and desktop (engine v0.6.15+):** the same rendered site becomes an app — home-screen icon, full screen, offline shell, push notifications — with a manifest, a service worker and the `` lines that `synsema init --pwa` writes for you. See **[Your app on the phone (PWA)](41b-pwa)**.
## `content()` — agent-negotiable pages
Build a semantic tree once; the runtime serves **HTML to humans and Markdown/JSON to agents** (by `Accept` header or a `.md`/`.json` suffix) — ideal for docs/blogs an LLM should read.
```synsema
route "GET /docs/:slug"
give content(page([heading(1, "Title"), prose("…"), code("let x be 1", "synsema")], {
"title": "Title", "description": "…", "stylesheet": "/assets/app.css"
}))
```
## Static assets & client JS
The default is a **static mount** with production behavior (ETag/304, Range, gzip) plus your cache policy and SPA support:
```synsema
static "/assets" from "./static" cache "1h" -- Cache-Control per mount ("immutable" for fingerprinted)
static "/app" from "./dist" fallback "index.html" -- SPA history-fallback (try_files)
```
The client is unrestricted — vanilla JS, htmx, or any framework. Classic `