web-app 5 min

Building Reusable Components

As your site grows, the same card or button layout appears everywhere. In Clean Language, a component is just a function that returns a string of HTML. No framework magic, no virtual DOM — just functions you can call anywhere.

Any function with an html: block is a component:

functions:\n    string product_card(string name, string price, string url)\n        html:\n            \n                {name}
\n                {price}
\n                View Details\n

The function takes data as parameters and returns an HTML string. The name, price, and url variables are interpolated and HTML-escaped automatically — user-supplied data cannot inject HTML into your page.

Call the component in your endpoint and combine the results:

endpoints server:\n    GET "/products" :\n        string card1 = product_card("Clean Language Book", "$29", "/books/1")\n        string card2 = product_card("Starter Course", "Free", "/courses/starter")\n        html:\n            \n            \n                {!card1}\n                {!card2}\n            
\n

GET /products → HTML page with two product cards

Use the raw interpolation form (curly-brace with exclamation) to insert HTML from a trusted component. Without it, the HTML tags would be escaped and appear as literal text. The rule: plain curly braces for user data, curly-brace-! for component output.

Quick recap

A component is a function that returns a string using an html: block
Plain curly-brace interpolation auto-escapes — use for user-supplied text
Curly-brace-! interpolation inserts raw HTML — use for component output you control
Put components in a helpers.cln file and import it in your server