What's New in Kitto^x 4.0

Kitto^x is the fourth generation of the Kitto framework. It represents a complete rewrite of the client-side technology while preserving Kitto's core philosophy: declarative YAML-driven development where the server generates the UI.

Why Kitto^x

Kitto 3 was based on ExtJS, a paid commercial library that required a corresponding Delphi server-side class for every client-side component. This tight coupling made the framework rigid, expensive, and hard to evolve.

Kitto^x replaces ExtJS with HTMX + AlpineJS + CSS custom properties — a lightweight, open-source client stack where the server generates standard HTML fragments and HTMX handles partial page updates transparently.

	Kitto 1/2/3	Kittox 4.0
Client library	ExtJS 3/4/7 (commercial, ~1.5MB)	HTMX + AlpineJS (~30KB total)
UI generation	Server emits ExtJS JavaScript code	Server emits HTML + HTMX attributes
Icons	ExtJS icon sprites (PNG)	2122 Material Design SVG icons, 5 styles
Theming	ExtJS themes (SCSS compilation)	CSS custom properties (instant light/dark/auto)
License	Apache 2.0 + ExtJS commercial	Apache 2.0 (core) + AGPL/Commercial (enterprise)
Client-side coding	Required for any customization	Almost zero — HTML templates suffice

New Client Architecture

The server generates HTML fragments that HTMX swaps into the DOM. No JavaScript framework to learn. All interactions (pagination, filters, form submit, navigation) use HTMX attributes (hx-get, hx-post, hx-target, hx-swap) declared directly in the generated HTML.

Client-side libraries are loaded only when needed via the TKXScriptRegistry — enterprise modules (Chart.js, EventCalendar) register their JS/CSS in the Delphi initialization section and the page template emits them automatically.

New Controllers

Core (Open Source)

Controller	Description	Kitto 3 equivalent
List	Data grid with CRUD toolbar, paging, sorting, column layouts, row colors, card mode	TKExtGridPanel
GroupingList	Collapsible group headers with expand/collapse	TKExtGroupingGridPanel
Form	Data-aware editing with field pages, detail tabs, ViewMode/EditMode	TKExtFormPanelController
Wizard	Multi-step forms with Back/Next/Finish and per-step validation	new
BorderPanel	Layout with North/South/West/East/Center regions	TKExtBorderPanelController
TabPanel	Tabbed container with closable tabs	TKExtTabPanelController
FlexPanel	CSS Flexbox layout with configurable gap and wrapping	new
TreePanel	Hierarchical menu tree	TKExtTreePanel
TilePanel	Metro-style colored tile menu (mobile-friendly)	new
TemplateDataPanel	Custom HTML templates for read-only data display	new
HtmlPanel	Static HTML content	TKExtHtmlPanel
StatusBar	Status bar with text and icon	TKExtStatusBar
ToolBar	Horizontal toolbar menu	TKExtToolbar

Enterprise (AGPL-3.0 / Commercial)

Controller	Description	Kitto 3 equivalent
ChartPanel	Chart.js charts (bar, line, pie, doughnut)	TKExtChartPanel (ExtJS charts)
CalendarPanel	Interactive event calendar (month/week/day)	new
GoogleMap	Google Maps with geocoding and markers	new
Dashboard	KPI cards with auto-refresh	new

Server-Side Store

Kitto^x maintains data stores in server memory across HTTP requests, bringing back a capability from Kitto 1 that was lost in Kitto 2/3:

• Record state tracking: New, Clean, Dirty, Deleted
• Transactional master-detail save: master + all detail records saved in a single database transaction (INSERT/UPDATE/DELETE cascading)
• Detail CRUD in memory: add/edit/delete detail records without DB round-trips until final Save All
• Blob lazy-loading: blob fields loaded on demand from the session store, no full SELECT needed
• ViewMode/EditMode state machine: forms toggle between read-only and edit mode with Save All for master-detail

Mobile Support

Automatic mobile detection with fullscreen rendering on phones and tablets:

• IsModal: controls whether a view appears as a dialog overlay (True for forms) or inline in a tab (False for lists)
• Maximized: forces the dialog to fill the viewport — automatically True on mobile
• AllowClose: controls the close button visibility (False for Login)
• kxApp.openView(): single JS function for view opening from any menu type — desktop opens in tabs, mobile opens fullscreen
• Home view selection: HomeTinyView (phone), HomeSmallView (tablet), HomeView (desktop)
• body.kx-mobile CSS class for mobile-specific styling

See Mobile Support for details.

Attribute-Based Routing (RTTI)

Inspired by MARS/WiRL, Kitto^x features a modular URL routing system based on Delphi custom attributes and RTTI:

[TKXPath('/kx/view/{ViewName}')]
TKXChartHandler = class
public
  [TKXPath('/chart-data')]
  [TKXGET]
  procedure HandleChartData(
    [TKXPathParam('ViewName')] const AViewName: string;
    [TKXContext] ADataView: TKDataView);
end;

This enables enterprise modules to register their own URL handlers independently — just include the unit and it auto-registers. See Attribute-Based Routing.

Open Core Licensing

Component	License
Core (List, Form, Wizard, FlexPanel, routing, database, auth)	Apache 2.0 — free for any use
Enterprise (Chart, Calendar, Map, Dashboard)	AGPL-3.0 (open-source apps) / Commercial (closed-source)
KIDEX (Visual IDE)	Commercial only

Separate packages: KittoXCore.dpk (core) and KittoXEnterprise.dpk (enterprise). See Licensing.

Five Deployment Modes

Mode	Description	New in Kittox
Standalone	VCL desktop or Windows Service with Indy HTTP	inherited from Kitto 3
Desktop Embedded	WebView2 inside a VCL window	new
Console	Headless server (Docker-friendly)	new
ISAPI (IIS)	Native IIS integration	inherited, fully reworked
Apache Module	Native Apache 2.4 integration	inherited, fully reworked

All examples (HelloKitto, TasKitto, KEmployee) include projects for all four modes.

Desktop Embedded Mode

Run your Kitto^x application inside a native Windows window with an embedded Edge WebView2 browser — no browser chrome, no address bar, looks like a traditional desktop app. See Desktop Embedded.

KIDEX — Visual IDE (Enterprise)

The visual IDE has been modernized with RTTI-based property discovery — replacing 215 manual YAML template files with 6 custom Delphi attributes (YamlNode, YamlContainer, YamlSubNode, etc.). The IDE automatically discovers available properties, enums, and sub-nodes from annotated Delphi classes.

Other Improvements over Kitto 3

• Performance: TStringBuilder optimization, AppName cache, FireDAC connection pooling
• Unified Editor Factory: centralized input rendering shared between forms and filter panels
• Draggable dialogs: all modal dialogs can be moved by dragging the title bar
• Toast notifications: brief messages after save/delete operations
• Error handling: DB errors shown as non-fatal dialogs (session preserved), driver prefixes stripped from messages
• Help button: configurable per-view help URL in forms and list toolbars
• Column sorting: click-to-sort with ascending/descending toggle and sort arrows
• Session safety: atomic session creation, session-lost detection with auto-reload
• Timeout handling: configurable AJAX timeout with Retry/Reset dialog
• Localization: per-session language selection, GNU gettext integration
• CSS theming: light/dark/auto themes via CSS custom properties, configurable primary color and font

Migration from Kitto 3

The YAML metadata format is largely compatible. The main changes are:

• Controller names: GridPanel → List, FormPanel → Form, etc.
• ExtJS-specific properties (theme names, ext panel properties) are replaced by HTML/CSS equivalents
• UseKitto.pas replaces Kitto.Ext.All with Kitto.Html.All + optional Kitto.Web.Enterprise
• The .dpr entry point remains TKStart.Start for standalone mode

See also

• Release Notes — detailed version history
• Installation — setup or manual install
• Getting Started — create your first app