sgcHTML-Funktionsmatrix

Jede Komponente der Bibliothek, gruppiert in neun Familien. Jede rendert zu Bootstrap-5-Markup und funktioniert in Delphi, C++ Builder und .NET gleich. Die meisten sind datengebunden und binden direkt an ein TDataSet über LoadFromDataSet / DataSource (oder eine entsprechende .NET-Quelle). Klicke auf eine Komponente für ihre eigene Seite mit Verwendung und Beispielen. Alle Komponenten wenden automatische HTML-, Attribut-, JavaScript- und URL-Ausgabekodierung sowie URL-Bereinigung an, sodass dynamischer Inhalt standardmäßig maskiert wird, um vor XSS und Injection zu schützen.

Neu in 2026.10

8 Komponenten, 6 Fähigkeiten

14 Komponenten

Daten & Tabellen

11 Komponenten

Formulare & Eingaben

23 Komponenten

Inhalt & Layout

10 Komponenten

Overlays & Feedback

14 Komponenten

Chat & KI

4 Komponenten

Authentifizierung

7 Komponenten

Infrastruktur

8 Klassen

Daten & Tabellen

Grids, Kalender und Boards, die deine Datasets direkt rendern.

KomponenteKlasseBeschreibungHilfe
GridTsgcHTMLComponent_GridFunktionsreiche Tabelle: Sortieren, Filtern, CSV-/PDF-Export, Inline-Bearbeitung, Gruppierung, virtuelles Scrollen und KI-Abfrage.Docs
DataTableTsgcHTMLComponent_DataTableÜbergeordnete Datentabelle, die Grid + Pagination mit Toolbar, Suche und Zeilenanzahl umschließt.Docs
CalendarTsgcHTMLComponent_CalendarKalender im Monatsraster mit Ereignispunkten und Vor-/Zurück-Navigation.Docs
SchedulerTsgcHTMLComponent_SchedulerKalenderplaner (Monats-/Wochenansicht), der Ereignisse nach Datum rendert.Docs
TimelineTsgcHTMLComponent_TimelineVertikale Zeitleiste aus datierten Ereignissen, aus einem Dataset ladbar.Docs
KanbanBoardTsgcHTMLComponent_KanbanBoardKanban-Board aus Spalten und ziehbaren Karten.Docs
GanttTsgcHTMLComponent_GanttGantt-Projektzeitplandiagramm mit Aufgabenfortschrittsbalken.Docs
TreeGridTsgcHTMLComponent_TreeGridBootstrap-Tabelle mit einklappbaren, hierarchischen Zeilen, aufgebaut aus Id/ParentId-Knotenpaaren.Docs
PivotTableTsgcHTMLComponent_PivotTableBootstrap-Pivot-Tabelle, die Zeilen und Spalten gruppiert und Kennzahlen mit Zeilen-, Spalten- und Gesamtsummen aggregiert.Docs
ActivityFeedTsgcHTMLComponent_ActivityFeedLive-Aktivitäts-Feed (neueste zuerst) mit relativen Zeitstempeln und Out-of-Band-WebSocket-Push.Docs
AuditTrailTsgcHTMLComponent_AuditTrailChronologischer Audit-Log-Feed von Benutzer- und Systemaktionen mit Akteur, Aktion, Ziel und Zeitstempel.Docs

Diagramme & Visualisierung

Datengetriebene Grafiken, aus deinen eigenen Zahlen erstellt.

KomponenteKlasseBeschreibungHilfe
ChartTsgcHTMLComponent_ChartChart.js-Diagramm: Linie, Balken, Kreis, Donut, Radar, Polar, Blase und Streuung.Docs
GaugeTsgcHTMLComponent_GaugeHalbkreisförmiges SVG-Messgerät mit Niedrig-/Mittel-/Hoch-Farbschwellen.Docs
DiagramTsgcHTMLComponent_DiagramKnoten-und-Pfeil-Flussdiagramm, als Inline-SVG gerendert.Docs
MapTsgcHTMLComponent_MapInteraktive Leaflet.js-Karte (OpenStreetMap-/CartoDB-Kacheln) mit Markern.Docs
HeatmapTsgcHTMLComponent_HeatmapFarbskaliertes SVG-Heatmap-Raster aus Zellwerten oder einem gebundenen Dataset, mit Legende und Zeilen-/Spaltenbeschriftungen.Docs
SparklineTsgcHTMLComponent_SparklineKompakte Inline-SVG-Sparkline (Linie, Balken oder Fläche) aus einer Werteserie oder einem gebundenen Dataset.Docs
CandlestickChartTsgcHTMLComponent_CandlestickChartSVG-OHLC-Kerzenchart mit Dochten, Auf-/Ab-Farben und einem optionalen Volumenstreifen.Docs
QRCodeTsgcHTMLComponent_QRCodeReiner Pascal-ISO/IEC-18004-SVG-QR-Code aus beliebigem Text oder einer URL, mit wählbarer Fehlerkorrekturstufe.Docs
BarcodeTsgcHTMLComponent_BarcodeReiner Pascal-Code-128-SVG-Barcode aus beliebigem ASCII-Text, mit optionaler lesbarer Bildunterschrift.Docs
TreeMapTsgcHTMLComponent_TreeMapSquarified Treemap, gerendert als eigenständiges, serverseitig erzeugtes Inline-SVG, ohne Chart-Bibliothek.Docs

Formulare & Eingaben

Alles, was du zum Erfassen von Daten brauchst, mit Validierung und Dataset-Bindung.

KomponenteKlasseBeschreibungHilfe
FormTsgcHTMLComponent_FormDatengetriebener Formular-Builder mit Validierung, Layouts und KI-Formularerzeugung.Docs
EditTsgcHTMLComponent_EditEinzeiliges Texteingabefeld mit Label, Hilfetext und Dataset-Bindung.Docs
MemoTsgcHTMLComponent_MemoMehrzeiliges Textbereich-Eingabefeld mit Label und Hilfetext.Docs
CheckBoxTsgcHTMLComponent_CheckBoxKontrollkästchen-Eingabe mit Label und Aktiviert-Zustand.Docs
RadioGroupTsgcHTMLComponent_RadioGroupGruppe sich gegenseitig ausschließender Radio-Optionen.Docs
SelectTsgcHTMLComponent_SelectAuswahl-Dropdown mit Optionsgruppen, Mehrfachauswahl und Dataset-Bindung.Docs
InputGroupTsgcHTMLComponent_InputGroupEingabe mit vorangestelltem/nachgestelltem Addon-Text.Docs
AutoCompleteTsgcHTMLComponent_AutoCompleteTexteingabe mit einer HTML5-Datalist aus Vorschlägen.Docs
DatePickerTsgcHTMLComponent_DatePickerNatives Datums-/Zeit-/Datum-Zeit-Eingabefeld.Docs
FileUploadTsgcHTMLComponent_FileUploadDrag-and-Drop-Datei-Upload-Zone mit Multipart-Formular-POST.Docs
RichEditorTsgcHTMLComponent_RichEditorQuill-basierter WYSIWYG-Rich-Text-Editor mit verborgenem Formularfeld.Docs
RatingTsgcHTMLComponent_RatingStern- (Symbol-)Bewertungsanzeige oder -eingabe.Docs
MultiSelectTsgcHTMLComponent_MultiSelectEin durchsuchbares Bootstrap-Mehrfachauswahl-Dropdown mit Chips, gruppierten Optionen und Dataset-Bindung.Docs
ColorPickerTsgcHTMLComponent_ColorPickerEine native HTML5-Farbeingabe mit optionalem Hex-Textfeld und vordefinierten Farbfeldern.Docs
SliderTsgcHTMLComponent_SliderEin Bootstrap-Bereichsregler mit Live-Wert-Abzeichen, Min-/Max-Beschriftungen und Farbgestaltung.Docs
TimePickerTsgcHTMLComponent_TimePickerEine native HTML5-Zeiteingabe mit Min-/Max-Grenzen und sekundengenauer Granularität.Docs
SignaturePadTsgcHTMLComponent_SignaturePadEin Pointer-Events-Canvas-Unterschriftenfeld mit den Aktionen Löschen, Rückgängig und Speichern.Docs
TransferTsgcHTMLComponent_TransferDoppel-Listbox-Widget zum Verschieben von Elementen zwischen einem Verfügbar- und einem Zugewiesen-Panel, mit Filterung und Dataset-Bindung.Docs
DateTimePickerTsgcHTMLComponent_DateTimePickerNativer HTML5-Datum-und-Zeit-Picker, der Kalender und Uhr in einem einzigen Feld vereint.Docs
DateRangePickerTsgcHTMLComponent_DateRangePickerGepaarte Start- und End-Datumsfelder zur Auswahl eines Datumsbereichs, mit Min-/Max-Grenzen.Docs
RangeSliderTsgcHTMLComponent_RangeSliderSlider mit zwei Reglern zur Auswahl eines Wertepaars (niedrig/hoch), mit Live-Wert-Badges.Docs
CameraScannerTsgcHTMLComponent_CameraScannerLive-Kamera-Panel, das Barcodes und QR-Codes mit dem nativen BarcodeDetector des Browsers scannt, ganz ohne Drittanbieter-Bibliothek.Docs
NumPadTsgcHTMLComponent_NumPadNumerischer Touch- und Währungs-Zahlenblock für die Kassenerfassung, mit Schnellbetrag-Tasten und lokal-unabhängiger Formatierung.Docs

Inhalt & Layout

Karten, Medien und KPI-Kacheln zum Layout einer Seite.

KomponenteKlasseBeschreibungHilfe
PanelTsgcHTMLComponent_PanelBootstrap-Card-Panel mit Kopfzeile/Inhalt/Fußzeile, einklappbar und scrollbar.Docs
StatCardTsgcHTMLComponent_StatCardDashboard-KPI-/Statistik-Karte mit Icon, Trendpfeil und optionalem Verlauf.Docs
AccordionTsgcHTMLComponent_AccordionVertikal einklappbares Accordion aus gestapelten ausklappbaren Panels.Docs
CarouselTsgcHTMLComponent_CarouselBilder-Diashow/-Karussell mit Indikatoren, Steuerelementen und automatischer Wiedergabe.Docs
ImageTsgcHTMLComponent_ImageBild mit Form, responsiv/Lazy-Load, Lightbox-Link und Bildunterschrift.Docs
AvatarTsgcHTMLComponent_AvatarBenutzer-Avatar (Bild oder Initialen) mit Größe, Form und Präsenzstatus-Punkt.Docs
VideoTsgcHTMLComponent_VideoHTML5-Video-/Audioplayer plus ein YouTube-Einbettungshelfer.Docs
BadgeTsgcHTMLComponent_BadgeEinzelnes Bootstrap-Abzeichen mit Farbe, Pill-Form, einem Inline-Icon und einem positionierbaren Benachrichtigungspunkt-Modus.Docs
PDFViewerTsgcHTMLComponent_PDFViewerIn die Seite eingebetteter PDF-Viewer auf Basis von pdf.js, mit Seitennavigation, Zoom, Suche, Download und Druck.Docs
ChipTsgcHTMLComponent_ChipKompakter Chip / Tag mit optionalem Icon, Farbe und entfernbarem Schließen-Button.Docs

Overlays & Feedback

Dialoge, Statusflächen und Ladezustände.

KomponenteKlasseBeschreibungHilfe
ModalTsgcHTMLComponent_ModalModal-Dialog mit Titel/Inhalt/Fußzeile, Größen, zentriert und statischem Hintergrund.Docs
OffcanvasTsgcHTMLComponent_OffcanvasOff-Canvas-Slide-in-Panel von links, rechts, oben oder unten.Docs
PopoverTsgcHTMLComponent_PopoverPopover-Sprechblase an einem Trigger-Element (Klick/Hover/Fokus).Docs
ToastTsgcHTMLComponent_ToastToast-Benachrichtigung mit Kopfzeile, Inhalt, Zeitstempel und Auto-Ausblenden.Docs
SnackbarTsgcHTMLComponent_SnackbarKurzlebige Snackbar im Material-Stil mit einer optionalen Aktion.Docs
NotificationTsgcHTMLComponent_NotificationGlocken-Symbol-Dropdown als Benachrichtigungszentrale mit Ungelesen-Abzeichen.Docs
SpinnerTsgcHTMLComponent_SpinnerLade-Spinner (Rahmen/Grow), dimensioniert und eingefärbt.Docs
PlaceholderTsgcHTMLComponent_PlaceholderSkelett-/Platzhalter-Ladekarte mit einem animierten Schimmer.Docs
ContextMenuTsgcHTMLComponent_ContextMenuRechtsklick-Dropdown-Menü, begrenzt auf einen CSS-Selektor, mit Icons, Trennlinien, Überschriften und serverseitig weitergeleiteten Aktionen.Docs
JobProgressTsgcHTMLComponent_JobProgressLive-Liste von Fortschrittsbalken für Hintergrundjobs mit Status-Abzeichen, Abbrechen-Schaltflächen und Out-of-Band-Fragment-Updates.Docs
LogViewerTsgcHTMLComponent_LogViewerStreaming-Log-/Terminal-Viewer mit Stufenfilter, Suche und automatischem Scrollen.Docs
ProgressBarTsgcHTMLComponent_ProgressBarBootstrap-Fortschrittsbalken, gestreift und animiert, einzeln oder als gestapeltes Mehrfachsegment.Docs
CommandPaletteTsgcHTMLComponent_CommandPaletteCtrl+K / Cmd+K-Schnellaktionsstarter mit Substring-dann-Fuzzy-Filterung, Kategorien und serverseitig weitergeleiteten Aktionen.Docs
EmptyStateTsgcHTMLComponent_EmptyStateDas Panel, das ein Grid, eine Liste oder ein Suchergebnis anzeigt, wenn keine Zeilen vorhanden sind, mit Icon, Titel, Beschreibung und bis zu zwei Buttons.Docs

Chat & KI

Konversationelle Oberflächen, von einfachen Sprechblasen bis zu einem streamenden KI-Assistenten.

KomponenteKlasseBeschreibungHilfe
ChatBoxTsgcHTMLComponent_ChatBoxKartenförmige Chat-Sprechblasen-Box mit Eingabeleiste und Tipp-Indikator.Docs
ChatTsgcHTMLComponent_ChatChat im WhatsApp-Stil mit Text-/Bild-/Datei-/Audio-/Videonachrichten, Lesebestätigungen und Antworten.Docs
AIChatTsgcHTMLComponent_AIChatKI-Assistenten-Chat mit Provider-/Modellauswahl, Token-Streaming und RAG-Quellenangaben.Docs
PresenceTsgcHTMLComponent_Presence„Wer ist online"-Liste als Avatar-Stapel oder Liste, mit Live-Statusaktualisierungen.Docs

Authentifizierung

Fertige Anmeldeabläufe, von Passwörtern bis zu Passkeys.

KomponenteKlasseBeschreibungHilfe
LoginTsgcHTMLComponent_LoginFertiges Anmeldeformular/-seite (Karte, zentriert oder ganzseitig) mit Angemeldet-bleiben und Hinweisen.Docs
SocialLoginTsgcHTMLComponent_SocialLoginOAuth-Social-Login-Schaltflächenpanel (Google, Facebook, Apple, GitHub, Microsoft und mehr).Docs
OAuthCallbackTsgcHTMLComponent_OAuthCallbackOAuth-Callback-/Landing-Seite im Erfolgs-, Fehler- oder Ladezustand mit automatischer Weiterleitung.Docs
WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginPasswortloses Passkey-/WebAuthn-Widget zum Anmelden und Registrieren.Docs
RolesPermissionsTsgcHTMLComponent_RolesPermissionsRollen-/Berechtigungsmatrix mit einem Kontrollkästchen pro Zelle und Live-WebSocket-Aktualisierungen der Berechtigungen.Docs
UserManagementTsgcHTMLComponent_UserManagementBenutzerverwaltungstabelle mit Rollen, Status, Suche und einem Aktionen-Dropdown pro Zeile.Docs
ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerAdmin-Impersonation-Banner, das angezeigt wird, während man als anderer Benutzer agiert, mit Ein-Klick-Ausstieg.Docs

Engine, Server & Theming

Die nicht-visuellen Bausteine, die die Seiten ausliefern und live halten.

KomponenteKlasseBeschreibungHilfe
EngineServerTsgcHTMLEngine_ServerHTML-Engine, gebunden an einen TsgcWebSocketHTTPServer, der gerenderte Seiten und eingebettete Assets ausliefert.Docs
HTMXEngineTsgcHTMX_Engine_Serverhtmx-Engine, an denselben Server angebunden. Sie hängt sich in die HTTP- und WebSocket-Handler ein, verteilt eingehende Anfragen und Nachrichten und sendet oder broadcastet HTML-Fragmente in Echtzeit an verbundene Browser (DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment).Docs
PageBuilderTsgcHTMLPageBuilderSetzt registrierte Komponenten zu einer vollständigen responsiven Seite zusammen (mit einem visuellen Editor zur Entwurfszeit).Docs
TemplateBootstrapTsgcHTMLTemplate_BootstrapUmschließt Inhalt in einem vollständigen Bootstrap-5-HTML-Dokument mit Thema, Sprache und Schreibrichtung.Docs
ThemeControllerTsgcHTMLThemeControllerLaufzeit-Theme-Umschalter, dessen Eigenschaft Theme (ptDefault, ptDark, ptDarkPro) das ausgewählte Theme und das gemeinsame Stylesheet auf die Seite anwendet.Docs
ThemeBuilderTsgcHTMLThemeBuilderCSS-Generator, dessen Mode (tmLight, tmDark, tmSystem) Bootstrap-CSS-Variablen aus Eigenschaftswerten schreibt, mit einem optionalen Skript zur Synchronisierung mit der Betriebssystem-Einstellung für tmSystem.Docs
HTMXFragmentTsgcHTMX_FragmentOut-of-Band-htmx-Fragment zum Übertragen eines Teilseiten-Updates vom Server an den Browser.Docs
HTMXRouterTsgcHTMX_RouterRouting-Tabelle aus Routes, die einen eingehenden Anfragepfad abgleicht und ihn (über HandleRequest) an den OnRoute-Handler dieser Route weiterleitet.Docs

Neue Komponenten

In dieser Version hinzugekommen, zusätzlich zu den oben aufgeführten 93 Komponenten. Die Familienzahlen oben bleiben unverändert.

KomponenteKlasseBeschreibungHilfe
CRUDTsgcHTMLComponent_CRUDDie Liste mit Suche und Paginierung, das Formular zum Anlegen und Bearbeiten, die Löschbestätigung und der Schreibpfad einer Tabelle, über ein Dataset oder über Ihr eigenes SQL mit einem Adapter aus sechs Methoden.Docs
NotificationInboxTsgcHTMLComponent_NotificationInboxEine Glocke mit Ungelesen-Abzeichen und den Benachrichtigungen eines Benutzers. Ihre Anwendung beantwortet ein Ereignis mit den Zeilen, die sie speichert, und erfährt, was der Benutzer gelesen hat.Docs
NotificationPreferencesTsgcHTMLComponent_NotificationPreferencesEine Tabelle mit einer Zeile pro Kategorie und einem Kontrollkästchen pro Kanal (In-App, Push, E-Mail). Ihre Anwendung lädt und speichert die Werte.Docs
WebPushTsgcHTMLWebPushWeb Push mit VAPID: validiert die Abonnements, die ein Browser sendet, übergibt sie an Ihre Anwendung und sendet verschlüsselte Benachrichtigungen an einen Browser, der nicht läuft. Editionen Enterprise und All-Access.Docs
AuthTsgcHTMLAuthCookie-Sitzungen, Angemeldet bleiben, CSRF-Token, Begrenzung der Anmeldeversuche und Routenschutz nach Anmeldung und Rolle, aufbauend auf einem Sitzungsspeicher im Arbeitsspeicher oder in Dateien.Docs
MCPAppTsgcHTMLComponent_MCPAppEin MCP-Tool, das mit einer Seite antwortet, sodass die Komponenten, die Sie bereits verwenden, in ChatGPT, Claude und VS Code dargestellt werden.Docs
AIAssistantTsgcHTMLAIAssistantWandelt eine Frage in natürlicher Sprache in eine validierte Menge von Filtern, Sortierungen, Gruppierungen und Hervorhebungen für ein Grid, eine Datentabelle, ein Pivot oder ein Formular um. Ein eingebauter Parser antwortet, wenn kein Provider konfiguriert ist.Docs
InlineAIPromptTsgcHTMLComponent_InlineAIPromptEin Popover neben einem Memo, einem Rich-Editor oder einer Grid-Spalte, das den Assistenten befragt und die Antwort nur meldet, wenn der Benutzer sie übernimmt.Docs

Neue Fähigkeiten

Was die Engine, das Seiten-Template und der Designer dazugewonnen haben. Jede Option ist standardmäßig ausgeschaltet, sodass eine Seite, die keine nutzt, genau wie zuvor gerendert wird.

FähigkeitWas sie hinzufügtHilfe
RoutingTemplate-Pfade mit {name}-Segmenten, ein Methods-Filter pro Route, RequireLogin und RequireRoles sowie transportneutrales Dispatching, sodass eine Route über HTTP, über den WebSocket oder in einem Test gleich abläuft.Docs
Navigation und Live-AktualisierungenAcht Seiten-Template-Optionen, die eine serverseitig gerenderte Website ohne eigenes JavaScript in eine Single-Page-Anwendung verwandeln: gebooste Links und Formulare, Verlauf, Morph-Swaps, View Transitions, ein Ladebalken, Wiederherstellung der Scrollposition, Sperren beim Absenden und ein Fehler-Toast. Alle sind standardmäßig ausgeschaltet.Docs
WebSocket oder SSELive-Aktualisierungen über Server-Sent Events statt über einen WebSocket oder eine automatische Auswahl, die auf den Event-Stream zurückfällt, wenn sich der WebSocket nicht öffnen lässt. Das Markup, die Routen und die Fragmente bleiben gleich.Docs
AI Data PackBefragen Sie ein Grid, eine Datentabelle, ein Pivot oder ein Formular in natürlicher Sprache und wenden Sie nur an, was ein Validator durchgelassen hat. Das Modell erhält Spaltennamen, Typen und drei Beispielwerte, und Zeilen nur, wenn Sie AllowRowDataToProvider einschalten. Ein Provider benötigt die KI-Units der Enterprise- oder All-Access-Edition oder das sgcAI-Paket, und ein eingebauter Parser antwortet auch ohne.Docs
KI-SeitengeneratorBeschreiben Sie im Designer eine Seite oder geben Sie ihm einen Screenshot, und er baut die Seite aus Ihren registrierten Komponenten auf, über ein Schema, das nichts anderes benennen kann. Nichts wird angewendet, bevor Sie es akzeptieren. Der Provider benötigt dieselben KI-Units.Docs
TestingDeterministische Element-IDs, ein kleines DOM mit CSS-Selektoren, HTML-Assertions, Snapshot-Dateien und Anfragetests ohne Server, ohne dass ein Test-Framework nötig ist.Docs

Die Feature-Liste, live im Einsatz

Jede auf dieser Seite genannte Funktion wird von einer dieser Anwendungen tatsächlich genutzt.

Ad-hoc-Pivot-Builder: eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft.

Ad-hoc-Pivot-Builder

Benutzer wählen Dimensionen und Kennzahlen; die Kreuztabelle wird aus einer TFDQuery neu aufgebaut.

Live-Demo öffnen →
htmx-Live-CRUD: eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft.

htmx-Live-CRUD

Suche während der Eingabe und Inline-Bearbeitung, als Fragmente eingefügt, ohne Seiten-Reload.

Live-Demo öffnen →
Responsiv von Haus aus: eine mit sgcHTML gebaute Delphi-Webanwendung, die im Browser läuft.

Responsiv von Haus aus

Dieselben Komponenten rendern in Smartphone-Breite ein Layout für Handheld-Scanner.

Live-Demo öffnen →

Alle neun Live-Demos ansehen →

Bestes Preis-Leistungs-Verhältnis: All-AccessAlle eSeGeCe-Produkte, inklusive Premium-Support, ab €1,059 pro Jahr.
All-Access-Preise ansehen

Mit sgcHTML entwickeln

Lade die kostenlose Testversion herunter und beginne, Web-UIs in Delphi, C++ Builder oder .NET zusammenzustellen.