sgcHTML

Bouw complete, moderne web-UI's rechtstreeks vanuit Delphi, C++ Builder en .NET. sgcHTML is een server-side componentframework met 60+ kant-en-klare widgets — grafieken, grids, formulieren, dashboards, chat en meer — die Bootstrap 5-markup renderen en interactief blijven via htmx. Jij schrijft Object Pascal of C#, sgcHTML schrijft de HTML, CSS en JavaScript.

60+ UI-componenten
Bootstrap 5 + htmx
Delphi / C++ Builder / .NET
Geen JavaScript nodig

Jij schrijft Pascal of C#. sgcHTML schrijft de front-end.

sgcHTML verandert je bestaande Delphi-, C++ Builder- of .NET-back-end in een webapplicatieserver. Elk component is een native class die Bootstrap 5-HTML uitstuurt; htmx houdt de pagina interactief en live zonder ook maar één regel handgeschreven JavaScript.

Componenten die HTML renderen

Elke widget is een class — TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form en 60 meer. Stel de eigenschappen in en lees vervolgens de HTML-eigenschap uit om schone Bootstrap 5-markup te krijgen die klaar is om te serveren.

Geserveerd door je eigen server

Plaats een TsgcHTMLEngine_Server (of koppel de HTML aan een bestaande TsgcWebSocketHTTPServer). Verzoeken komen binnen in je OnCommandGet-handler; jij beantwoordt ze met een pagina die uit componenten is opgebouwd. Geen externe webstack.

Interactief via htmx

Voeg een TsgcHTMX_Engine_Server toe en kliks, formulierposts en live updates gaan heen en weer naar je Pascal/C#-eventhandlers. De server wisselt HTML-fragmenten ter plekke uit — het SPA-gevoel, zonder de JavaScript-buildketen.

Realtime via WebSockets

Omdat htmx over de sgcWebSockets-server draait, kun je live HTML naar elke verbonden browser pushen. Dashboards, monitors en chatvensters werken bij op het moment dat je data verandert — server-gedreven, zonder polling.

Thema's & sjablonen

TsgcHTMLTemplate_Bootstrap verpakt je content in een compleet responsief document; TsgcHTMLThemeController en TsgcHTMLThemeBuilder bieden lichte/donkere thema's en een gedeelde stylesheet. Bootstrap 5.3 en htmx worden ingebouwd meegeleverd — geen CDN tijdens runtime.

Directe databasebinding

Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline en Form binden rechtstreeks aan een TDataSet via LoadFromDataSet / DataSource. Richt een component op een query en het rendert de rijen.

60+ componenten, acht families

Van navigatie-chrome tot datagrids, grafieken, formulieren, overlays en AI-chat — het volledige Bootstrap 5-vocabulaire als native componenten. Elk linkt naar zijn eigen pagina met Delphi-, C++ Builder- en .NET-voorbeelden.

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

Componenten bekijken →

Data & tabellen

Grid, DataTable, Calendar, Scheduler, Timeline, KanbanBoard, Gantt — sorteerbaar, filterbaar, exporteerbaar, dataset-gebonden.

Componenten bekijken →

Grafieken & visualisatie

Chart (Chart.js), Gauge, Diagram (SVG-flow), Map (Leaflet) — datagedreven beelden uit je eigen datasets.

Componenten bekijken →

Formulieren & invoer

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

Componenten bekijken →

Content & lay-out

Panel, StatCard, Accordion, Carousel, Image, Avatar, Video — cards, media en KPI-tegels voor dashboards.

Componenten bekijken →

Overlays & feedback

Modal, Offcanvas, Popover, Toast, Snackbar, Notification, Spinner, Placeholder — dialoogvensters en statusvlakken.

Componenten bekijken →

Chat & AI

ChatBox, Chat (WhatsApp-stijl), AIChat met providerkeuze, token-streaming en RAG-bronvermeldingen.

Componenten bekijken →

Authenticatie

Login, SocialLogin (OAuth), OAuthCallback, WebAuthnLogin (passkeys) — kant-en-klare aanmeldflows.

Componenten bekijken →

Bekijk de volledige feature-matrix →

Een webdashboard in een paar regels

Start een HTTP-server, koppel de htmx-engine en beantwoord verzoeken met een pagina die uit componenten is opgebouwd. Dezelfde API in Delphi, C++ Builder en .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 componenten of low-level nodes

Grijp naar kant-en-klare componenten als je een widget in één regel wilt, of zak naar de node-laag als je volledige controle over de markup nodig hebt.

Componentlaag

De 60+ TsgcHTMLComponent_*-widgets. Configureer eigenschappen, bind optioneel een dataset en lees HTML uit. Veel ervan bieden ook een statische Build(...)-helper voor inline gebruik in één regel.

Node- / compositielaag

Primitieven zoals TsgcHTMLContainer, TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton, TsgcHTMLTable stel je samen tot elke lay-out, die je vervolgens rendert met TsgcHTMLTemplate_Bootstrap.

Visuele paginabouwer

TsgcHTMLPageBuilder met zijn design-time-editor laat je pagina's samenstellen in de IDE, terwijl TsgcHTMLThemeController de lichte/donkere thema's voor de hele app beheert.

3,000+Developers
20+Years
761+Components
30+API Integrations
5Platforms
Niet-goed-geld-terug-garantie van 30 dagenNiet tevreden? Vraag binnen 30 dagen na aankoop een volledige terugbetaling aan. Bekijk het terugbetalingsbeleid

Lever een web-UI op zonder je IDE te verlaten

Voeg grafieken, grids, formulieren, dashboards en realtime pagina's toe aan je Delphi-, C++ Builder- of .NET-applicatie — met de taal die je al gebruikt.

Andere producten van eSeGeCe

Combineer sgcHTML met onze andere component-bibliotheken voor Delphi, C++ Builder en .NET.

sgcWebSockets

Enterprise-componenten voor WebSocket, HTTP/2/3, MQTT, AMQP, WebRTC en AI/LLM. sgcHTML wordt geserveerd over dezelfde krachtige HTTP- en WebSocket-servers.

Meer informatie →

sgcSign

Digitale handtekeningen op enterpriseniveau — XAdES, PAdES, CAdES en ASiC met 10 sleutelproviders en 21 EU-landprofielen.

Meer informatie →

sgcOpenAPI

OpenAPI 3.0-parser en SDK-generator. Zet elke OpenAPI-spec in seconden om in een sterk getypeerde Delphi-client.

Meer informatie →

sgcBiometrics

Native componenten voor Windows Hello, vingerafdruk en het Windows Biometric Framework voor Delphi en C++ Builder.

Meer informatie →