Bouw complete, moderne web-UI's rechtstreeks vanuit Delphi, C++ Builder en .NET. sgcHTML is een server-side componentframework met 93 kant-en-klare, data-aware widgets — grafieken, grids, formulieren, dashboards, chat en meer — die rechtstreeks aan een TDataSet binden, Bootstrap 5-markup renderen en interactief blijven via htmx. Jij schrijft Object Pascal of C#, sgcHTML schrijft de HTML, CSS en JavaScript.
Bouw een complete web-UI vanuit Delphi met server-side componenten, Bootstrap 5-markup en htmx, zonder JavaScript-buildstap.
Elk scherm hieronder is een Delphi-applicatie die zijn eigen HTML serveert via sgcHTML. Geen JavaScript-buildstap, geen apart front-endproject. Log in met de inloggegevens die al op elke loginpagina zijn ingevuld.
Klanten, producten, leveranciers en facturatie, met dashboardgrafieken, rolgebaseerd beheer en aanmelden met passkey.
Open de live demo →
Dashboards, een rapportcatalogus, een ad-hoc pivot-builder en een verkenweergave over 27.000 orderregels, in-process bevraagd.
Open de live demo →
Een touchkassa met categorieën, promoties, geparkeerde verkopen, dienstbeheer en een live klantendisplay.
Open de live demo →
Ontvangst, verzending, actuele voorraad, mutaties en cyclustellingen, plus een terminal-lay-out voor handscanners.
Open de live demo →
Een dispatchbord, Gantt-planner en live technicuskaart om technici en opdrachten in te plannen.
Open de live demo →
Zoeken tijdens het typen, inline toevoegen, bewerken en verwijderen, allemaal ingewisseld als htmx-fragmenten zonder de pagina te herladen.
Open de live demo →
Servermetrics worden via WebSocket in out-of-band htmx-fragmenten gepusht en werken KPI-kaarten en grafieken realtime bij.
Open de live demo →
Een selfservice-omgeving achter een login waar klanten hun eigen bestellingen, profiel en supporttickets zien.
Open de live demo →
Een publieke marketingsite, prijzenpagina en registratieflow vóór een control plane dat per tenant geïsoleerd is.
Open de live demo →
De Gantt-planner, Chart.js-reeksen, gauges, sparklines, treemaps en heatmaps komen allemaal uit je Pascal- of C#-code. Jij zet de data, sgcHTML levert de markup en de client-side aansturing.
Gebruikers kiezen dimensies, meetwaarden en een aggregatie, en de kruistabel wordt opnieuw opgebouwd uit een TFDQuery. Er zit geen REST-laag tussen, de pagina leest de database rechtstreeks in-process.
Elk component rendert responsieve Bootstrap 5-markup, dus de magazijnterminal-lay-out is dezelfde componentbibliotheek op telefoonbreedte, geen aparte mobiele codebase.
Elke clip is een schermopname van een van deze toepassingen die echt draait, met voice-over en ondertiteling. Er wordt niets gedownload tot je op afspelen drukt.
Een Delphi-executable van 7,7 MB, zonder DLL's ernaast, die een compleet web-ERP serveert vanaf SQLite.
Een rondleiding langs de 93 componenten, van grids en grafieken tot Kanban-borden en handtekeningvelden.
Sorteren, filteren, pagineren, inline bewerken, selectie en dataset-binding, allemaal aangestuurd vanuit Pascal.
Hoe een fragmentwissel het herladen van een pagina vervangt, en hoe dat eruitziet in je Delphi-code.
Servermetrieken die via out-of-band-fragmenten worden gepusht en kaarten en grafieken bijwerken zodra ze veranderen.
De kassademo leest de database in-process, zonder JSON API ertussen.
Dashboards, een pivotbouwer en een verkenweergave over 27.000 orderregels.
De magazijndemo telt scherm voor scherm op welke componenten uit de bibliotheek ze gebruikt.
Dezelfde toepassing op een desktopbord en op een telefoon, netjes in sync.
Eén binary, één database, strikte scheiding per tenant, gedemonstreerd in plaats van beweerd.
Selfservice-bestellingen, profiel en supporttickets achter een login.
Zoeken tijdens het typen, inline toevoegen, bewerken en verwijderen, ingewisseld als htmx-fragmenten.
Registratie, ticketgesprekken en statuswijzigingen, allemaal server-rendered.
Een winkelassistent die antwoordt vanuit de productcatalogus in plaats van een antwoord te verzinnen.
Navigatie, zijbalken en paginaopbouw, gebouwd met de Site-component.
sgcHTML-uitvoer toevoegen aan een bestaande Delphi WebBroker-toepassing.
Een moderne front-end serveren vanaf een servicelaag die je al hebt.
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.
Elke widget is een class — TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form en 86 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.
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.
sgcHTML is niet gebonden aan de sgcWebSockets-server. Serveer dezelfde uit componenten opgebouwde pagina's vanuit elke Embarcadero WebBroker-applicatie via TsgcHTMX_Engine_Server_WebBroker, of vanuit een DataSnap-server met live WebSocket-push op dezelfde poort als je REST-endpoints.
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.
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.
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.
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.
sgcHTML wordt geleverd met ingebouwde UI-tekst (knoppen, labels, validatieberichten) in 17 talen: Engels, Spaans, Frans, Duits, Portugees, Italiaans, Nederlands, Zweeds, Noors, Pools, Tsjechisch, Turks, Russisch, Chinees, Japans, Koreaans en Arabisch. Kies er een met sgcHTMLSetLanguage en componenten renderen in de taal van de bezoeker met de juiste native schriften, waaronder CJK, Cyrillisch en Arabisch.
Elk component stuurt zijn dynamische tekst, attributen, inline JavaScript en URL's door automatische HTML-, attribuut-, JavaScript- en URL-codering plus URL-sanering (sgcHTMLEncode, sgcHTMLAttrEncode, sgcJSEncode, sgcHTMLSanitizeURL), zodat gebruikersgegevens niet uit hun context kunnen breken en script kunnen injecteren. Bescherming tegen XSS en injectie staat aan zonder extra werk.
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, Splitter.
Componenten bekijken →Grid, DataTable, TreeGrid, PivotTable, Calendar, Scheduler, Timeline, ActivityFeed, KanbanBoard, Gantt — sorteerbaar, filterbaar, exporteerbaar, dataset-gebonden.
Componenten bekijken →Chart (Chart.js), CandlestickChart, Gauge, Heatmap, Sparkline, TreeMap, Diagram (SVG-flow), Map (Leaflet), QRCode, Barcode — datagedreven beelden uit je eigen datasets.
Componenten bekijken →Form, Edit, Memo, CheckBox, RadioGroup, Select, MultiSelect, InputGroup, AutoComplete, DatePicker, TimePicker, ColorPicker, Slider, FileUpload, RichEditor, Rating, SignaturePad, Transfer.
Componenten bekijken →Panel, StatCard, Accordion, Carousel, Image, Avatar, Video, Badge, PDFViewer — cards, media en KPI-tegels voor dashboards.
Componenten bekijken →Modal, Offcanvas, Popover, Toast, Snackbar, Notification, Spinner, Placeholder, ContextMenu, ProgressBar, JobProgress, LogViewer — dialoogvensters en statusvlakken.
Componenten bekijken →ChatBox, Chat (WhatsApp-stijl), AIChat met providerkeuze, token-streaming en RAG-bronvermeldingen, Presence voor live onlinestatus.
Componenten bekijken →Login, SocialLogin (OAuth), OAuthCallback, WebAuthnLogin (passkeys), UserManagement, RolesPermissions — kant-en-klare aanmeldflows en beheerschermen.
Componenten bekijken →EngineServer, HTMXEngine, PageBuilder, TemplateBootstrap, ThemeController, ThemeBuilder, HTMXFragment, HTMXRouter — de niet-visuele onderdelen die pagina's serveren en live houden.
Componenten bekijken →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
}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.
De 93 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.
Primitieven zoals TsgcHTMLContainer (met een Void-vlag voor zelfsluitende tags), TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton en TsgcHTMLTable stel je samen tot elke lay-out, die je vervolgens rendert met TsgcHTMLTemplate_Bootstrap. De node-set bevat ook Bootstrap-bouwstenen zoals TsgcHTMLModal, TsgcHTMLOffcanvas, TsgcHTMLAccordion, TsgcHTMLCarousel, TsgcHTMLToast, TsgcHTMLProgress, TsgcHTMLSpinner, TsgcHTMLListGroupNode, TsgcHTMLInputGroup, TsgcHTMLButtonGroupNode, TsgcHTMLRadio, TsgcHTMLBreadcrumb, TsgcHTMLNavbarNode en TsgcHTMLImage.
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.
Met sgcCustomization HTML beschrijf je de applicatie die je nodig hebt en het eSeGeCe-team bouwt deze voor je met de sgcHTML + sgcWebSockets-componenten. Drie eenmalige pakketten vanaf €149, en je ontvangt een compleet project dat je kunt compileren, uitbreiden en herstylen met je gelicentieerde componenten.
Heb je al een webapplicatie gebouwd met IntraWeb, uniGUI, TMS WEB Core, Elevate Web Builder of D2Bridge? Stapsgewijze gidsen loodsen je door de overstap naar sgcHTML, met een conceptmapping voor elk framework. Er is ook een migratiehulpformulier als je wilt dat ons team de overstap helpt plannen of uitvoert.
Combineer sgcHTML met onze andere component-bibliotheken voor Delphi, C++ Builder en .NET.
Enterprise-componenten voor WebSocket, HTTP/2, MQTT, AMQP, WebRTC en AI/LLM. sgcHTML wordt geserveerd over dezelfde krachtige HTTP- en WebSocket-servers.
Meer informatie →QUIC- en HTTP/3-client- en servercomponenten voor Delphi, C++ Builder en .NET. Serveer de gerenderde UI van sgcHTML via HTTP/3 voor paginalaadtijden met lagere latentie op netwerken met pakketverlies.
Meer informatie →Volledige WebRTC-media-engine voor Delphi en C++ Builder: audio- en video-oproepen, datakanalen en schermdelen, met STUN/TURN/ICE ingebouwd. Een add-on voor sgcWebSockets Enterprise.
Combineer een sgcHTML-video-UI met de native peer-connectie van sgcWebRTC, zonder browser-WebRTC nodig te hebben.
Meer informatie →Digitale handtekeningen op enterpriseniveau — XAdES, PAdES, CAdES en ASiC met 10 sleutelproviders en 21 EU-landprofielen.
Meer informatie →OpenAPI 3.0-parser en SDK-generator. Zet elke OpenAPI-spec in seconden om in een sterk getypeerde Delphi-client.
Meer informatie →Native componenten voor Windows Hello, vingerafdruk en het Windows Biometric Framework voor Delphi en C++ Builder.
Meer informatie →Bijgewerkte Indy TCP/IP-componenten met moderne TLS, IPv6 en HTTP/2-ondersteuning voor Delphi 7 tot en met 13.
Meer informatie →15 AI-, LLM- en MCP-componenten voor Delphi en C++ Builder. Eén chatcomponent bereikt OpenAI, Anthropic, Gemini, DeepSeek, Ollama, Grok en Mistral. Standalone, de sgcWebSockets Core runtime is inbegrepen.
Meer informatie →MQTT 3.1.1 en 5.0, AMQP 0.9.1, AMQP 1.0, Apache Kafka en STOMP-clientcomponenten voor Delphi en C++ Builder. Standalone, de sgcWebSockets Core runtime is inbegrepen.
Meer informatie →Cryptografiebibliotheek voor Delphi en C++ Builder: symmetrische en asymmetrische versleuteling, hashing en sleutelbeheer. Gratis vanaf sgcWebSockets Standard, of standalone.
Versleutel gevoelige velden die sgcHTML-formulieren verzamelen voordat ze worden opgeslagen.
Meer informatie →WhatsApp Business Cloud API- en Telegram TDLib-clients. Standalone, de sgcWebSockets Core runtime is inbegrepen.
Meer informatie →