typescript-ui

A web-based layout manager and UI component framework written in TypeScript. Provides desktop-style user interfaces in the browser using absolute positioning, with a rich set of reusable components and layout algorithms.

Notice: Developed and tested on Chrome. Firefox and Safari compatibility is not verified.

Documentation

AI agents: start at the machine-readable capability manifest — https://jimka.github.io/typescript-ui/llms.txt (also at node_modules/@jimka/typescript-ui/llms.txt after install). It indexes every component, layout, and data-layer class so you build with what exists instead of reinventing it.

Full documentation lives at https://jimka.github.io/typescript-ui/ (deployed via GitHub Pages on push to master).

Highlights:

• Installation & TypeScript setup — npm install @jimka/typescript-ui plus moduleResolution: "bundler" notes.
• Mental model — absolute positioning, doLayout(), why this is not React.
• Components — full catalog (50+).
• Layouts — Border, Split, Tab, Grid, and 13 more.
• Data layer — Model, Store, Proxy, Binding.
• Theming — runtime-switchable design tokens.
• API reference — TypeDoc-generated browser of every public class.

Demo application

SQLAdmin is a complete application built with this library, and the most thorough worked example of it — a web-based PostgreSQL admin client with an object navigator, an editable data grid, a SQL workspace, and interactive schema and role diagrams. It was written in part to exercise @jimka/typescript-ui at real-application scale.

Quick install

npm install @jimka/typescript-ui

import { ThemeManager, DarkTheme } from '@jimka/typescript-ui/core';
import { Window } from '@jimka/typescript-ui/overlay';

import { Button } from '@jimka/typescript-ui/component/button';

// ModernTheme is applied automatically when the core module is imported.
// Call setTheme only to switch themes (e.g. dark mode):
ThemeManager.setTheme(DarkTheme);

const win = new Window('Hello');
win.setContentFactory(() => new Button('Click me'));
win.show();

Glyphs

This library ships ~2,860 SVG icons from Font Awesome Free 7.2.0 (CC BY 4.0). Icons are opt-in by explicit registration — the runtime registry starts empty so the bundler can tree-shake away unused icons.

import { Glyph } from '@jimka/typescript-ui/component/display';
import { xmark } from '@jimka/typescript-ui/glyphs/solid/xmark';
import { pen_to_square } from '@jimka/typescript-ui/glyphs/solid/pen_to_square';
import { plus } from '@jimka/typescript-ui/glyphs/solid/plus';

Glyph.register(xmark, pen_to_square, plus);

new Glyph("xmark");           // renders the X icon
new Glyph("pen-to-square");   // renders the edit pencil
new Glyph("plus");            // renders the plus icon

The string passed to new Glyph(name) is the upstream Font Awesome name (with hyphens). The JS identifier is sanitized: - becomes _ and identifiers starting with a digit get a leading _ (so arrow-right exports as arrow_right, 500px as _500px, try as _try).

Library components that internally use glyphs (Tree row chevrons, Notification badges) register their own dependencies automatically — consumers only need to register the glyphs they reference directly.

License

Licensed under the PolyForm Noncommercial License 1.0.0 — source-available, not OSI-approved. Free for personal, educational, and other noncommercial use.

Commercial use is not permitted by default, and "commercial" is read broadly. The license covers any purpose related to running a business — including internal tools, and use at a company whose product has nothing to do with this library — not just redistributing or reselling it.

Commercial licenses are available on request. If you want to use this commercially, or you are not sure whether your use qualifies, open an issue at github.com/jimka/typescript-ui/issues — I would rather answer the question than have you guess.

Third-party material redistributed with this project (Font Awesome Free icons, the Manrope font, and d3 charting math) is covered by its own license — see THIRD-PARTY-NOTICES.md for the full attributions and license texts, and LICENSE-FONTAWESOME.md for the Font Awesome specifics.