sgcHTML — Web UI Components for Delphi, C++ Builder & .NET

sgcHTML

Build complete, modern web UIs straight from Delphi, C++ Builder and .NET. sgcHTML is a server-side component framework with 60+ ready-made widgets — charts, grids, forms, dashboards, chat and more — that render to Bootstrap 5 markup and stay interactive through htmx. You write Object Pascal or C#, sgcHTML writes the HTML, CSS and JavaScript.

60+ UI Components
Bootstrap 5 + htmx
Delphi / C++ Builder / .NET
No JavaScript Required

You Write Pascal or C#. sgcHTML Writes the Front End.

sgcHTML turns your existing Delphi, C++ Builder or .NET back end into a web application server. Every component is a native class that emits Bootstrap 5 HTML; htmx keeps the page interactive and live without a single line of hand-written JavaScript.

Components that render HTML

Every widget is a class — TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form and 60 more. Set its properties, then read its HTML property to get clean, Bootstrap 5 markup ready to serve.

Served by your own server

Drop a TsgcHTMLEngine_Server (or wire the HTML to an existing TsgcWebSocketHTTPServer). Requests arrive in your OnCommandGet handler; you answer with a page built from components. No external web stack.

Interactive through htmx

Add a TsgcHTMX_Engine_Server and clicks, form posts and live updates round-trip to your Pascal/C# event handlers. The server swaps HTML fragments in place — the SPA feel, none of the JavaScript build chain.

Real-time over WebSockets

Because htmx runs over the sgcWebSockets server, you can push live HTML to every connected browser. Dashboards, monitors and chat windows update the instant your data changes — server-driven, no polling.

Theming & templates

TsgcHTMLTemplate_Bootstrap wraps your content in a complete responsive document; TsgcHTMLThemeController and TsgcHTMLThemeBuilder provide light/dark themes and a shared stylesheet. Bootstrap 5.3 and htmx ship embedded — no CDN at runtime.

Direct database binding

Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline and Form bind straight to a TDataSet via LoadFromDataSet / DataSource. Point a component at a query and it renders the rows.

Localized UI, 17 languages

sgcHTML ships built-in UI text (buttons, labels, validation messages) in 17 languages: English, Spanish, French, German, Portuguese, Italian, Dutch, Swedish, Norwegian, Polish, Czech, Turkish, Russian, Chinese, Japanese, Korean and Arabic. Pick one with sgcHTMLSetLanguage and components render in the visitor's language with correct native scripts, including CJK, Cyrillic and Arabic.

Safe output by default

Every component routes its dynamic text, attributes, inline JavaScript and URLs through automatic HTML, attribute, JavaScript and URL encoding plus URL sanitization (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), so user data cannot break out of its context and inject script. XSS and injection protection is on without extra work.

60+ Components, Nine Families

From navigation chrome to data grids, charts, forms, overlays and AI chat — the full Bootstrap 5 vocabulary as native components. Each links to its own page with Delphi, C++ Builder and .NET examples.

NavBar, Sidebar, Breadcrumb, Tabs, Pagination, Toolbar, TreeView, Stepper, Dropdown, ButtonGroup, ListGroup, DashboardLayout.

View components →

Data & Tables

Grid, DataTable, Calendar, Scheduler, Timeline, KanbanBoard, Gantt — sortable, filterable, exportable, dataset-bound.

View components →

Charts & Visualization

Chart (Chart.js), Gauge, Diagram (SVG flow), Map (Leaflet) — data-driven visuals from your own datasets.

View components →

Forms & Inputs

Form, Edit, Memo, CheckBox, RadioGroup, Select, InputGroup, AutoComplete, DatePicker, FileUpload, RichEditor, Rating.

View components →

Content & Layout

Panel, StatCard, Accordion, Carousel, Image, Avatar, Video — cards, media and KPI tiles for dashboards.

View components →

Overlays & Feedback

Modal, Offcanvas, Popover, Toast, Snackbar, Notification, Spinner, Placeholder — dialogs and status surfaces.

View components →

Chat & AI

ChatBox, Chat (WhatsApp-style), AIChat with provider selector, token streaming and RAG source citations.

View components →

Authentication

Login, SocialLogin (OAuth), OAuthCallback, WebAuthnLogin (passkeys) — ready-made sign-in flows.

View components →

Infrastructure & Engine

EngineServer, HTMXEngine, PageBuilder, TemplateBootstrap, ThemeController, ThemeBuilder, HTMXFragment, HTMXRouter — the non-visual pieces that serve pages and keep them live.

View components →

See the full feature matrix →

A Web Dashboard in a Few Lines

Start an HTTP server, attach the htmx engine, and answer requests with a page built from components. The same API in Delphi, C++ Builder and .NET.

uses
  sgcWebSocket_Server, sgcHTMX_Engine_Server,
  sgcHTML_Template_Bootstrap, sgcHTML_Component_Chart;

// 1. Start a server and attach the htmx engine
FServer := TsgcWSHTTPServer.Create(nil);
FServer.Port := 8080;
FServer.OnCommandGet := HandleGet;

FHTMX := TsgcHTMX_Engine_Server.Create(nil);
FHTMX.Server := FServer;        // realtime htmx over WebSocket

FServer.Active := True;

// 2. Build the page from components
function TForm1.BuildDashboard: string;
var
  oChart: TsgcHTMLComponent_Chart;
  oPage: TsgcHTMLTemplate_Bootstrap;
begin
  oChart := TsgcHTMLComponent_Chart.Create(nil);
  oPage := TsgcHTMLTemplate_Bootstrap.Create(nil);
  try
    oChart.ChartType := ctBar;
    oChart.AddLabel('Q1'); oChart.AddLabel('Q2'); oChart.AddLabel('Q3');
    oChart.AddDataset('Revenue', [1200, 1900, 1500],
      '#7C3AED', 'rgba(124,58,237,.25)', True);

    oPage.Title := 'Dashboard';
    oPage.BodyContent := oChart.HTML;   // component -> HTML
    Result := oPage.GetHTML;            // full Bootstrap document
  finally
    oPage.Free;
    oChart.Free;
  end;
end;
// includes: sgcWebSocket_Server.hpp, sgcHTMX_Engine_Server.hpp,
//           sgcHTML_Template_Bootstrap.hpp, sgcHTML_Component_Chart.hpp

// 1. Start a server and attach the htmx engine
FServer = new TsgcWSHTTPServer(this);
FServer->Port = 8080;
FServer->OnCommandGet = HandleGet;

FHTMX = new TsgcHTMX_Engine_Server(this);
FHTMX->Server = FServer;          // realtime htmx over WebSocket

FServer->Active = true;

// 2. Build the page from components
String __fastcall TForm1::BuildDashboard()
{
  TsgcHTMLComponent_Chart *oChart = new TsgcHTMLComponent_Chart(NULL);
  TsgcHTMLTemplate_Bootstrap *oPage = new TsgcHTMLTemplate_Bootstrap(NULL);
  try
  {
    oChart->ChartType = ctBar;
    oChart->AddLabel("Q1"); oChart->AddLabel("Q2"); oChart->AddLabel("Q3");
    oChart->AddDataset("Revenue", OPENARRAY(double, (1200, 1900, 1500)),
      "#7C3AED", "rgba(124,58,237,.25)", true);

    oPage->Title = "Dashboard";
    oPage->BodyContent = oChart->HTML;   // component -> HTML
    return oPage->GetHTML();             // full Bootstrap document
  }
  __finally
  {
    delete oPage;
    delete oChart;
  }
}
using esegece.sgcWebSockets;

// 1. Start a server and attach the htmx engine
var server = new TsgcWebSocketHTTPServer();
server.Port = 8080;
server.OnCommandGet += HandleGet;

var htmx = new TsgcHTMX_Engine_Server();
htmx.Server = server;            // realtime htmx over WebSocket

server.Active = true;

// 2. Build the page from components
string BuildDashboard()
{
    var chart = new TsgcHTMLComponent_Chart();
    chart.ChartType = TsgcHTMLChartType.ctBar;
    chart.AddLabel("Q1"); chart.AddLabel("Q2"); chart.AddLabel("Q3");
    chart.AddDataset("Revenue", new double[] { 1200, 1900, 1500 },
        "#7C3AED", "rgba(124,58,237,.25)", true);

    var page = new TsgcHTMLTemplate_Bootstrap();
    page.Title = "Dashboard";
    page.BodyContent = chart.HTML;   // component -> HTML
    return page.GetHTML();            // full Bootstrap document
}

High-Level Components or Low-Level Nodes

Reach for ready-made components when you want a widget in one line, or drop to the node layer when you need full control over the markup.

Component layer

The 60+ TsgcHTMLComponent_* widgets. Configure properties, optionally bind a dataset, read HTML. Many also expose a static Build(...) helper for one-line inline use.

Node / composition layer

Primitives like TsgcHTMLContainer (with a Void flag for self-closing tags), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton and TsgcHTMLTable compose into any layout, then render with TsgcHTMLTemplate_Bootstrap. The node set also includes Bootstrap building blocks such as TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode and TsgcHTMLImage.

Visual page builder

TsgcHTMLPageBuilder with its design-time editor lets you assemble pages in the IDE, while TsgcHTMLThemeController manages light/dark theming across the whole app.

3,000+Developers
20+Years
761+Components
30+API Integrations
5Platforms
30-Day Money-Back GuaranteeNot satisfied? Request a full refund within 30 days of purchase. See refund policy

Ship a Web UI Without Leaving Your IDE

Add charts, grids, forms, dashboards and real-time pages to your Delphi, C++ Builder or .NET application — with the language you already use.

Other Products by eSeGeCe

Pair sgcHTML with our other Delphi, C++ Builder and .NET component libraries.

sgcWebSockets

Enterprise WebSocket, HTTP/2/3, MQTT, AMQP, WebRTC and AI/LLM components. sgcHTML is served over the same high-performance HTTP and WebSocket servers.

Learn more →

sgcSign

Enterprise digital signatures — XAdES, PAdES, CAdES and ASiC with 10 key providers and 21 EU country profiles.

Learn more →

sgcOpenAPI

OpenAPI 3.0 parser and SDK generator. Turn any OpenAPI spec into a strongly-typed Delphi client in seconds.

Learn more →

sgcBiometrics

Native Windows Hello, fingerprint and Windows Biometric Framework components for Delphi and C++ Builder.

Learn more →