Declarative web development platform - enhance HTML with powerful functionality through simple attributes
npm install genx-dataosTailwind gave us utility-first CSS. genX gives us utility-first JavaScript.
Inspired by htmx's philosophy that HTML should be powerful enough on its own, genX extends this idea to client-side behavior. Just as Tailwind lets you style elements with class="bg-blue-500 text-center", genX lets you add behavior with fx-format="currency" or dx-draggable="card". No JavaScript to write. No frameworks to learn. Just HTML attributes.
``html
1299.99 → $1,299.99
`
| | | | | |
|---|---|---|---|---|
| Features | Architecture | Quick Start | Modules | fmtX Examples |
| tableX Examples | Documentation | Testing | Privacy & Security | Browser Support |
| Installation | Contributing | Project Status | License | Links |
New to genX? Start with the User Guide for a beginner-friendly introduction with step-by-step examples.
- Declarative - Control everything with HTML attributes (fx-, ax-, dx-*, etc.)
- Lightweight - ~1KB bootloader, modules loaded on-demand
- Privacy-First - 100% client-side processing, no tracking, no external calls
- Accessible - WCAG 2.1 AA compliant made easy
- Fast - Designed for <16ms operations (60 FPS)
- Framework Agnostic - Works with vanilla HTML, React, Vue, Angular, htmx, or anything else
- Scans DOM for genX attributes
- Dynamically loads only required modules
- Watches for dynamic content via centralized MutationObserver
- Powered by domx for efficient DOM observation
genX uses domx-bridge to provide a single, shared MutationObserver for all modules. Instead of each module (fmtX, accX, bindX, etc.) creating its own observer, they all subscribe through domx-bridge which delegates to domx. This architecture:
- Eliminates duplication - One observer instead of 6+
- Improves performance - Single observer with filtered callbacks
- Reduces memory - No redundant DOM watchers
- Fallback support - Works without domx via native MutationObserver
- Pure functional JavaScript - No classes, no complex state
- Polymorphic processing - Handles multiple input/output formats
- Client-side only - Privacy-preserving, no external calls
- Performance-first - All operations target <16ms (60 FPS)
See Architecture Documentation for technical specifications.
See all modules in action: genX Interactive Demo
#### Option 1: CDN (Easiest)
`html`
#### Option 2: Self-Hosted
1. Copy genX files to your static directory:
`bashClone the repository
git clone https://github.com/adamzwasserman/genX.git
2. Add to your HTML
with defer attribute:`html
`Important: Always use the
attribute to ensure genX loads after the DOM is parsed without blocking page rendering.$3
`html
1299.99
2024-03-15
0.1567
`Modules
| Module | Purpose | Prefix | Status | Documentation |
|--------|---------|--------|--------|---------------|
| fmtX | Text formatting (currency, dates, numbers, phones) |
| ✅ v1.0 | Architecture |
| accX | Accessibility (WCAG, ARIA) | ax-* | ✅ v1.0 | Architecture |
| loadX | Loading states, skeletons, spinners | lx-* | ✅ v1.0 | Architecture |
| navX | Navigation & routing | nx-* | ✅ v1.0 | Architecture |
| dragX | Drag & drop | dx-* | ✅ v1.0 | Architecture |
| bindX | Reactive data binding | bx-* | ✅ v1.0 | Architecture |
| tableX | Enhanced tables | tx-* | ✅ v1.0 | Architecture |
| smartX | Auto-detection formatting | sx-* | ✅ v1.0 | - |fmtX Examples
The fmtX module supports comprehensive formatting with input type selectors:
$3
`html
42.50
4250
`$3
Supports multiple US formats and international numbers:
html
5551234567
5551234567
5551234567
+44 20 7946 0958
`Input format flexibility: Accepts raw digits, pre-formatted numbers, numbers with spaces, or international format. Gracefully handles:
- 10-digit US numbers
- 11-digit numbers with country code
- Already-formatted numbers (with parentheses, dashes, or dots)
- Extra spaces (stripped automatically)
- European/international numbers (preserved as-is)
$3
html
1710518400
2024-03-15T12:00:00Z
`$3
html
0.1567
1500000
1073741824
3.14159
`tableX Examples
The tableX module enhances HTML tables with sorting, filtering, pagination, and responsive layouts—all through declarative attributes.
$3
html
Name
Age
Join Date
Alice
30
2024-01-15
Bob
25
2024-02-20
`How it works:
- Click a column header to sort ascending
- Click again to sort descending
- Click a third time to clear sort (restore original order)
- Automatically detects data types (string, number, date)
- Shift+click to add secondary/tertiary sorts (multi-column sorting)
Multi-Column Sorting:
1. Click "Name" to sort by name
2. Shift+click "Age" to add secondary sort (now sorted by name, then age)
3. Shift+click "Join Date" to add tertiary sort
4. Visual priority badges (①②③) show sort order
Data Type Override:
html
January 15, 2024
`Accessibility:
- Keyboard navigation (Tab to headers, Enter/Space to sort)
- ARIA live regions announce sort changes
- Screen reader friendly sort indicators
- Focus styles for keyboard users
Performance:
- Sorts 100 rows in <10ms
- Sorts 1,000 rows in <100ms
- All operations target 60 FPS (<16ms)
$3
html
Product
Price
Stock
`How it works:
- Automatically hides rows not on current page
- Shows Previous/Next navigation buttons
- Displays current page info (e.g., "Page 2 of 10")
- Keyboard accessible (Tab to buttons, Enter/Space to navigate)
- ARIA live regions announce page changes
- Previous button disabled on first page
- Next button disabled on last page
Combine with sorting:
html
Name
Date
Status
`Pagination controls are automatically inserted after the table with Previous, page info, and Next buttons.
$3
tableX provides three responsive strategies for mobile-friendly tables, all implemented through CSS-only patterns:
#### Scroll Mode
Horizontal scrolling with sticky first column for important data:
html
Name
Email
Phone
Address
Status
Alice Smith
alice@example.com
(555) 123-4567
123 Main St, City, State 12345
Active
`How it works:
- Table scrolls horizontally on narrow screens
- First column (e.g., Name) stays sticky/visible while scrolling
- No data hidden, all columns accessible
- Best for tables where all data must be viewable
#### Cards Mode
Stacks rows as mobile-friendly cards on small screens:
html
Product
Price
Stock
Category
Widget Pro
$29.99
150
Electronics
`How it works:
- On screens <768px, rows become stacked cards
- Each cell displays with its column label (from
)
- Headers are hidden automatically
- Cards have borders, padding, and proper spacing
- Best for tables with moderate number of columns (3-6)Important: Add
data-label attributes to each cell matching the column header text.#### Priority Mode
Progressively hides less important columns as screen narrows:
`html
Name
Email
Phone
Department
Location
Alice Smith
alice@example.com
(555) 123-4567
Engineering
Building A
`How it works:
- Columns with
are always visible (most important)
- tx-priority-5 columns hide first (at <1024px)
- tx-priority-4 hide next (at <900px)
- tx-priority-3 hide next (at <768px)
- tx-priority-2 hide last (at <600px)
- tx-priority-1 always remain visible
- Best for tables with many columns where some data is optionalBreakpoints:
- <600px: Only priority-1 columns visible
- <768px: Priority-1 and priority-2 visible
- <900px: Priority-1, 2, and 3 visible
- <1024px: Priority-1, 2, 3, and 4 visible
- ≥1024px: All columns visible
Combine with sorting and pagination:
`html
Product
Price
Stock
Widget
$29.99
150
`All three responsive modes work together with sorting and pagination seamlessly.
$3
tableX provides client-side filtering with live search, debounced input, and multi-column support:
#### Basic Filtering
html
Name
Email
Department
Alice Smith
alice@example.com
Engineering
Bob Jones
bob@example.com
Sales
`How it works:
- Automatically generates search input above table
- Live filtering as you type (debounced for performance)
- Case-insensitive search across all columns
- Shows result count (e.g., "5 rows found")
- ARIA live regions announce filter results
- Works seamlessly with sorting and pagination
#### Multi-Column Filtering
Filter only specific columns by name:
html
Name
Email
Department
Status
`The
attribute accepts a comma-separated list of column header names (case-insensitive matching).#### Custom Debounce Delay
Control how long to wait after typing stops before filtering:
`html
`Performance:
- Default 300ms debounce prevents excessive filtering during typing
- Filters 1,000 rows in <16ms
- No page reload or server requests
#### Combine with Sorting and Pagination
All tableX features work together:
html
Name
Email
Join Date
Department
`Behavior:
1. Filter narrows visible rows
2. Sorting applies to filtered results only
3. Pagination shows filtered rows across pages
4. Result count updates as you filter
Accessibility:
- Search input has proper label and aria-label
- ARIA live regions announce filter results
- Keyboard accessible (Tab to input, type to filter)
- Screen reader friendly result counts
Accessibility (WCAG 2.1 AA Compliant)
tableX is designed for full accessibility compliance:
$3
- Tab: Navigate between sortable headers, pagination buttons, and filter input
- Enter/Space: Sort column (when focused on sortable header)
- Shift+Enter/Space: Add secondary/tertiary sort (multi-column)
- All interactive elements are keyboard accessible
$3
- Sortable Headers:
-
on all sortable headers
- scope="col" for proper column association
- aria-sort="ascending|descending|none" indicates current sort state
- tabindex="0" makes headers keyboard focusable- Pagination:
-
role="navigation" with aria-label="Table pagination"
- on Previous/Next buttons
- aria-live="polite" announces page changes- Filtering:
-
aria-label="Filter table rows" on search input
- role="status" with aria-live="polite" for result announcements
- Hidden rows marked with aria-hidden="true"- Screen Reader Announcements:
- Sort changes: "Sorted by [column] [direction], [priority]"
- Filter results: "Showing X of Y rows"
- Page changes: "Page X of Y"
$3
- Focus Indicators: Visible outline on all focusable elements
- High Contrast Mode: Increased opacity and bold indicators
- Color Independence: Sort indicators use symbols (▲▼), not just color
- Dark Mode: Full support via
$3
- Semantic HTML table structure (