web-app5 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            <div class="product-card">\n                <h3 class="product-name">{name}</h3>\n                <p class="product-price">{price}</p>\n                <a href="{url}" class="btn">View Details</a>\n            </div>

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            <!DOCTYPE html><html><body>\n            <section class="products-grid">\n                {!card1}\n                {!card2}\n            </section>\n            </body></html>

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