The Sempare Template Engine (available at https://github.com/sempare/sempare-delphi-template-engine and GetIt) is a versatile templating system designed specifically for Delphi developers to streamline the creation and management of dynamic HTML, text, or any other text-based output formats. Whether you are building web applications, reports, or email templates, the Sempare Template Engine offers a powerful yet straightforward solution that integrates with minimal boilerplate into Delphi projects. The template engine has been around since 2019 and has many features for you to explore.

In this tutorial, we will explore how templates can behave like functions and all the super powers of 'include'.

The basics

We can define inline templates and use them as follows:

<% template 'person' %>
   <div>
      <div><% name %></div>
   </div>
<% end %>

<%# this is a comment %>

<%# we can define dictionaries in the script tags %>

<% people := [
     { "name": "conrad" },
     { "name": "ian" },
     { "name": "richard" }
   ]
%>

<% for person of people %>
   <% include 'person', person %>
<% end %>

In the above, we define a template name 'person' - containing some HTML div tags.

Then we have a for loop enumerating over the people array. Using the inline data is useful when mocking data, as we can test it without having a server running, either using the demo Playground app, or using the IDE Wizard which will be discussed in another tutorial.

What are functional templates?

As we have seen, the 'include' statement behaves like a function. However, there is an alternative syntax for including templates, which makes it appear more functional. Let us illustrate:

<% for person of people %>
   <% person { name=person.name } %>
<% end %>

Lets try something different to illustrate it:

<% template 'input' %>
   <div>
      <div><% label %>:</div>
      <input id="<% id %>" <% if name %>name="<% name %>"<% end %>>
   </div>
<% end %>

  <form method="post" action="/signup">
    <% input { label="First Name", id="firstname", name="fn" } %>
    <% input { label="Last Name", id="lastname", name="ln" } %>
    <% input { label="E-mail", id="email", name="email" } %>
    <input type="submit"> 
  </form>

Note that the 'functional include' syntax is slightly different to the dictionary format illustrated above with the mock data.

Why is this interesting? Maybe Atomic Design?

Lets say you like styling with TailwindCSS (https://tailwindcss.com). We can create a template library, either standalone or inline, with 'atomic' components that we can define with whatever granularity we require. We can build up more complex components by including others as required.

We can build styled templates for buttons, inputs, grids, etc.

Conclusion

The Sempare Template Engine offers a lot of rich functionality, allowing you to manipulate text output to fit your needs.

Further reading

Have a look at https://bradfrost.com/blog/post/atomic-web-design

Sponsorship Required

Please help us maintain the project by supporting Sempare via GitHub sponsors (https://github.com/sponsors/sempare) or via our payment link (https://buy.stripe.com/aEU7t61N88pffQIdQQ). Sponsors can obtain access to our integrated IDE wizard for RAD Studio.