---
slug: 41-frontend
title: Frontend
description: HTML del lado del servidor en Synsema — templates render() con bloques verbatim de CSS/JS, componentes con props, slots nombrados, datos seguros para "}])
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 ` rompería el tag).
Los templates se cachean parseados y **se recargan en caliente por request** (editar → refrescar, sin reiniciar); los paths de `render("literal.html")` se validan al arranque y con `synsema check`. Para el `.syn`, `synsema serve app.syn --watch` reinicia al cambiar.
**Capability (engine v0.6.14+):** renderizar un template leído desde **disco** es una lectura de
archivo, así que el `render(path)` de nivel superior necesita `require file.read("")` (o
`require file("templates/*")` para un árbol), igual que `read_file` — esto cierra la lectura de
archivos arbitrarios a través de un path derivado del request. Los `{ include }`/`{ layout }` anidados
no necesitan su propia declaración (son estáticos y están confinados al directorio de trabajo), y un
template **horneado en un binario `synsema build`** no necesita capability alguna (es parte del
programa). Una sola línea cubre un árbol de templates: `require file.read("templates/*")`.
**Instalable en teléfonos y escritorio (engine v0.6.15+):** el mismo sitio renderizado se vuelve una app — ícono en la pantalla de inicio, pantalla completa, shell offline, notificaciones push — con un manifest, un service worker y las líneas de `` que `synsema init --pwa` escribe por vos. Mirá **[Tu app en el teléfono (PWA)](41b-pwa)**.
## `content()` — páginas negociables por agentes
Construís el árbol semántico una vez; el runtime sirve **HTML a humanos y Markdown/JSON a agentes** (por header `Accept` o sufijo `.md`/`.json`) — ideal para docs/blogs que un LLM deba leer.
```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"
}))
```
## Assets estáticos y JS de cliente
El default es un **mount estático** con comportamiento de producción (ETag/304, Range, gzip) más tu política de cache y soporte SPA:
```synsema
static "/assets" from "./static" cache "1h" -- Cache-Control por mount ("immutable" para fingerprinteados)
static "/app" from "./dist" fallback "index.html" -- history-fallback de SPA (try_files)
```
El cliente no tiene restricciones — vanilla JS, htmx o el framework que quieras. Un `