Getting Started

Teryx is an enterprise-grade widget framework built on xhtmlx. It provides 30+ TypeScript components with both declarative HTML and imperative JavaScript APIs, zero external dependencies.

Installation

Package Manager

npm install teryx
# or
pnpm add teryx
# or
yarn add teryx

CDN / Script Tag

For quick prototyping, include the global build directly:

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

This exposes all widgets under the global Teryx namespace.

Quick Start

ES Module (Recommended)

import { grid, modal, toast, form } from 'teryx';
import 'teryx/css';

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

Global Script

<script>
  Teryx.grid('#my-grid', {
    source: '/api/users',
    columns: [
      { field: 'name', label: 'Name', sortable: true },
      { field: 'email', label: 'Email' },
    ],
  });
</script>

Core Concepts

Widget Functions

Every widget is a function taking a CSS selector (or DOM element) and an options object. It returns a widget instance with methods for programmatic control.

const tabsInstance = Teryx.tabs('#my-tabs', {
  variant: 'underline',
  items: [
    { id: 'tab1', title: 'Overview', content: '<p>Content</p>' },
    { id: 'tab2', title: 'Details', content: '<p>More</p>' },
  ],
});
tabsInstance.activate('tab2');

Declarative HTML

Teryx auto-discovers widgets via data-tx-widget attributes. See the Declarative HTML guide.

Configuration

import { configure } from 'teryx';
configure({
  prefix: 'tx',
  autoInit: true,
  toastPosition: 'top-right',
  toastDuration: 5000,
  debug: false,
});

Event Bus

import { on, emit } from 'teryx';
on('user:selected', (user) => console.log(user));
emit('user:selected', { id: 1, name: 'Alice' });

Internationalization

import { setLocale } from 'teryx';
setLocale({ search: 'Buscar', noData: 'Sin datos', loading: 'Cargando...' });