HTMLComponents, the native Delphi html rendering engine

This review has been postponed two times, so my apologies to Alexander Sviridenkov, the author of this magnificent Delphi component package.

HTML rendering engine in Delphi

Delphi have always had its fair share of brilliant programmers. And as a result Delphi has enjoyed a vibrant component market, one that simplify the life of both novice and expert.

Sadly, html has never really been Delphi’s strong suit. Sure we have various server types and packages. From Intraweb to UniGui – each of them with positive and negative traits. We have IIS plugin packages and apache modules – and right now Embarcadero is branching into Linux as well. Sadly all of these solutions suffer the same problem: they are purely native. They lack the automatic scaling mechanisms of node.js and C# – and don’t even get me started on clustering (Netflix is written 100% in node.js, why did they pick JavaScript instead of Delphi, C# or C++? Food for thought!).

But, serving html is all well and good, and while I could write a doctorate on why node.js and Smart Pascal is a much better technology for Delphi developers when it comes to web development – it would come across as disingenuous since Smart originated with me. So people will simply have to find out for themselves.

Rendering with Delphi

Server and client aside: if there is one thing Delphi is the undisputed king of, it is desktop applications and productivity! Fueled by object pascal’s modular, component based frameworks; like the VCL and Firemonkey – no other language even comes close to what Delphi has to offer. Except for html that is ..

Traditionally there have been only two paths you could go if you wanted to display or edit HTML: you could stick with good old TWebBrowser, a thin wrapper over Microsoft’s Internet Explorer API’s. If all you want to do is to show some basic html and lack even a single fiber of taste in your body then TWebBrowser could be the ticket.

But anyone who has ever tried to work with that component, perhaps dived into the hundreds of interfaces you need to deal with in order to do anything remotely fun – knows that it leaves you frustrated and wanting. It’s also not portable and as pure a Windows component as can be. It makes absolutely no sense to use this component in 2017, especially when Firemonkey is on the menu.

The other option was TFrameBrowser or THtmlViewer, a fast, responsive browser control written purely in Delphi (by Dave Baldwin I seem to remember?). This was a commercial component back in the day, but he open sourced it as he abandoned Delphi for C# or C++ or something along those lines. You can pick this up at Github for free and there is also a Lazarus version of this.

The problem with both of these solution is the same haunting us all, namely that they are getting old. They havent seen much development for 10-15 years (give or take the port to Lazarus), and while they may work – they lack support for all the interesting tags, css styles and element types that we now take for granted. THtmlView is stuck somewhere between HTML 1 or 2, and TWebBrowser is .. well, that has a life of its own so I honestly cant tell you what it represents these days. But a little bird told me Embarcadero havent updated the ActiveX interfaces at all – so it’s not even using the new Microsoft Edge engine. Personally I suspect Microsoft is the culprit, exposing Edge as a .net assembly exclusively.

The Chromium wrappers

A third alternative appeared around 2011 / 2012 in the form of chromium embedded. This is the browser we use in Smart Mobile Studio to do background rendering and run the compiled Smart Mobile Studio applications when you hit F9.

Webkit is by far the fastest and most evolved engine out there, but it also add around 90 – 120 megabyte of dependencies and data files to your distribution. It also has a lot of quirks, and if you do hardcore coding like I do – pushing the GPU to the bleeding edge of what webkit can deliver – then prepare for crashes, unexplainable access violations and having to restart the whole application to get rid of some background process chromium has spawned outside your reach. It’s a great solution, but it comes with its own baggage and history.

HTMLComponents

Suddenly out of the blue a fourth option has emerged, this time it’s a full re-implementation of HTML 4 (with elements from HTML 5) written in pure, platform independent Delphi. This means it has no dependencies, it will render as much as 90% of modern html, it supports all the fancy tags and css style (including transitions, which I must admit I did not expect).

Not only that, it works under the traditional VCL framework and Firemonkey, so you can use the components on both desktop and mobile applications. If that doesn’t get your creative juices flowing I don’t know what will; this is frikkin awesome!

Alexander Sviridenkov has really gone to town with this package. And I must extend my gratitude for allowing me access to his codebase. We are considering using this as the primary rendering engine for the new Smart Mobile Studio IDE’s live editor. So I want to personally thank Alexander for the opportunity to investigate the components at source level.

Writing a review of this great package seems only natural. It has been years since I’ve been this stoked about a Delphi component package. If you like the idea of using HTML as a part of your Delphi application’s presentation layer – then consider this your birthday, Xmas and st. patrick day all rolled into one. HtmlComponents got you covered!

So what is it?

A rich and powerful component suite

At the heart of the package is a modern, fast, portable and 100% written in Delphi HTML rendering engine. Around this engine Alexander has made a large collection of visual controls that you use to enrich your applications. Most notably, a WYSIWYG editor akin to what you find in Adobe Dreamweaver. This is not a text editor where you write tags (well you can), but rather a full, rich word processor control where you can design your web pages.

The components most interesting to me were obviously: THtmlEditor, TDBHtmlEditor, THtTemplatePanel and THtMetroPanel, THtCategoryButtons.

These are just  5 out of 23 visual controls that ship with this package, each of them using the rendering engine to present better looking information. I mean, when you can use html to describe how each row in a listbox should appear – it goes without saying that this is a lot easier (and prettier) than spending hours with TCanvas. The now ancient TCanvas class is not exactly renowned for its blistering speed or fantastic visuals). So HtmlComponents gives you an impressive list of visual extravaganza to play with, all of whom makes it a snap to create modern, good-looking user interfaces.

And you don’t have to use the pre-defined components. HtmlComponents will happily take your html and css and draw it straight to a TCanvas (or GDI+) without complaints. So you are not stuck having to use this or that baseclass (which often is the case).

What really impressed me is the speed. Writing an html file parser that is fast is one thing, but rendering complex and composite web content? That’s not for the faint of heart, it requires some serious skill.

The first and easiest test you can do to see how quickly a rendering engine adapts and re calculate its node tree (internal stuff) – is to resize the window fast back and forth. Most homebrew browsers is going to struggle with that. Typically because they just calculate as they draw each element, which is not how to go about this particular task. I’m super impressed by Alexanders work here, because his controls are just as responsive as commercial browsers.

The editor

Since I work with web technology, the editor is ultimately what would save us time and also help lift the quality of our IDE. Smart Mobile Studio is extremely powerful, but our weak spot is without a doubt that our IDE doesn’t reflect the power of our the RTL properly. There are also things that would be simpler for our customers, editing documents directly is one of them – so the editor was really make or break for my part.

The example editor program is impressive to say the least

The editor is wonderful. There are a few tidbits that I would like to see improved, but those are very specific to my needs. But I have to be honest and say that this is the most impressive WYSIWYG html editor I have seen outside of Dreamweaver. You have full control of everything, from tables to borders, margins to padding – and the active segment you are editing is easy to spot due to dotted highlighting.

Alexander has also made some very interesting dialogs (see color and border dialog in the picture above). While I am missing a more dedicated css stylesheet solution (like gradient editor, image to css conversion and other handy features) – the package in general has more or less everything you need to get going. And then some (it may also be that the stylesheet thing is there. The codebase is so huge it would take s week to study every part).

In short: If you are looking for a drop-in solution for editing web documents that is platform independent, has zero dependencies, lightweight, fast and even work on mobile devices – then this is it! The same goes for rich and gorgeous rendered custom controls.

I do realize that there are other editors out there; packages like Richview is very popular, and while that is both fast and polished, it’s not an html rendering engine. Which is ultimately where HtmlComponents scores all points. The editor is not the core of the product, it’s just a control that exposes the product – which is a modern html rendering system written in pure Delphi.

It even outputs to PDF, again with no dependencies!

What about the web?

Being able to edit html documents is cool and if you are looking for a package to give you that functionality – then this is it. No doubt there. But how compatible is it? I mean, html is evolving at an alarming rate – both in terms of features but also with regards to JavaScript. How does HtmlComponents fare in that department?

I guess the obvious observation is that HtmlComponents is not a browser. It has a very capable rendering engine, editor and supports the most common tags – both old and new, but at the end of the day – it’s not designed to be a browser.

If you drop an editor on a form, set the readonly property to true, and then call LoadFromUrl() on a complex website, then odds are it will come up short. It will happily render static websites, but the moment frames and JavaScript comes into the picture – you are quickly reminded that this is ultimately an editor and rendering engine designed to leverage web technology for Delphi – and it’s not trying to be anything else either. It delivers what it says, and it does it well. What more can you ask.

It has no problems with traditional, non framed or JS powered websites

Lack of scripting

I have no doubt that Alexander could turn this package into a real life browser if he so wanted. But again this package delivers compliant html editing and presentation inside Delphi applications. That is what he set out to create, and that is exactly what I need.

Alexander have also taken height for future development. The package ships with support for pascal scripting (the Jedi scripting engine), and he has thoughtfully isolated scripting in general in separate adapter classes. This means that you are free to add whatever scripting language you want. Dont like pascal script? No problem, just implement an adapter and use whatever you like.

My immediate thought goes to Besen, the open source, complete ECMAScript fifth edition, JIT powered JavaScript engine written 100% in object pascal. Hopefully Alexander will get inspired and add that as an alternative in a future edition. With besen as the primary scripting engine – and taking the time to expose all the traditional DOM objects JavaScript expects to find in a browser environment (like window, document, createElement, getElementById [and so on]) then HtmlComponents would be capable of great things. All of it in portable, platform independent Delphi.

The V8 JavaScript engine used by Chrome, Safari and all webkit browsers is also an alternative. It is a fairly humble dll that is easy to use from Delphi. But that is presently only available on Windows. Unless the Delphi maintainer decides to add Linux and OS X binaries to the repository as well. But indeed, V8 could also be added quite easily.

Final thoughts

This is a wonderful component package for Delphi, one I really hope we get to use in our own product when that time comes. There will always be bits and pieces that could be improved, but it’s quite hard to pinpoint what exactly to criticize in this package.

H&M is pretty solid

I did notice an access violation in the Paint() method on two occasions, which could be easily fixed by checking if csDestroying has been set – and that the device context is not null (it was in the middle of a paint when i killed the program). But that is kebab reporting on my part. All in all I am super impressed and really recommend this product – its worth every penny!

The product is also used by a list of well established companies. Applications like Help & Manual isn’t exactly small potatoes, nor is Coffeecup html editor some unknown application. These are used by thousands of people every day.

Have a look at Alexander’s gallery and I’m sure you agree that this package has merit.

As far as I’m concerned, this will form the basis of our future template and content editor.

Jon-Lennart Aasenden
 The Smart Company AS