Quick start

This guide builds a small page with a shared layout. It takes a few minutes and assumes you have installed Kiln.

Create a layout

A layout holds the markup every page shares. Each block marks a place a page can fill in. Save this as templates/layouts/base.kiln:

<!doctype html>
<html lang="en">
	<head>
		<title>{% block title %}My site{% endblock %}</title>
	</head>
	<body>
		{% block content %}{% endblock %}
	</body>
</html>

Create a page

The page extends the layout and fills its blocks. Save this as templates/pages/home.kiln:

{% extends "layouts/base" %}

{% block title %}{{ title }} | {{ parent() }}{% endblock %}

{% block content %}
	<h1>{{ title }}</h1>
	<ul>
		{% for feature in features %}
			<li>{{ feature }}</li>
		{% endfor %}
	</ul>
{% endblock %}

parent() outputs the layout's version of the block, so the title becomes "Home | My site". The .kiln extension is optional in template names.

Render it

Create an environment that reads from the templates folder, then render the page with some data:

import { createKiln } from "@lucidkiln/core";
import { fileLoader } from "@lucidkiln/core/node";

const kiln = createKiln({
	loader: fileLoader({ root: "templates" }),
});

const html = await kiln.render("pages/home", {
	title: "Home",
	features: ["Fast", "Safe", "Familiar"],
});

console.log(html);

Kiln prints the full page. Lines that only hold tags, such as the for lines, are removed, so the output stays tidy:

<!doctype html>
<html lang="en">
	<head>
		<title>Home | My site</title>
	</head>
	<body>
		<h1>Home</h1>
		<ul>
			<li>Fast</li>
			<li>Safe</li>
			<li>Familiar</li>
		</ul>
	</body>
</html>

Next steps

• Learn the syntax and expressions.
• Build reusable pieces with components.
• Load data from templates with async functions.
• Add your own functions and filters.