sgcHTML Feature Matrix

Every component in the library, grouped into nine families. Each one renders to Bootstrap 5 markup and works the same in Delphi, C++ Builder and .NET. Most are data-aware, binding straight to a TDataSet via LoadFromDataSet / DataSource (or an equivalent .NET source). Click a component for its own page with usage and examples. All components apply automatic HTML, attribute, JavaScript and URL output encoding plus URL sanitization, so dynamic content is escaped by default to guard against XSS and injection.

14 components

Data & Tables

11 components

Charts & Visualization

10 components

Forms & Inputs

23 components

Content & Layout

10 components

Overlays & Feedback

14 components

Chat & AI

4 components

Authentication

7 components

Infrastructure

8 classes

Data & Tables

Data & Tables

Grids, calendars and boards that render your datasets directly.

ComponentClassDescriptionHelp
GridTsgcHTMLComponent_GridFeature-rich table: sort, filter, CSV/PDF export, inline edit, grouping, virtual scroll and AI query.Docs
DataTableTsgcHTMLComponent_DataTableHigher-level data table wrapping Grid + Pagination with a toolbar, search and row count.Docs
CalendarTsgcHTMLComponent_CalendarMonth-grid calendar with event dots and previous/next navigation.Docs
SchedulerTsgcHTMLComponent_SchedulerCalendar scheduler (month / week views) rendering events by date.Docs
TimelineTsgcHTMLComponent_TimelineVertical timeline of dated events, loadable from a dataset.Docs
KanbanBoardTsgcHTMLComponent_KanbanBoardKanban board of columns and draggable cards.Docs
GanttTsgcHTMLComponent_GanttGantt project-timeline chart with task progress bars.Docs
TreeGridTsgcHTMLComponent_TreeGridBootstrap table with collapsible, hierarchical rows built from Id/ParentId node pairs.Docs
PivotTableTsgcHTMLComponent_PivotTableBootstrap pivot table that groups rows and columns and aggregates measures with row, column and grand totals.Docs
ActivityFeedTsgcHTMLComponent_ActivityFeedLive, newest-first activity feed with relative timestamps and out-of-band WebSocket push.Docs
AuditTrailTsgcHTMLComponent_AuditTrailChronological audit-log feed of user and system actions with actor, action, target and timestamp.Docs
Charts & Visualization

Charts & Visualization

Data-driven visuals built from your own numbers.

ComponentClassDescriptionHelp
ChartTsgcHTMLComponent_ChartChart.js chart: line, bar, pie, doughnut, radar, polar, bubble and scatter.Docs
GaugeTsgcHTMLComponent_GaugeSemicircular SVG gauge with low / mid / high colour thresholds.Docs
DiagramTsgcHTMLComponent_DiagramNode-and-arrow flow diagram rendered as inline SVG.Docs
MapTsgcHTMLComponent_MapLeaflet.js interactive map (OpenStreetMap / CartoDB tiles) with markers.Docs
HeatmapTsgcHTMLComponent_HeatmapColour-scaled SVG heatmap grid from cell values or a bound dataset, with legend and row/column labels.Docs
SparklineTsgcHTMLComponent_SparklineCompact inline SVG line, bar or area sparkline from a value series or a bound dataset.Docs
CandlestickChartTsgcHTMLComponent_CandlestickChartSVG OHLC candlestick chart with wicks, up/down colours and an optional volume strip.Docs
QRCodeTsgcHTMLComponent_QRCodePure-Pascal ISO/IEC 18004 SVG QR code from any text or URL, with selectable error correction level.Docs
BarcodeTsgcHTMLComponent_BarcodePure-Pascal Code 128 SVG barcode from any ASCII text, with optional human-readable caption.Docs
TreeMapTsgcHTMLComponent_TreeMapSquarified treemap rendered as a self-contained, server-generated inline SVG, no charting library required.Docs
Forms & Inputs

Forms & Inputs

Everything you need to capture data, with validation and dataset binding.

ComponentClassDescriptionHelp
FormTsgcHTMLComponent_FormData-driven form builder with validation, layouts and AI form generation.Docs
EditTsgcHTMLComponent_EditSingle-line text input with label, help text and dataset binding.Docs
MemoTsgcHTMLComponent_MemoMulti-line text-area input with label and help text.Docs
CheckBoxTsgcHTMLComponent_CheckBoxCheckbox input with label and checked state.Docs
RadioGroupTsgcHTMLComponent_RadioGroupGroup of mutually exclusive radio options.Docs
SelectTsgcHTMLComponent_SelectSelect dropdown with option groups, multiple select and dataset binding.Docs
InputGroupTsgcHTMLComponent_InputGroupInput with prepend / append addon text.Docs
AutoCompleteTsgcHTMLComponent_AutoCompleteText input backed by an HTML5 datalist of suggestions.Docs
DatePickerTsgcHTMLComponent_DatePickerNative date / time / datetime input field.Docs
FileUploadTsgcHTMLComponent_FileUploadDrag-and-drop file upload zone with multipart form post.Docs
RichEditorTsgcHTMLComponent_RichEditorQuill-based WYSIWYG rich-text editor with hidden form field.Docs
RatingTsgcHTMLComponent_RatingStar (symbol) rating display or input.Docs
MultiSelectTsgcHTMLComponent_MultiSelectA searchable Bootstrap multi-select dropdown with chips, grouped options and dataset binding.Docs
ColorPickerTsgcHTMLComponent_ColorPickerA native HTML5 color input with an optional hex text field and swatch presets.Docs
SliderTsgcHTMLComponent_SliderA Bootstrap range slider with a live value badge, min/max labels and color styling.Docs
TimePickerTsgcHTMLComponent_TimePickerA native HTML5 time input with min/max bounds and second-level granularity.Docs
SignaturePadTsgcHTMLComponent_SignaturePadA pointer-events canvas signature pad with Clear, Undo and Save actions.Docs
TransferTsgcHTMLComponent_TransferDual-listbox widget to move items between an available and an assigned panel, with filtering and dataset binding.Docs
DateTimePickerTsgcHTMLComponent_DateTimePickerNative HTML5 date-and-time picker combining calendar and clock in a single field.Docs
DateRangePickerTsgcHTMLComponent_DateRangePickerPaired start and end date inputs for choosing a date range, with min/max bounds.Docs
RangeSliderTsgcHTMLComponent_RangeSliderDual-handle slider selecting a low/high value pair, with live value badges.Docs
CameraScannerTsgcHTMLComponent_CameraScannerLive camera panel that scans barcodes and QR codes with the browser's native BarcodeDetector, no third-party library.Docs
NumPadTsgcHTMLComponent_NumPadTouch numeric and currency keypad for point-of-sale entry, with quick amount buttons and locale-independent formatting.Docs
Content & Layout

Content & Layout

Cards, media and KPI tiles to lay out a page.

ComponentClassDescriptionHelp
PanelTsgcHTMLComponent_PanelBootstrap card panel with header / body / footer, collapsible and scrollable.Docs
StatCardTsgcHTMLComponent_StatCardDashboard KPI / stat card with icon, trend arrow and optional gradient.Docs
AccordionTsgcHTMLComponent_AccordionVertically collapsing accordion of stacked expandable panels.Docs
CarouselTsgcHTMLComponent_CarouselImage slideshow / carousel with indicators, controls and autoplay.Docs
ImageTsgcHTMLComponent_ImageImage with shape, responsive / lazy-load, lightbox link and caption.Docs
AvatarTsgcHTMLComponent_AvatarUser avatar (image or initials) with size, shape and presence-status dot.Docs
VideoTsgcHTMLComponent_VideoHTML5 video / audio player plus a YouTube embed helper.Docs
BadgeTsgcHTMLComponent_BadgeSingle Bootstrap badge with color, pill shape, an inline icon and a positioned notification-dot mode.Docs
PDFViewerTsgcHTMLComponent_PDFViewerIn-page PDF viewer backed by pdf.js, with page navigation, zoom, search, download and print.Docs
ChipTsgcHTMLComponent_ChipCompact chip / tag with an optional icon, colour and a removable close button.Docs
Overlays & Feedback

Overlays & Feedback

Dialogs, status surfaces and loading states.

ComponentClassDescriptionHelp
ModalTsgcHTMLComponent_ModalModal dialog with title / body / footer, sizes, centered and static backdrop.Docs
OffcanvasTsgcHTMLComponent_OffcanvasOff-canvas slide-in panel from the left, right, top or bottom.Docs
PopoverTsgcHTMLComponent_PopoverPopover bubble on a trigger element (click / hover / focus).Docs
ToastTsgcHTMLComponent_ToastToast notification with header, body, timestamp and auto-hide.Docs
SnackbarTsgcHTMLComponent_SnackbarMaterial-style transient snackbar with an optional action.Docs
NotificationTsgcHTMLComponent_NotificationBell-icon dropdown notification centre with an unread badge.Docs
SpinnerTsgcHTMLComponent_SpinnerLoading spinner (border / grow), sized and coloured.Docs
PlaceholderTsgcHTMLComponent_PlaceholderSkeleton / placeholder loading card with an animated shimmer.Docs
ContextMenuTsgcHTMLComponent_ContextMenuRight-click dropdown menu scoped to a CSS selector, with icons, dividers, headers and server-routed actions.Docs
JobProgressTsgcHTMLComponent_JobProgressLive list of background job progress bars with status badges, cancel buttons and out-of-band fragment updates.Docs
LogViewerTsgcHTMLComponent_LogViewerStreaming log / terminal viewer with level filter, search and auto-scroll.Docs
ProgressBarTsgcHTMLComponent_ProgressBarBootstrap progress bar, striped and animated, single or stacked multi-segment.Docs
CommandPaletteTsgcHTMLComponent_CommandPaletteCtrl+K / Cmd+K quick-action launcher with substring-then-fuzzy filtering, categories and server-routed actions.Docs
EmptyStateTsgcHTMLComponent_EmptyStateThe panel a grid, a list or a search result shows when it has no rows, with an icon, title, description and up to two buttons.Docs
Chat & AI

Chat & AI

Conversational UI, from simple bubbles to a streaming AI assistant.

ComponentClassDescriptionHelp
ChatBoxTsgcHTMLComponent_ChatBoxCard-style chat bubble box with an input bar and typing indicator.Docs
ChatTsgcHTMLComponent_ChatWhatsApp-style chat with text / image / file / audio / video messages, read receipts and replies.Docs
AIChatTsgcHTMLComponent_AIChatAI assistant chat with provider / model selector, token streaming and RAG source citations.Docs
PresenceTsgcHTMLComponent_Presence"Who is online" roster as an avatar stack or list, with live status updates.Docs
Authentication

Authentication

Ready-made sign-in flows, from passwords to passkeys.

ComponentClassDescriptionHelp
LoginTsgcHTMLComponent_LoginReady-made login form / page (card, centered or full-page) with remember-me and alerts.Docs
SocialLoginTsgcHTMLComponent_SocialLoginOAuth social-login button panel (Google, Facebook, Apple, GitHub, Microsoft and more).Docs
OAuthCallbackTsgcHTMLComponent_OAuthCallbackOAuth callback / landing page in success, error or loading state with auto-redirect.Docs
WebAuthnLoginTsgcHTMLComponent_WebAuthnLoginPasswordless passkey / WebAuthn login and register widget.Docs
RolesPermissionsTsgcHTMLComponent_RolesPermissionsRole / permission matrix with a checkbox per cell and live WebSocket grant updates.Docs
UserManagementTsgcHTMLComponent_UserManagementUser administration table with roles, status, search and a per-row actions dropdown.Docs
ImpersonateBannerTsgcHTMLComponent_ImpersonateBannerAdmin impersonation banner shown while acting as another user, with a one-click exit.Docs
Infrastructure

Engine, Server & Theming

The non-visual pieces that serve the pages and keep them live.

ComponentClassDescriptionHelp
EngineServerTsgcHTMLEngine_ServerHTML engine bound to a TsgcWebSocketHTTPServer that serves rendered pages and embedded assets.Docs
HTMXEngineTsgcHTMX_Engine_Serverhtmx engine wired to the same server. It hooks the HTTP and WebSocket handlers, dispatches inbound requests and messages, and pushes or broadcasts HTML fragments to connected browsers in real time (DispatchRequest, DispatchMessage, PushFragment, BroadcastFragment).Docs
PageBuilderTsgcHTMLPageBuilderAssembles registered components into a complete responsive page, with a design-time visual editor.Docs
TemplateBootstrapTsgcHTMLTemplate_BootstrapWraps body content in a full Bootstrap 5 HTML document with theme, language and direction.Docs
ThemeControllerTsgcHTMLThemeControllerRuntime theme switcher whose Theme property (ptDefault, ptDark, ptDarkPro) applies the selected theme and shared stylesheet to the page.Docs
ThemeBuilderTsgcHTMLThemeBuilderCSS generator whose Mode (tmLight, tmDark, tmSystem) writes Bootstrap CSS variables from property values, with an optional OS-preference sync script for tmSystem.Docs
HTMXFragmentTsgcHTMX_FragmentOut-of-band htmx fragment for pushing a partial-page update from the server to the browser.Docs
HTMXRouterTsgcHTMX_RouterRouting table of Routes that matches an incoming request path and dispatches it (via HandleRequest) to that route's OnRoute handler.Docs
SEE IT RUNNING

The Feature List, Running Live

Every capability listed on this page is exercised by one of these applications.

Ad-hoc pivot builder: a Delphi web application built with sgcHTML, shown running in a browser.

Ad-hoc pivot builder

Users choose dimensions and measures; the cross-tab is rebuilt from a TFDQuery.

Open the live demo →
htmx live CRUD: a Delphi web application built with sgcHTML, shown running in a browser.

htmx live CRUD

Search-as-you-type and inline edit, swapped in as fragments with no page reload.

Open the live demo →
Responsive by default: a Delphi web application built with sgcHTML, shown running in a browser.

Responsive by default

The same components render a handheld scanner layout at phone width.

Open the live demo →

See all nine live demos →

Best value: All-AccessEvery eSeGeCe product, Premium Support included, from €1,059/year.
See All-Access pricing

Build with sgcHTML

Download the free trial and start composing web UIs in Delphi, C++ Builder or .NET.

Download Free Trial View Pricing