sgcHTML: Build Modern Web UIs from Delphi Without Writing JavaScript

· Components
sgcHTML: Build Modern Web UIs from Delphi Without Writing JavaScript

Delphi developers have been building business applications for thirty years. The back end is solid: database access, business logic, report generation, service integration. The problem has always been the front end. The moment a customer asks for a browser-based interface, the classic Delphi approach breaks down. You either reach for IntraWeb (powerful but stateful and aging), attempt TMS WEB Core (which compiles Pascal to JavaScript but forces a client-side deployment model), or hand the front end to a JavaScript team and maintain two completely separate codebases.

sgcHTML takes a different approach. It is a library of 60+ server-side components that generate Bootstrap 5 HTML directly from your Delphi, C++ Builder or .NET code. You set properties, read the HTML property, and serve the result. Interactivity comes from htmx, a small JavaScript library that lets the server swap page fragments in response to clicks and form submissions — with no JavaScript you have to write yourself. The result is a modern, responsive web application built entirely in Object Pascal or C#.

The problem sgcHTML solves

The standard Delphi VCL architecture assumes a thick client: forms, grids and dialogs running on Windows. That model works well for internal tools. It breaks down when the customer wants a portal accessible from a browser on any device, or when IT policy forbids installing desktop applications.

The alternatives before sgcHTML all came with friction:

sgcHTML fills the gap: a native Delphi component library whose output is standard, modern Bootstrap 5 HTML that any browser understands, kept live by htmx, all controlled from a single Pascal or C# codebase.

How it works

The architecture has three layers.

First, a component such as TsgcHTMLComponent_Chart, TsgcHTMLComponent_DataTable or TsgcHTMLComponent_StatCard knows how to describe itself as Bootstrap 5 HTML. You configure it through normal published properties and call its HTML property to get the markup.

Second, a page builder (TsgcHTMLPageBuilder) assembles components into a responsive grid. You assign each component a Section, a SectionTitle, a SectionOrder and a ColumnWidth (Bootstrap's 1–12 column grid). The page builder arranges them automatically.

Third, a server engine (TsgcHTMLEngine_Server) wires everything to a TsgcWSHTTPServer from sgcWebSockets. Requests arrive in your OnCommandGet handler and you respond with a complete HTML page built from your components. The Bootstrap CSS and JavaScript are embedded resources inside the library, so there is nothing to deploy alongside the binary.

uses
  sgcWebSocket_Server, sgcHTML_Engine_Server,
  sgcHTML_Template_Bootstrap, sgcHTML_Page,
  sgcHTML_Component_StatCard, sgcHTML_Component_Chart;

var
  oServer:   TsgcWSHTTPServer;
  oEngine:   TsgcHTMLEngine_Server;
  oTemplate: TsgcHTMLTemplate_Bootstrap;
  oPage:     TsgcHTMLPage;
  oStat:     TsgcHTMLComponent_StatCard;
  oChart:    TsgcHTMLComponent_Chart;
begin
  oServer := TsgcWSHTTPServer.Create(nil);
  oServer.Port := 8080;

  oEngine   := TsgcHTMLEngine_Server.Create(nil);
  oEngine.Server := oServer;

  oTemplate := TsgcHTMLTemplate_Bootstrap.Create(nil);
  oTemplate.Title := 'My Dashboard';

  oPage := TsgcHTMLPage.Create(nil);

  // KPI card: total revenue
  oStat := TsgcHTMLComponent_StatCard.Create(nil);
  oStat.PageBuilder := oPage.PageBuilder;
  oStat.Section := 'kpi';
  oStat.SectionOrder := 1;
  oStat.ColumnWidth := cw3;
  oStat.Title := 'Total Revenue';
  oStat.Value := '$128,450';
  oStat.Trend := stUp;
  oStat.TrendValue := '+12%';

  // Revenue trend chart
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  oChart.PageBuilder := oPage.PageBuilder;
  oChart.Section := 'charts';
  oChart.SectionOrder := 1;
  oChart.ColumnWidth := cw8;
  oChart.ChartType := ctLine;
  oChart.Title := 'Monthly Revenue';
  oChart.AddLabel('Jan'); oChart.AddLabel('Feb'); oChart.AddLabel('Mar');
  oChart.AddDataset('2026', [42000, 58000, 64000], '#0d6efd', '', True);

  oServer.Active := True;
end;

60+ ready-made components

sgcHTML ships with a wide component palette covering the most common web UI patterns. Each component is a standard Delphi class you can drop on a form or create in code:

DataSource binding

Every sgcHTML component supports a DataSource property that links it to any TDataSource in your application. Set DataAutoRefresh := True and the component re-renders automatically when the underlying dataset changes. For finer control, call LoadFromDataSet directly:

uses
  sgcHTML_Component_DataTable;

// Populate a data table from a FireDAC query
oTable := TsgcHTMLComponent_DataTable.Create(nil);
oTable.PageBuilder := oPage.PageBuilder;
oTable.Section := 'invoices';
oTable.Title := 'Recent Invoices';
oTable.ShowSearch := True;
oTable.ShowExport := True;
oTable.LoadFromDataSet(FDQuery1, 20); // 20 rows per page

The chart component has a matching LoadFromDataSet method that accepts a label field name and one or more value field names, so a revenue-by-month query becomes a bar chart in three lines:

oChart.LoadFromDataSet(fdqRevenue, 'month', ['revenue', 'cost']);

Interactivity through htmx — no JavaScript required

Static HTML is useful. Interactive HTML is necessary. sgcHTML achieves interactivity through htmx: a small library (14 KB gzipped) that intercepts clicks and form submissions, sends an HTTP request to your server, and swaps the response HTML into the page. Your Delphi OnCommandGet or OnCommandOther handler receives the request, rebuilds the relevant component, and returns its HTML. No page reload. No JavaScript framework.

// Server-side handler: update the chart fragment when the user changes the date range
procedure TMyServer.HandleChartFragment(aReq: TIdHTTPRequestInfo;
  aResp: TIdHTTPResponseInfo);
var
  oChart: TsgcHTMLComponent_Chart;
  vRange: string;
begin
  vRange := aReq.Params.Values['range']; // 'week', 'month', 'year'
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  try
    oChart.ChartType := ctBar;
    LoadRevenueData(oChart, vRange); // your data-loading procedure
    aResp.ContentText := oChart.HTML;
    aResp.ContentType := 'text/html';
  finally
    oChart.Free;
  end;
end;

The chart in the browser carries an hx-get attribute pointing at the fragment endpoint. When the user selects a different range in a dropdown, htmx swaps the chart div in place — the surrounding page does not reload.

Real-time updates over WebSocket

Because sgcHTML is built on top of sgcWebSockets, real-time push is a first-class feature. When new data arrives — a new order, a price tick, a sensor reading — your server pushes an HTML fragment over WebSocket and htmx inserts it into the correct DOM element. The client subscribes to a WebSocket endpoint; the server calls SendMessage. No polling, no long-polling, no external message broker.

// Push an updated stat card to all connected clients
procedure TDashboardServer.PushRevenueUpdate(aNewRevenue: Double);
var
  oCard: TsgcHTMLComponent_StatCard;
begin
  oCard := TsgcHTMLComponent_StatCard.Create(nil);
  try
    oCard.CardID := 'kpi-revenue';
    oCard.Title := 'Total Revenue';
    oCard.Value := FormatCurr('$#,##0', aNewRevenue);
    oCard.Trend := stUp;
    // Send the HTML fragment to all clients subscribed to this channel
    FWSServer.Broadcast(oCard.HTML);
  finally
    oCard.Free;
  end;
end;

No JavaScript build chain, no npm, no Node.js

Every JavaScript and CSS asset that sgcHTML needs (Bootstrap 5, Chart.js, htmx) is embedded as a binary resource inside the compiled Delphi executable. Your deployment is a single .exe file. There is no node_modules directory, no webpack config, no Babel pipeline, and no version conflicts between a front-end package manager and your back-end. You install sgcHTML as a Delphi package, compile, and ship.

Getting started

sgcHTML ships as part of sgcWebSockets Enterprise and All-Access editions, and as a standalone purchase. A free trial is available for download. The trial includes all 60+ components with no feature restrictions during the trial period.

The library supports Delphi 10.2 Tokyo through Delphi 13 and C++ Builder 10.2 through 13, and the .NET edition targets .NET 6 and later. Full source code is included in all paid tiers.

Questions or pre-sales queries? Get in touch. You will get a reply from the people who wrote the code.