Returning HTML Pages — Clean Language
← All tutorials
web-app6 min

Returning HTML Pages

Returning plain text is a start, but web apps need HTML. Clean Language's html: block lets you write HTML directly inside a function — variables are interpolated automatically and the result is just a string you can return.

The html: block turns indented markup into a returned string:

functions:\n    string page_shell(string title, string body_content)\n        html:\n            <!DOCTYPE html>\n            <html lang="en">\n            <head>\n                <meta charset="UTF-8">\n                <title>{title}</title>\n                <link rel="stylesheet" href="/css/main.css">\n            </head>\n            <body>\n                {!body_content}\n            </body>\n            </html>

Variables in curly braces are interpolated. Use {title} for text that should be HTML-escaped — safe for user input. Use {!body_content} when the variable already contains trusted HTML that should not be double-escaped.

Call the helper in your endpoint to build a complete page:

endpoints server:\n    GET "/" :\n        string content = "<h1>Welcome!</h1><p>Built with Clean Language.</p>"\n        string page = page_shell("Welcome", content)\n        return http.respond(200, "text/html", page)\n\n    GET "/about" :\n        string content = "<h1>About</h1><p>A Clean Language web app.</p>"\n        string page = page_shell("About", content)\n        return http.respond(200, "text/html", page)
GET /       → 200, full HTML page with title and content\nGET /about  → 200, full HTML page with about content

Both routes share the same page_shell helper — change the header or footer once and every page updates. This is Clean Language's component model: reusable string functions.

Quick recap

  • html: block returns a string of HTML — it is syntactic sugar, not a special type
  • Curly-brace interpolation auto-escapes HTML — safe for user-supplied values
  • Curly-brace-! interpolation inserts raw HTML — use only for content you control
  • Build helpers in a functions: block and share them across endpoints
Copied!