Home

Elements is designed to split structure and content of Web Apps.

It turns something ugly like this:

let html = '<ul class="products">';
for(let product of data.products) {
	html+= '<li><div class="title">'+product.title+'</div><ul class="properties">';
	for(let property of product.properties) html+= '<div>'+property.name+': '+property.value+'</div>';
	html+= '</ul></li>';
}
html+= '</ul>';

into that:

let template = `
	<ul class="products">
		{{#products}}
			<li>
				<div class="title">{{title}}</div>
				<ul class="properties">
					{{#properties}}
						<div>{{name}}: {{value}}</div>
					{{/properties}}
				</ul>
			</li>
		{{/products}}
	</ul>
`;
let html = Elements.render(template, data);

Try it yourself with the following dataset:

let data = {
	products: [{
		title: 'Product 1',
		properties: [
			{name: 'price', value: '49 €'},
			{name: 'amount', value: '3'}
		]
	},{
		title: 'Product 2',
		properties: [
			{name: 'available', value: '2022'},
			{name: 'shipping', value: '1 week'},
			{name: 'price', value: '190 €'}
		]
	}]
};

It achives this by replacing sequences in a predefined template with dynamic values. Like in HTML, these sequences are called tags. They can stand for themselves or form sections in pairs. The process of replacing tags and sections in a template with real data is called rendering.

Learn how rendering works in detail by reading the articles listed in the table of contents.