Charts & Visualization
Chart (Chart.js line, bar, pie, doughnut, radar, polar, bubble, scatter), CandlestickChart, Gauge, Heatmap, Sparkline, TreeMap, Diagram as inline SVG, Map on Leaflet, QRCode and Barcode.
View family →Build the whole web app in Pascal. Server-side HTML components render Bootstrap 5 markup, htmx keeps every click interactive, and WebSockets push live updates into the open page. No npm, no JavaScript build step.
uses
sgcHTML_Component_StatCard, sgcHTML_Component_Chart,
sgcHTML_Component_Grid, sgcHTMX_Engine_Server;
// 1. KPI row, three stat cards
FBody :=
TsgcHTMLComponent_StatCard.Build('Monthly Revenue', '$48,200',
scSuccess, stUp, '12.5%', 'kpiRevenue', sgBlueViolet) +
TsgcHTMLComponent_StatCard.Build('Orders Today', '1,284',
scSuccess, stUp, '4.1%', 'kpiOrders', sgBlueViolet) +
TsgcHTMLComponent_StatCard.Build('Live Users', '312',
scSuccess, stNeutral, 'live', 'kpiUsers', sgBlueViolet);
// 2. Chart
oChart.ChartType := ctBar;
oChart.AddLabel('Mon'); oChart.AddLabel('Tue'); oChart.AddLabel('Wed');
oChart.AddLabel('Thu'); oChart.AddLabel('Fri');
oChart.AddDataset('Orders', [42, 58, 51, 73, 66],
'#7C3AED', 'rgba(124,58,237,.25)', True);
FBody := FBody + oChart.HTML;
// 3. Grid, straight from a dataset
oGrid.ShowSort := True;
oGrid.ShowFilter := True;
oGrid.LoadFromDataSet(qryOrders);
FBody := FBody + oGrid.HTML;
oPage.BodyContent := FBody;
Response := oPage.GetHTML; // full Bootstrap page
// 4. Later, from any thread, push a live KPI
oHTMX.BroadcastFragment(
'<div id="kpiRevenue" hx-swap-oob="true">' +
CurrToStr(FRevenue) + '</div>');
Left: Object Pascal. Right: the page it serves, live in the browser. Same components in C++ Builder and C#.
Server-side HTML components for Delphi, C++ Builder and .NET. Charts, grids, forms, dashboards and chat, rendered as Bootstrap 5 markup and kept live by htmx over WebSockets.
Product overview PricingEvery widget is a native class. Set its properties, optionally bind it to a TDataSet, then read its HTML property. Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline and Form load straight from a dataset.
Chart (Chart.js line, bar, pie, doughnut, radar, polar, bubble, scatter), CandlestickChart, Gauge, Heatmap, Sparkline, TreeMap, Diagram as inline SVG, Map on Leaflet, QRCode and Barcode.
View family →Grid with sort, filter, CSV and PDF export, inline edit, grouping and virtual scroll. Plus DataTable, TreeGrid, PivotTable, Calendar, Scheduler, Timeline, ActivityFeed, KanbanBoard and Gantt.
View family →Form with validation, Edit, Memo, CheckBox, RadioGroup, Select, MultiSelect, InputGroup, AutoComplete, DatePicker, TimePicker, ColorPicker, Slider, FileUpload, RichEditor, Rating, SignaturePad and Transfer.
View family →NavBar, Sidebar, Breadcrumb, Tabs, Pagination, Toolbar, TreeView, Stepper, Dropdown, ButtonGroup, ListGroup, DashboardLayout, Site and Splitter.
View family →Panel, StatCard KPI tiles with trend arrows and gradients, Accordion, Carousel, Image, Avatar, Video, Badge and PDFViewer.
View family →Modal, Offcanvas, Popover, Toast, Snackbar, Notification centre with unread badge, Spinner, Placeholder skeletons, ContextMenu, ProgressBar, JobProgress and LogViewer.
View family →ChatBox, Chat with text, image, file, audio and video messages, AIChat with a provider selector, token streaming and RAG source citations, and Presence for live online status.
View family →Login, SocialLogin OAuth buttons for Google, Facebook, Apple, GitHub and Microsoft, OAuthCallback, WebAuthnLogin passkeys, UserManagement and RolesPermissions.
View family →TsgcHTMLEngine_Server serves the rendered pages, TsgcHTMX_Engine_Server dispatches htmx requests and pushes fragments, and PageBuilder, TemplateBootstrap, ThemeController and ThemeBuilder handle the document and light or dark themes.
Bootstrap 5.3 and htmx ship embedded, so there is no CDN call at runtime. Built-in UI text comes in 17 languages, and every component HTML, attribute, JavaScript and URL encodes its dynamic content by default.
There is no client-side state to keep in sync, because there is no client-side application. Your Pascal or C# code owns the page: it answers the first request with HTML, answers each interaction with a fragment, and pushes new fragments to every open browser the moment the data changes.
Build the page from TsgcHTMLComponent_* classes in Pascal or C#, or bind them to a dataset and let them render the rows.
TsgcHTMLEngine_Server answers the request from your own HTTP server with a complete Bootstrap 5 document and its embedded assets.
htmx sends the interaction back to OnHTMXRequest. Your handler returns only the fragment that changed, and htmx swaps it in place.
BroadcastFragment sends an out-of-band fragment over the WebSocket to every connected browser. It is thread-safe, so a background timer can call it directly.
Header, navigation menu, content area and footer, wrapped in a swappable layout template. Set the layout, theme and brand, add the menu and the content, then read the HTML property and serve the finished page.
uses
sgcHTML_Enums, sgcHTML_Component_Site;
oSite := TsgcHTMLComponent_Site.Create(nil);
try
oSite.Layout := slTopNavSidebarLeft;
oSite.Theme.Preset := stpViolet;
oSite.Theme.Mode := stmLight;
oSite.Brand.Text := 'Acme';
oSite.AddMenu('Dashboard', '/', '📊').Active := True;
oSite.AddMenu('Reports', '/reports', '📈');
oSite.AddSection('Overview', '<p>Welcome back.</p>', 'overview');
oSite.AddContent('<div class="alert alert-info">All systems normal</div>');
oSite.Footer.Text := '© 2026 Acme';
Response := oSite.HTML; // the whole site, one component
finally
oSite.Free;
end;
using esegece.sgcWebSockets;
var site = new TsgcHTMLComponent_Site();
site.Layout = TsgcHTMLSiteLayout.slTopNavSidebarLeft;
site.Theme.Preset = TsgcHTMLSiteThemePreset.stpViolet;
site.Theme.Mode = TsgcHTMLSiteThemeMode.stmLight;
site.Brand.Text = "Acme";
site.AddMenu("Dashboard", "/", "📊").Active = true;
site.AddMenu("Reports", "/reports", "📈");
site.AddSection("Overview", "<p>Welcome back.</p>", "overview");
site.AddContent("<div class=\"alert alert-info\">All systems normal</div>");
site.Footer.Text = "© 2026 Acme";
string html = site.GetHTML(); // the whole site, one component
sgcHTML requires sgcWebSockets Professional or Enterprise, and it is included in the All-Access bundle.
Your sgcHTML pages need data, and that data usually comes from an API. sgcOpenAPI is one bundled product for Delphi and C++ Builder: an OpenAPI 3.x parser, a native Pascal SDK generator, an OpenAPI server component, and a library of pre-built cloud SDKs you can use straight away.
Read any OpenAPI 3.x document, in JSON or YAML, into a strongly-typed object model you can walk from code.
The parser →Turn that spec into a native Delphi or C++ Builder client, with typed request and response classes, ready to compile.
Generator features →Publish your own endpoints as a live openapi.json or openapi.yaml, build endpoints from a spec, and validate requests and responses against it.
The server →Amazon AWS 280+, Microsoft Azure 650+, Google Cloud 250+ and Microsoft Graph 15+ services, already generated for you.
Browse the APIs →sgcHTML is the UI layer. The rest of the stack sits underneath it, from the socket to the signature.
WebSocket, HTTP/2, MQTT, AMQP, WebRTC, AI and 30+ API integrations. The HTTP and WebSocket servers that sgcHTML runs on.
Learn more →Server-side HTML and UI components for Delphi, C++ Builder and .NET. Bootstrap 5 markup, htmx interactivity, real-time updates.
Learn more →Raw QUIC transport and an HTTP/3 client and server, with WebTransport. Serve sgcHTML's rendered UI over HTTP/3 for lower-latency page loads.
Learn more →AI, LLM and MCP components for Delphi and C++ Builder. Seven LLM providers behind one component, plus MCP, embeddings and speech. Standalone, with the sgcWebSockets Core runtime bundled in.
Learn more →MQTT, AMQP 0.9.1 and 1.0, Apache Kafka and STOMP client components for Delphi and C++ Builder. Standalone, with the sgcWebSockets Core runtime bundled in.
Learn more →OAuth2 client, JWT client and WebAuthn support for Delphi and C++ Builder. Sign in with any OAuth2/OIDC provider, issue and verify JWTs, and add passkey authentication to native apps. Standalone, with the sgcWebSockets Core runtime bundled in.
Learn more →HTTP/2 client, gRPC client and Google Cloud Pub/Sub, Calendar and FCM clients for Delphi and C++ Builder. Standalone, with the sgcWebSockets Core runtime bundled in.
Learn more →REST server, OpenAPI server and OpenAPI client components for Delphi and C++ Builder. Publish REST APIs from an OpenAPI 3.x contract, or consume any OpenAPI-described API. Standalone, with the sgcWebSockets Core runtime bundled in.
Learn more →OpenAPI 3.x parser, Pascal SDK generator, OpenAPI server component, and 1,195+ pre-built cloud SDKs.
Learn more →Document signatures (XAdES, PAdES, CAdES, ASiC) and code signing (Authenticode, ClickOnce, NuGet, VSIX) with 10 key providers and 21 EU country profiles.
Learn more →Windows Hello, fingerprint sensors and facial recognition through the Windows Biometric Framework, for Delphi and C++ Builder.
Learn more →Enhanced Indy TCP/IP component suite with extended protocol support and performance optimizations for enterprise applications.
Learn more →Trusted by Delphi, C++ Builder, Lazarus and .NET developers building real-time applications around the world.
Your sgcWebSockets library is very useful and easy to setup. Keep up the good work!
sgcWebSockets is amazing and your support is the best!
Thanks so much for your help and support — I love your components.