sgcHTML

Erstelle vollständige, moderne Web-UIs direkt aus Delphi, C++ Builder und .NET. sgcHTML ist ein serverseitiges Komponenten-Framework mit über 60 fertigen Widgets — Diagramme, Grids, Formulare, Dashboards, Chat und mehr —, die Bootstrap-5-Markup erzeugen und über htmx interaktiv bleiben. Du schreibst Object Pascal oder C#, sgcHTML schreibt das HTML, CSS und JavaScript.

Über 60 UI-Komponenten
Bootstrap 5 + htmx
Delphi / C++ Builder / .NET
Kein JavaScript erforderlich

Du schreibst Pascal oder C#. sgcHTML schreibt das Frontend.

sgcHTML verwandelt dein vorhandenes Delphi-, C++-Builder- oder .NET-Backend in einen Webanwendungsserver. Jede Komponente ist eine native Klasse, die Bootstrap-5-HTML erzeugt; htmx hält die Seite interaktiv und live, ohne eine einzige Zeile handgeschriebenes JavaScript.

Komponenten, die HTML erzeugen

Jedes Widget ist eine Klasse — TsgcHTMLComponent_Chart, TsgcHTMLComponent_Grid, TsgcHTMLComponent_Form und 60 weitere. Setze ihre Eigenschaften und lies dann ihre HTML-Eigenschaft aus, um sauberes, auslieferungsfertiges Bootstrap-5-Markup zu erhalten.

Ausgeliefert von deinem eigenen Server

Platziere einen TsgcHTMLEngine_Server (oder verbinde das HTML mit einem vorhandenen TsgcWebSocketHTTPServer). Anfragen treffen in deinem OnCommandGet-Handler ein; du antwortest mit einer aus Komponenten aufgebauten Seite. Kein externer Web-Stack.

Interaktiv über htmx

Füge einen TsgcHTMX_Engine_Server hinzu, und Klicks, Formular-Posts und Live-Updates wandern zu deinen Pascal-/C#-Eventhandlern und zurück. Der Server tauscht HTML-Fragmente an Ort und Stelle aus — das SPA-Gefühl, ohne die JavaScript-Build-Kette.

Echtzeit über WebSockets

Da htmx über den sgcWebSockets-Server läuft, kannst du Live-HTML an jeden verbundenen Browser pushen. Dashboards, Monitore und Chat-Fenster aktualisieren sich in dem Moment, in dem sich deine Daten ändern — servergesteuert, ohne Polling.

Theming & Templates

TsgcHTMLTemplate_Bootstrap bettet deinen Inhalt in ein vollständiges responsives Dokument ein; TsgcHTMLThemeController und TsgcHTMLThemeBuilder liefern helle/dunkle Themes und ein gemeinsames Stylesheet. Bootstrap 5.3 und htmx sind eingebettet enthalten — kein CDN zur Laufzeit.

Direkte Datenbankanbindung

Grid, DataTable, Chart, Select, TreeView, Scheduler, Timeline und Form binden direkt an ein TDataSet über LoadFromDataSet / DataSource. Richte eine Komponente auf eine Abfrage aus, und sie rendert die Zeilen.

Über 60 Komponenten, acht Familien

Von Navigations-Chrome über Data-Grids, Diagramme, Formulare und Overlays bis zum KI-Chat — das gesamte Bootstrap-5-Vokabular als native Komponenten. Jede verlinkt auf ihre eigene Seite mit Delphi-, C++-Builder- und .NET-Beispielen.

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

Komponenten ansehen →

Daten & Tabellen

Grid, DataTable, Calendar, Scheduler, Timeline, KanbanBoard, Gantt — sortierbar, filterbar, exportierbar, an Datasets gebunden.

Komponenten ansehen →

Diagramme & Visualisierung

Chart (Chart.js), Gauge, Diagram (SVG-Flow), Map (Leaflet) — datengetriebene Visualisierungen aus deinen eigenen Datasets.

Komponenten ansehen →

Formulare & Eingaben

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

Komponenten ansehen →

Inhalt & Layout

Panel, StatCard, Accordion, Carousel, Image, Avatar, Video — Karten, Medien und KPI-Kacheln für Dashboards.

Komponenten ansehen →

Overlays & Feedback

Modal, Offcanvas, Popover, Toast, Snackbar, Notification, Spinner, Placeholder — Dialoge und Status-Flächen.

Komponenten ansehen →

Chat & KI

ChatBox, Chat (im WhatsApp-Stil), AIChat mit Anbieterauswahl, Token-Streaming und RAG-Quellenangaben.

Komponenten ansehen →

Authentifizierung

Login, SocialLogin (OAuth), OAuthCallback, WebAuthnLogin (Passkeys) — fertige Anmeldeabläufe.

Komponenten ansehen →

Die vollständige Feature-Matrix ansehen →

Ein Web-Dashboard in wenigen Zeilen

Starte einen HTTP-Server, hänge die htmx-Engine an und beantworte Anfragen mit einer aus Komponenten aufgebauten Seite. Dieselbe API in Delphi, C++ Builder und .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-Komponenten oder Low-Level-Nodes

Greife zu fertigen Komponenten, wenn du ein Widget in einer Zeile willst, oder steige zur Node-Ebene hinab, wenn du volle Kontrolle über das Markup brauchst.

Komponenten-Ebene

Die über 60 TsgcHTMLComponent_*-Widgets. Konfiguriere Eigenschaften, binde optional ein Dataset und lies HTML aus. Viele bieten zudem einen statischen Build(...)-Helfer für die einzeilige Inline-Nutzung.

Node-/Kompositions-Ebene

Primitive wie TsgcHTMLContainer, TsgcHTMLCard, TsgcHTMLForm, TsgcHTMLField, TsgcHTMLButton, TsgcHTMLTable lassen sich zu jedem Layout zusammensetzen und dann mit TsgcHTMLTemplate_Bootstrap rendern.

Visueller Page-Builder

TsgcHTMLPageBuilder mit seinem Entwurfszeit-Editor lässt dich Seiten in der IDE zusammenstellen, während TsgcHTMLThemeController das helle/dunkle Theming in der gesamten App verwaltet.

3,000+Developers
20+Years
761+Components
30+API Integrations
5Platforms
30 Tage Geld-zurück-GarantieNicht zufrieden? Fordern Sie innerhalb von 30 Tagen nach dem Kauf eine vollständige Rückerstattung an. Rückerstattungsrichtlinie ansehen

Liefere eine Web-UI aus, ohne deine IDE zu verlassen

Füge deiner Delphi-, C++-Builder- oder .NET-Anwendung Diagramme, Grids, Formulare, Dashboards und Echtzeitseiten hinzu — mit der Sprache, die du bereits verwendest.

Weitere Produkte von eSeGeCe

Kombiniere sgcHTML mit unseren anderen Delphi-, C++-Builder- und .NET-Komponentenbibliotheken.

sgcWebSockets

Enterprise-Komponenten für WebSocket, HTTP/2/3, MQTT, AMQP, WebRTC und KI/LLM. sgcHTML wird über dieselben leistungsstarken HTTP- und WebSocket-Server ausgeliefert.

Mehr erfahren →

sgcSign

Digitale Signaturen auf Unternehmensniveau — XAdES, PAdES, CAdES und ASiC mit 10 Schlüsselanbietern und 21 EU-Länderprofilen.

Mehr erfahren →

sgcOpenAPI

OpenAPI-3.0-Parser und SDK-Generator. Verwandle jede OpenAPI-Spezifikation in Sekunden in einen streng typisierten Delphi-Client.

Mehr erfahren →

sgcBiometrics

Native Komponenten für Windows Hello, Fingerabdruck und das Windows Biometric Framework für Delphi und C++ Builder.

Mehr erfahren →