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.

JWT Authentication

A new Auth: JWT authenticator wraps any other authenticator (DB, TextFile, custom) as Inner and issues a self-contained signed JWT in an HttpOnly+Secure+SameSite=Lax cookie that replaces the opaque session-id cookie. The token carries the user profile (sub, name, db, lang, roles, sid, jti, iat, exp) and is verified on every request.

Auth: JWT
  Inner: DB
    ReadUserCommandText: |
      select USER_NAME, PASSWORD_HASH from KITTO_USERS
      where UPPER(USER_NAME) = UPPER(:USER_NAME)
  SigningAlgorithm: HS256
  TokenLifetime: 3600
  SlidingThreshold: 600

Key features:

• Self-contained credential — no server-side session-id lookup; every request is verified against the embedded signature
• Sliding expiration — the auth gate re-issues the cookie with a fresh exp when approaching the threshold, keeping active users from being logged out mid-session
• Configurable algorithms — HS256 / HS384 / HS512 (no OpenSSL needed from Delphi 10 Seattle on) or RS256 / RS384 / RS512 / ES256 / ES384 / ES512 (asymmetric, OpenSSL required)
• Programmatic key registration — TKJWTSigningKeyRegistry.RegisterProvider registered in UseKitto.pas initialization centralizes the signing key for all .dpr flavors of an app (Standalone, ISAPI, Desktop, Apache) and lets the key come from a vault or secret manager in production
• Opt-in and additive — apps that stay on Auth: DB | TextFile | custom are untouched and do not pull in the underlying delphi-jose-jwt library
• Cross-app safe — the cookie path is scoped to the AppPath, and the db claim replaces the legacy kx_db cookie, eliminating the environment-leakage that could occur when multiple KittoX apps shared the same browser

The architecture leaves the door open for Phase C external identity providers: Auth: JWT / Inner: OIDC (Authorization Code + PKCE) and Inner: SAML will plug into the same envelope, mapping IdP claims into the internal token via TKJWTAuthenticator.BuildContext and rendering a redirect-button login via GetLoginUIMode = lumRedirect.

See JWT Authenticator for the full reference.

All three example apps run on JWT

The three sample applications shipped with Kitto^x (TasKitto, HelloKitto, KEmployee) all migrated to Auth: JWT, exercising three different Inner authenticators under the same envelope:

App	Inner	DB stack	ACL	Login UI
TasKitto	TasKitto (custom DB authenticator extending TKDBAuthenticator)	MSSQL / PostgreSQL / Firebird	JWT with kx_acl claim, three-tier RBAC	UserName + Password + environment combo
HelloKitto	DB (standard, MD5 password hashing)	MSSQL / PostgreSQL / Firebird	Null	UserName + Password (no combo)
KEmployee	TextFile (FileAuthenticator.txt)	Firebird EMPLOYEE.FDB	Null	UserName + Password (no combo)

The same JWT cookie shape (kx_token HttpOnly + Secure + SameSite=Lax), the same auth gate, the same sliding refresh — only the credential check changes. Demonstrates that the wrapper is fully agnostic with respect to the underlying credential storage.

Access Control via JWT Claim

A new AccessControl: JWT controller reads grant rows from the kx_acl claim that TKJWTAuthenticator snapshots into the JWT at login. The matching semantics are identical to the classic AccessControl: DB (wildcards, regex, mode-in-CSV, FALSE-priority for standard modes) but the rows live in the JWT envelope instead of the database — zero DB hit per IsAccessGranted call once the user is logged in. Closed-world: anything not covered by the claim is denied; for DB-driven evaluation use AccessControl: DB instead.

Auth: JWT
  Inner: DB
    ...

AccessControl: JWT

The framework auto-populates kx_acl at login because AccessControl: JWT is configured — no opt-in flag, no DB fallback.

A typical KittoX install has tens of permission rows; encoded as 3-element JSON arrays they add ~30–100 bytes per row, well within the 4 KB cookie spec limit. Trade-off: changes to KITTO_PERMISSIONS mid-session are reflected only after the next login (the claim is "frozen" at login time) — pick TokenLifetime accordingly.

Pair the JWT controller with a layered ACL design to keep the matrix small: a wildcard read-only baseline for everyone, role-specific allows for write modes, and per-resource denies as exceptions. See Layered design pattern for the conceptual model and TasKitto: Sample ACL design for a complete worked example with three roles (admin, user, viewer) and six grant rows.

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.

The New Project Wizard is now reachable from three entry points that share the same template engine and produce byte-identical output: KIDE^x standalone, the RAD Studio IDE plugin (KittoXIDE.bpl registers four entries under File > New > Other > KittoX Projects, one per deployment mode), and the MCP-KittoX project_create_app tool. The wizard scaffolds Win64 .dpr/.dproj for any combination of the four deployment modes (Standalone / Desktop / ISAPI / Apache), wires JWT-envelope authentication by default, and lets you point at a custom ProjectTemplates folder.

MCP-KittoX — AI Agent Server (Enterprise)

A new standalone executable, MCPKittoX.exe, ships alongside KIDE^x and exposes its functionality to AI agents via the Model Context Protocol. Claude Desktop, Claude Code, Codex, LM Studio and any MCP-compatible client can now drive Kitto^x development tasks conversationally.

Work in progress, but the foundation is shipping

The base server is functional: STDIO transport, license gating, JSON-RPC envelope with snake_case serialization, and the first 9 tools across the meta, project and models scopes (3 + 5 + 1) — including project_create_app (full project scaffold from template) and models_create_from_db (reverse-engineer Models from a database). The full live tool catalog with implementation status (Done / Todo) is on the MCP-KittoX reference page; new tools are added there as they land.

Wiring it up

MCPKittoX.exe runs over STDIO and is wired into the agent's MCP config file. For Claude Desktop on Windows, edit %APPDATA%\Claude\claude_desktop_config.json:

{
  "mcpServers": {
    "kittox": {
      "command": "C:\\Program Files\\Ethea\\KIDEX\\Bin\\MCPKittoX.exe",
      "args": ["--stdio", "--workspace=D:\\Dev\\KittoXProjects"]
    }
  }
}

Restart the client and the agent auto-discovers the tool catalog. The same executable is wired into Claude Code, Codex, LM Studio and any other MCP-compatible client. See MCP-KittoX — Quick start for the full setup walkthrough.

What you can do today (Phases 1 → 3)

Agent: "Scaffold a new KittoX app named Northwind under D:\Dev\Kitto with
        FireDAC and the standalone deployment, point Main at the Northwind
        SQL Server DB, then generate Models for every table."

→ MCP-KittoX:
  1. Generates the complete project tree (Standalone .exe by default —
     Desktop / ISAPI / Apache available on request), with default
     Auth: JWT/TextFile so the app authenticates out of the box against
     the demo FileAuthenticator.txt (admin/admin).
  2. After you adjust the connection in Config.yaml, runs
     models_create_from_db with dry_run=true to preview the proposed
     action tree (29 models, 177 fields, 13 references for Northwind),
     then with dry_run=false to write the YAML files. Output is
     byte-identical to the visual Model Wizard.
  3. Compiles green at first try.

Safety: writes are opt-in, workspace is sandboxed

The server is read-only by default. Update tools require --allow-update on the command line; delete tools require --allow-delete and follow a two-step preview → confirm pattern (a first call returns the impact — would_delete, references_count, would_break: [...] — and only a second call with confirm: true executes the change). Path traversal is blocked by --workspace=PATH: every project path is validated against this sandbox root. An invalid or expired license makes every tool throw EKXLicenseError straight into the JSON-RPC envelope, so the agent surfaces the message to the user instead of silently failing.

Architecture in one line

Built on MCPConnect (attribute-driven, multi-transport) with Neon for snake_case JSON serialization and Logify for logging. STDIO transport is shipping today; Indy HTTP transport is on the roadmap for web-based clients. Tool naming uses plural scopes for collections (models_list) and singular per-controller scopes for typed creators (view_grid_create) so the surface grows additively without breaking changes.

What's coming next

Views/Layouts/MainMenu generation, validators, locale .po updates, model update/delete with two-step confirmation, DB introspection — see the feature matrix for the full Phase 4+ roadmap with current status.

The server uses the same Registration.ini as KIDE^x: a single Enterprise license unlocks both. See MCP-KittoX for the complete reference (CLI flags, license gate, transports, full tool catalog).

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; multi-column sort (Ctrl/Cmd/Shift+click to add secondary sort keys) with position badges — new in Kitto^x, not available in Kitto 1/2/3
• IsLarge-driven grid defaults: marking a model IsLarge: True now automatically gives its List views the right behavior — the grid opens empty (user must apply a filter or click Refresh) and the pager bar is enabled with server-side pagination. Bounded lookups stay on the previous defaults (auto-load, no pager). Both defaults can still be overridden per-view via Controller/AutoOpen and Controller/PagingTools.
• 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
• User-selectable theme (new in 4.0.8): with Theme: Auto / UserSelection: True, drop a Controller: ThemeSwitcher anywhere in the GUI (login form, topbar, settings drawer) and the end user can pick Light / Auto / Dark live — choice persisted in localStorage per-app, FOUC-safe boot, instant transitions, no page reload. See Themes — User-selectable theme

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