Component
A persistent TypeScript object associated with its real DOM. Lifecycle, events and content stay where you expect them.
object → DOM TypeScript · Web + Desktop · MIT
Build applications.
Not markup.
A TypeScript framework for dense, professional interfaces. Persistent objects, real DOM, typed events — and JSX when it makes the tree easier to read.
$
npm install x4jsDEVICE / PRESS #04
● NOMINALHydraulic Press
PRESSURE184 bar
TEMPERATURE62.4 °C
CYCLE2.81 s
Pressure historyLAST 60 SEC
Recent eventsTIME
Cycle completed
Pressure stabilized
Temperature threshold
Control Center · concept application built to show the kind of interface x4 is made for.
Most UI frameworks start with <div>.
x4 starts with what the application is.
01 / MODEL
A small mental model.
Use the language and the browser when they already solve the problem. Add framework concepts only where they earn their place.
State
Observable application state through Proxy. Read and mutate ordinary JavaScript-shaped data.
state.count++Events
Local communication between components and objects. Typed, explicit, unsurprising.
button.on('click', ...)GlobalEvent
Application-wide messages. Transport can be local or remote without leaking into the views.
event ≠ transport02 / JUST TYPESCRIPT
Objects that stay objects.
Components are persistent instances. Create them, keep references, call methods, listen to events. No render loop to appease.
- Real DOM, updated directly
- Classes when identity and lifecycle are useful
- Modules and imports instead of a container
- CSS and CSS variables for styling
device-panel.tsTypeScript
class DevicePanel extends VBox {
constructor(props: DevicePanelProps) {
super(props);
this.setContent([
new Label({ text: props.name }),
new Gauge({ min: 0, max: 100 }),
new Button({ label: "Restart" })
]);
}
}Persistent instance · real DOM · typed API
03 / UI TOOLKITA complete UI toolkit.
A complete UI toolkit.
Not just primitives.
x4 ships with more than 50 components, the CSS foundation they use, and a theme system based on CSS variables. Start with the defaults, create your own controls, or integrate third-party UI components when they fit the job.
READY TO USE50+
Components included.
From basic inputs and layouts to the controls real applications eventually need.
BoxHBoxVBoxStackBoxAssistBoxGridBoxMasonryBox
FormPopupDialogMessageBoxInputBoxPromptBoxProgressionBox
MenuDropdownListNotificationBtnGroupTabs
ButtonInputTextEditTextAreaCheckboxRadioSwitchSelectComboboxSliderColorInputColorPickerRating
LabelSimpleTextIconLinkImageVideoCanvasSvgComponent
ListboxGridviewTreeviewSpreadsheetPropertyGrid
GaugeProgressTickLineSaturation
CalendarBreadcrumbsKeyboardPanel
FileDropFileDialogScrollViewViewportFlexSpaceCSizerHSizerVSizerMonacoEditor
Drag & DropSVGRouterPDF Generationi18n ready
EXTENDComponent → class
Easy to extend.
Your own controls use exactly the same Component model as the built-ins. A custom component is just a TypeScript class with the lifecycle and DOM you need.
class StatusBadge extends Component {
constructor(props: StatusBadgeProps) {
super(props);
this.setContent(props.text);
}
}THIRD-PARTYreal DOM
Bring other components too.
x4 does not require every control to come from x4. Third-party UI libraries can live alongside x4 components when they fit the job.
your app+x4+vendor UIone browser DOM
CSS + THEMESbuilt in
The visual system comes with it.
Component styles, layouts, visual states and theming are part of x4. The default theme is usable as-is and CSS variables keep product customization direct.
/* override theme variables */CSS variables · your CSS · same real DOMBUILT FOR APPLICATIONS
The difficult UI is not an afterthought.
x4's natural habitat is software people work in: data-heavy screens, industrial tools, dashboards, business applications and desktop-like interfaces.
DATA
Gridview + Spreadsheet
Tabular data is a first-class use case, backed by specialized DataStore structures.
IDDEVICESTATUSVALUE204Press #04Nominal184 bar205Motor #12Nominal1460 rpm206Pump #02Check71 °C
Treeview
Hierarchies and navigation for serious application shells.
⌄ Plant 01
├ Line A
│ └ Press #04
└ Line B
├ Line A
│ └ Press #04
└ Line B
Forms + Dialogs
Structured editing without rebuilding basic application controls yourself.
Hydraulic Press
72 °C
Gauge + Chart
Live operational data fits naturally beside the rest of the interface.
62.4°
04 / JSXJSX when it helps.
JSX when it helps.
Same runtime.
JSX is optional syntax, not an application architecture. Use object construction for directness, JSX for readable trees — both create x4 Components and real DOM.
this.setContent([
new Label({ text: "Temperature" }),
new Gauge({ min: 0, max: 100 })
]);this.setContent(
<VBox>
<Label text="Temperature" />
<Gauge min={0} max={100} />
</VBox>
);05 / SHIPPING
Ship only what you use.
The npm package ships TypeScript sources. Your bundler sees x4 and your application in the same module graph, so ordinary tree-shaking can remove components you never import.
TypeScript sourceTree-shakeableNo virtual DOM runtime
YOUR APPLICATIONimports
ButtonFormGridviewSpreadsheetMonaco
↓ tree shaking
bundle.jsonly what you use
Bundle measurements will be published from reproducible builds.06 / DEVELOPER EXPERIENCEFast feedback.
Fast feedback.
No ceremony.
x4 keeps the development loop short: TypeScript, integrated tooling and HMR for immediate feedback while you work.
HMRSee changes immediately without restarting the application.
TypeScript end to endYour application and x4 stay in the same module graph.
Simple toolingCreate, build and run without adding another framework layer.
i18n readyBuild multilingual interfaces without changing the component model.
Try x4
$ npm install x4js
$ x4js create basic
$ cd basic
$ npm install
$ x4js build
server listening on 127.0.0.1:300007 / HUMANS + MACHINESReadable by humans.
aicontext.mdGenerated from TypeDocReal API signatures →Readable by humans.
Predictable for machines.
x4 includes a generated AI context with real API signatures. Agents can also inspect the TypeScript sources shipped in node_modules/x4js.