Migration Guide

Moving to Teryx from another widget framework? This guide covers the key differences and common migration patterns.

From ExtJS / Sencha

ExtJS and Teryx share similar widget concepts (grids, trees, forms, panels), but Teryx takes a lighter approach with no class system and no framework lock-in.

Key Differences

Grid Migration

// ExtJS
Ext.create('Ext.grid.Panel', {
  renderTo: 'my-grid',
  store: { type: 'ajax', url: '/api/users' },
  columns: [
    { text: 'Name', dataIndex: 'name', sortable: true },
    { text: 'Email', dataIndex: 'email' },
  ],
});

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

Form Migration

// ExtJS
Ext.create('Ext.form.Panel', {
  renderTo: 'my-form',
  items: [
    { xtype: 'textfield', fieldLabel: 'Name', name: 'name' },
    { xtype: 'textfield', fieldLabel: 'Email', name: 'email', vtype: 'email' },
  ],
  buttons: [{ text: 'Submit', handler: function() { ... } }],
});

// Teryx equivalent
form('#my-form', {
  fields: [
    { name: 'name', label: 'Name', required: true },
    { name: 'email', label: 'Email', type: 'email', required: true },
  ],
  submitLabel: 'Submit',
  onSubmit: function(data) { ... },
});

From jQuery UI

jQuery UI provides basic widgets (dialog, accordion, tabs). Teryx offers the same widgets with more features and no jQuery dependency.

Key Differences

Dialog Migration

// jQuery UI
$('#dialog').dialog({ title: 'My Dialog', modal: true, width: 400 });

// Teryx equivalent
var m = modal({ title: 'My Dialog', content: '...', size: 'sm' });
m.open();

Tabs Migration

// jQuery UI
$('#tabs').tabs();

// Teryx equivalent
tabs('#tabs', {
  variant: 'underline',
  items: [
    { id: 'tab1', title: 'Tab 1', content: '...' },
    { id: 'tab2', title: 'Tab 2', content: '...' },
  ],
});

From AG Grid

AG Grid is a powerful data grid library. Teryx includes a comparable grid widget plus 44 other widgets in a single package.

Grid Comparison

// AG Grid
const gridOptions = {
  columnDefs: [
    { field: 'name', sortable: true },
    { field: 'email' },
  ],
  rowData: data,
};
new agGrid.Grid(document.querySelector('#grid'), gridOptions);

// Teryx equivalent
grid('#grid', {
  data: data,
  columns: [
    { field: 'name', label: 'Name', sortable: true },
    { field: 'email', label: 'Email' },
  ],
});

General Migration Tips

• Start with one widget at a time. Teryx widgets are independent — you can adopt them incrementally without replacing your entire UI.
• Use the Explorer. Every widget has interactive demos at teryxjs.github.io/teryxjs/explorer/ with source code you can copy.
• Check the API Reference. The Widget API Reference documents every widget's options, methods, and events.
• TypeScript helps. Import types and let your editor auto-complete options. Teryx's type definitions catch configuration errors at compile time.
• Mix declarative and imperative. Use data-tx-widget for simple cases and JavaScript for dynamic UIs. Both approaches produce the same output.