Teryx

Enterprise widget framework built on xhtmlx — Sencha-grade UI components in TypeScript, zero dependencies.

Live Demo · GitHub

Features

• 30+ widgets — grids, forms, charts, calendar, modals, trees, tabs, navigation, and more
• Dual API — declarative HTML (<tx-column>, data-tx-widget) or imperative JS (Teryx.grid())
• Pure SVG charts — bar, line, area, pie, donut, scatter, gauge — no canvas, no deps
• TypeScript — full type definitions for every widget, option, and callback
• Zero dependencies — 265KB ESM bundle includes everything
• CSS design system — 1100+ lines, dark mode, 12-column grid, responsive breakpoints
• xhtmlx integration — widgets generate xh-* attributes for JSON data fetching
• Organized — backoffice/frontoffice × desktop/mobile widget categories
• 352 tests — Vitest + jsdom, all passing

Install

pnpm add teryx

Or via CDN:

<link rel="stylesheet" href="https://unpkg.com/teryx/dist/teryx.css">
<script src="https://unpkg.com/xhtmlx"></script>
<script src="https://unpkg.com/teryx/dist/index.global.js"></script>

Quick Start

Declarative HTML (no JavaScript needed)

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

Imperative JavaScript

import { grid, modal, toast, chart } from 'teryx';

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

chart('#revenue', {
  type: 'bar',
  series: [{ name: 'Revenue', data: [
    { x: 'Jan', y: 4200 }, { x: 'Feb', y: 5100 }, { x: 'Mar', y: 6800 },
  ]}],
});

toast.success('Data loaded!');

Widget Catalog

Category	Widgets
Data	Grid, Tree, DataList, Pagination, PropertyGrid, Descriptions, Exporter (CSV/Excel/JSON/HTML)
Forms	Form (20+ field types), ColorPicker, Segmented, Rating, FileUpload
Charts	Bar, Line, Area, Pie, Donut, Scatter, Gauge
Calendar	Month, Week, Day views with events
Layout	Tabs, Accordion, Sidebar, Navbar, Steps, Splitter, Drawer
Overlay	Modal, Toast, MessageBox, Dropdown, ContextMenu
Content	Card, Stat/KPI, Timeline, Badge, Carousel, Progress
Frontoffice	Hero, Pricing, Testimonial, Feature grid, Footer
Mobile	NavigationView, Sheet, Pull-to-refresh List, Bottom TabBar

Project Structure

src/
├── core.ts, types.ts, utils.ts     # Framework core
├── widgets/                         # 31 core widget implementations
├── backoffice/
│   ├── desktop/                     # Enterprise admin widgets
│   └── mobile/                      # Touch-friendly admin subset
└── frontoffice/
    ├── desktop/                     # Public-facing sections
    └── mobile/                      # Mobile UX patterns

Development

pnpm install          # Install dependencies
pnpm build            # Build ESM + CJS + IIFE + types + CSS
pnpm test             # Run 352 tests
pnpm demo             # Start showcase server at localhost:3000

Browser Support

All modern browsers (Chrome, Firefox, Safari, Edge). Uses standard DOM APIs, CSS Grid, CSS Custom Properties.

License

MIT