Code-Free HTML Templating

I’m just sharing a free tool i developed that might be helpful to others.

It’s a code-free, client-side templating tool, that will enable an HTML dev to display a collection of repeated items on a webpage with identical HTML, but different content.

“Template” meaning there’s only one copy of the HTML, shared by all the items in the collection. To change the layout of all the items, you only have to edit the template.

Code-free meaning, you don’t need to write or know Javascript. Everything is done in HTML, including the template, container, and data.

The content is separate from the HTML, so you can update the data without touching the HTML.

It’s best for small projects with few items that don’t change too often, where you can’t or don’t want to do server-side programming.

Feel free to ask questions here or on github.

Here’s a simple example.

  • The container puts the collection on the webpage.
  • The template contains double-bracketed placeholders, which get loaded with data.
  • The data is stored in a hidden area of the webpage
<body>
	 <!-- CONTAINER -->
	 <span mt-records="EEs" mt-template="engineer" class="engineers"></span>
</body>


	 <!-- TEMPLATE -->
<template id="engineer">
	<span>
		<a target="_blank" href="http://[[LINK]]">
			<img src="[[IMAGE]]" alt="">
			<div class="caption">[[NAME]]</div>
		</a>
	</span>
</template> 


		<!-- DATA -->
	<mt-records hidden id="EEs">
		NAME
		LINK
		IMAGE

		Benervive Guper
		https://www.Guper.com
		Guper.jpg

		Phoey Ramstung
		https://Ramstung.com
		Ramstung.jpg

		Sam Smith
		https://samsmith.com
		sam.jpg
	</mt-records>