Teryx — Enterprise Widget Framework

Get started in 3 steps

From zero to interactive UI in under a minute.

1

Install

pnpm add teryx

2

Import

import { grid } from 'teryx';
import 'teryx/css';

3

Render

grid('#app', {
  source: '/api/users',
  columns: [
    { field: 'name', label: 'Name' },
    { field: 'email', label: 'Email' },
  ],
});

Why Teryx?

Built for developers who need production-ready UI components without the overhead.

0

Zero Dependencies

No React, no Vue, no jQuery. Just xhtmlx under the hood — nothing else.

45

45+ Widgets

Grids, charts, forms, kanban, calendar, tree, modals, and more — all included.

TS

TypeScript Native

Written in TypeScript. Full type definitions for every widget, option, and event.

</>

Dual API

Declarative HTML with data-tx-* attributes or imperative JavaScript — your choice.

Interactive widget demos

These are real widgets rendered live on this page — not screenshots.

Data Grid

Charts

Form

Tabs + Timeline

Two ways to build

Use declarative HTML for simple cases, imperative JS for full control — or mix both.

Declarative HTML

<div data-tx-widget="grid"
     data-tx-source="/api/users"
     data-tx-paginated
     data-tx-searchable>
  <tx-column field="name" label="Name" sortable></tx-column>
  <tx-column field="email" label="Email"></tx-column>
  <tx-column field="role" label="Role" filterable></tx-column>
</div>

Imperative TypeScript

import { grid } from 'teryx';

grid('#my-grid', {
  source: '/api/users',
  paginated: true,
  searchable: true,
  columns: [
    { field: 'name', label: 'Name', sortable: true },
    { field: 'email', label: 'Email' },
    { field: 'role', label: 'Role', filterable: true },
  ],
});

Built for performance

Small bundle, fast rendering, zero runtime overhead.

45+

Widgets

400KB

Bundle (all widgets)

1000+

Tests

0

Dependencies