Introducing the Sempare Template Engine Playground Wizard for the Delphi RAD Studio IDE

Sempare Limited - Oct 16 - - Dev Community

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 article, I’m excited to present a preview of the Sempare Template Engine Playground Wizard for the Delphi IDE. This tool enables developers to work with templates using mock data, eliminating the need for a running application or server.

Recently, we transitioned the licensing of the Sempare Template Engine from GPL to a dual-license model under the Apache 2.0 and the Sempare Commercial License.

Unlike some competitors, we’ve had limited financial backing to support our R&D efforts, relying primarily on our own resources. While other templating products may not necessarily offer more features, increased competition has made it necessary for us to expand our user base. However, there’s a growing expectation for free tools, despite the common understanding that, while we have freedom of speech, there’s no such thing as free beer when it comes to Open Source.

As a result, we’ve decided that the IDE integration will be available to our commercial supporters once it is finalized.

Demo using the Horse framework

Horse (https://github.com/HashLoad/horse) is a small webframework based on the Indy Project (https://www.indyproject.org). I won't go into the details of installing the framework as this can be done easily through GetIt or from GitHub. Indy should be available with the RAD Studio.

The source for this demo is available on https://github.com/sempare/sempare-devto-examples/tree/dev/HorseDemo

HorseDemo.dpr

program HorseDemo;

{$APPTYPE CONSOLE}
{$R *.res}

uses
  Horse,
  Sempare.Template,
  System.SysUtils;

type
  TIndexData = record
    Name: string;
    Users: TArray<string>;
  end;

begin
  try
    THorseProvider.KeepConnectionAlive := true;
    THorse.Get('/',
      procedure(Req: THorseRequest; Res: THorseResponse)
      var
        LData: TIndexData;
      begin
        LData.Name := 'Sempare Template Engine';
        Res.Send(Template.Resolve('index', LData));
      end);
    THorse.Get('/page2',
      procedure(Req: THorseRequest; Res: THorseResponse)
      var
        LData: TIndexData;
      begin
        LData.Name := 'Sempare Template Engine';
        LData.Users := ['Ian', 'Macro', 'David'];
        Res.Send(Template.Resolve('page2', LData));
      end);
    THorse.Listen(8080, nil,
      procedure
      begin
        TTemplateRegistry.Finalize;
      end);
  except
    on E: Exception do
      Writeln(E.ClassName, ': ', E.Message);
  end;
end.
Enter fullscreen mode Exit fullscreen mode

Above we can see in a few lines of code we have created a small web server running on port 8080, exposing endpoints / and /page2.

Below are some templates for the demo. We describe the template constructs in some of the other tutorials. These are just for reference for now, as we want you to see the IDE integration below.

templates/index.tpl

<% extends 'layout' %>
   <% block 'header' %><title>Index</title><% end %>
   <% block 'body' %>This is the index page <% end %>
<% end %>
Enter fullscreen mode Exit fullscreen mode

templates/page2.tpl

<% extends 'layout' %>
   <% block 'header' %><title>Page2</title><% end %>
   <% block 'body' %>
     <% for user of users ; user ; betweenitems %>, <% end %>
   <% end %>
<% end %>
Enter fullscreen mode Exit fullscreen mode

templates/layout.tpl

<html>
  <header>
        <style>
            body { background: #333333 ; color: #ffffff }
            <% block 'style' ; end %>
        </style>
        <% block 'header' ; end %>
  </header>
  <body>
        <% block 'body' %>Default Content<% end %>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Preview the layout

The Layout

In the bottom panel, we can see a docked panel containing 3 sections:

  • mock data editor
  • template editor
  • preview (raw text and html)

In the preview, we can see the layout being rendered.

Preview the index page

The Index Page

Here we can see that the body placeholder is being replaced in the layout.

Preview page2

Page2

Here we see the header placeholder being filled with an HTML title. In the body, we have our mock data being rendered.

Preview page 2 with one user

Page2 with one user

Preview page 2 with no users

Page2 with no users

Errors are instantly highlighted

Parsing error

In the above screenshot, we can see how removing the > on line 5 yields the error message.

Running the demo and opening Page2 in Edge

Page2 demo in Edge

Pressing F9 and running the app, we are in a position to launch Edge and open http://localhost:8080/page2. Note the output matches the mock data with users.

Conclusion

While Delphi hasn’t historically been a common choice for web development, the availability of more tools and libraries is making it a viable option for such projects. As a dialect of Pascal, one of Delphi’s strengths is its compiler, which generates cross-platform native code (Linux, Windows, Android, macOS, iOS). The language is type-safe, classified as memory safe, and highly approachable for new users, with language features that are intuitive and easy to grasp without extensive manual reading—though diving into the documentation can unlock even more advanced capabilities.

This is still in the early stages of development, but with additional commercial sponsorship, we aim to further evolve this wizard and continue supporting the underlying project.

Thank you in advance for your support.

Further reading

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.

. . . . . . . . . . .