genX: front-end changes for humans

Business wants percentages shown with 2 decimals instead of 3? With traditional approaches, you're modifying database schemas, backend APIs, and frontend code - all fragile, all breaking things. Over and over again.

genx.software keeps display logic where it belongs: in the display layer. Your database stores raw numbers. Your backend passes them through. Your HTML template handles formatting (or any other purely front-end concern) with attributes like data-fmtx="decimal:2", data-accx="aria-label:{{statusText}} skip-if-empty", data-bindx="value:user.email validate:email".

One attribute change in your HTML template; the most robust part of your stack. No migrations, no backend deploys, no breakage. Just a few k of JavaScript reading your declarative intent and executing it at lightning speed.

Fully HATEOAS/DATAOS compliant.

⚡ Live Performance Metrics

Real-time Web Vitals demonstrating genX's high-performance optimization

Performance Score

Target: >90

FCP

Target: <1.8s

LCP

Target: <2.5s

TBT

Target: <200ms

CLS

Target: <0.1

Note: Metrics update in real-time using the browser's Performance Observer API. genX modules are optimized for maximum performance.

1. Polymorphic Notation - Four Ways, One Result

genX supports 4 notation styles that compile to identical transformations. Choose your preferred style.

Currency Formatting ($1,234.56)

1. Verbose (Beginner)

Explicit attributes

<span fx-format="currency"
      fx-currency="USD"
      fx-decimals="2">
  1234.56
</span>

2. Compact (Expert)

Colon syntax

<span fx-format="currency:USD:2">
  1234.56
</span>

3. JSON (Power User)

JSON configuration

<span fx-opts='{
  "format":"currency",
  "currency":"USD",
  "decimals":2
}'>1234.56</span>

4. CSS Class (Designer)

Class-based config

<span class="fmt-currency-USD-2">
  1234.56
</span>

Two-Way Binding with Debounce

1. Verbose (Beginner)

Explicit attributes

<input type="text"
       bx-model="username"
       bx-debounce="300">

2. Compact (Expert)

Colon syntax

<input type="text"
       bx-model="username:300">

3. JSON (Power User)

JSON configuration

<input type="text"
       bx-model="username"
       bx-opts='{"debounce":300}'>

4. CSS Class (Designer)

Class-based config

<input type="text"
       class="bind-username-300">

ARIA Label

1. Verbose (Beginner)

Explicit attributes

<button ax-enhance="button"
        ax-label="Home">
  🏠
</button>

2. Compact (Expert)

Colon syntax

<button ax-label="Home">
  🏠
</button>

3. JSON (Power User)

JSON configuration

<button ax-opts='{
  "label":"Home"
}'>🏠</button>

4. CSS Class (Designer)

Class-based config

<button class="acc-button-label-Home">
  🏠
</button>

Loading Spinner

1. Verbose (Beginner)

Explicit attributes

<div lx-loading="true"
     lx-strategy="spinner"
     lx-type="dots">
</div>

2. Compact (Expert)

Colon syntax

<div lx-loading="spinner:dots">
</div>

3. JSON (Power User)

JSON configuration

<div lx-opts='{
  "loading":true,
  "strategy":"spinner",
  "type":"dots"
}'></div>

4. CSS Class (Designer)

Class-based config

<div class="loadx-spinner-dots">
</div>

Route Navigation

1. Verbose (Beginner)

Explicit attributes

<a nx-route="/products"
   nx-transition="fade">
  Products
</a>

2. Compact (Expert)

Colon syntax

<a nx-route="/products:fade">
  Products
</a>

3. JSON (Power User)

JSON configuration

<a nx-opts='{
  "route":"/products",
  "transition":"fade"
}'>Products</a>

4. CSS Class (Designer)

Class-based config

<a class="navx-route-products-fade">
  Products
</a>

Draggable Item

1. Verbose (Beginner)

Explicit attributes

<div dx-draggable="true"
     dx-axis="x"
     dx-constrain="parent">
  Drag me
</div>

2. Compact (Expert)

Colon syntax

<div dx-draggable="x:parent">
  Drag me
</div>

3. JSON (Power User)

JSON configuration

<div dx-opts='{
  "draggable":true,
  "axis":"x",
  "constrain":"parent"
}'>Drag me</div>

4. CSS Class (Designer)

Class-based config

<div class="dragx-draggable-x-parent">
  Drag me
</div>

Live Interactive Demo - All Four Notations Working Together

Type in any of the inputs below to see how all four notation styles produce identical reactive behavior:

1. Verbose (Beginner)

Explicit attributes - most readable

Value: -

<input bx-model="polyDemo1"
       bx-debounce="500">

2. Compact (Expert)

Colon syntax - compact

Value: -

<input bx-model="polyDemo2:500">

3. JSON (Power User)

JSON configuration - flexible

Value: -

<input bx-model="polyDemo3"
       bx-opts='{"debounce":500}'>

💡 All three notations produce identical behavior:

500ms debounce delay after typing stops
Two-way reactive data binding
Automatic DOM synchronization
Same performance characteristics

Syntax Precedence (highest to lowest):

bx-debounce attribute (explicit)
bx-opts JSON configuration
bx-model="field:500" colon syntax

💡 All four notation styles produce identical behavior

Choose the style that best fits your workflow. genX supports all notations simultaneously in the same project.

fmtX - Number & Date Formatting

Declarative formatting for numbers, currency, dates, and more

0. SmartX - Auto-Detection & Normalization ✨

Automatically detects messy, real-world data and converts it into conventional formats

Input: 555%555%1212 (unconventional separators)
Detected: phone (85% confidence)
Output: (555) 555-1212

Input: USD 1,234.56 dollars (mixed format with text)
Detected: currency (90% confidence)
Output: $1,234.56

Input: 15-Mar-2024 (European date format)
Detected: date (95% confidence)
Output: Mar 15, 2024

Input: 99.5 percent (written out)
Detected: percentage (100% confidence)
Output: 99.5%

Input: +1.555.123.4567 (dots instead of dashes)
Detected: phone (95% confidence)
Output: (555) 123-4567

Input: € 1.234,56 (European number format)
Detected: currency (95% confidence)
Output: €1,234.56

genX Attributes:

<span fx-format="smart" fx-raw="$1,234.56">$1,234.56</span>

💡 How it works:

SmartX uses pattern matching with confidence scoring to detect data types. It automatically delegates to the appropriate formatter (currency, phone, date, etc.) with ~0.5-1ms execution time (~0.01ms with caching).

1. Currency Formatting with Input Types

Format numbers as currency from different input types

Input Type:

Input: 2499.99
Output:

genX Attributes:

<span fx-format="currency"
      fx-type="number"
      fx-currency="USD">

2. Percentage with Input Types

Display percentages from decimal (0-1) or percentage (0-100) values

Input Type: Decimals:

Input: 0.2567
Output:

genX Attributes:

<span fx-format="percent"
      fx-type="decimal"
      fx-decimals="0">

3. Date Formatting with Input Types

Format dates from various input types (ISO, Unix, milliseconds)

Input Type:

Output Format:

Input: 2025-03-15
Output:

genX Attributes:

<time fx-format="date"
      fx-type="iso"
      fx-date-format="long">

4. Relative Time

Show time relative to now (input times are in UTC)

Input Type: Time:

Input (UTC):
Output:

genX Attributes:

<time fx-format="relative"
      fx-type="iso">

5. File Size

Human-readable file sizes (automatic unit switching)

Size: Mode: Decimals:

Input (bytes): 1536000
Output:

genX Attributes:

<span fx-format="filesize"
      fx-binary="false"
      fx-decimals="2">

6. Decimal Control

Control decimal precision

Decimals:

Input: 3.14159265
Output: 3.14159265

genX Attributes:

<span fx-format="number"
      fx-decimals="2">

7. Large Numbers

Format with thousands separators

1000000 1000000

genX Attributes:

<span fx-format="number">

8. Compact Numbers

1K, 1M, 1B notation

Number:

Input: 1500000
Output:

genX Attributes:

<span fx-format="compact">

9. Phone Numbers

Handles various input formats, outputs to US or international style

Input Format: Output Format:

Input: 5551234567
Output:

genX Attributes:

<span fx-format="phone"
      fx-phone-format="us">

10. Time Formatting

Format time values with various styles and locales

Input: Format:

Input: 14:30:00
Output:

genX Attributes:

<time fx-format="time"
      fx-time-format="short">

11. Duration Formatting

Human-readable durations (converts seconds to hours, minutes, seconds)

Duration (seconds): Format Style:

Input (seconds): 3661
Output:

genX Attributes:

<span fx-format="duration"
      fx-duration-format="short">

accX - Accessibility Enhancements

Automatic WCAG 2.1 AA compliance and accessibility features

Live Accessibility Audit

Real-time WCAG compliance verification powered by axe-core

-- /100

Rules Passed

Violations

Methodology:

Audited using axe-core, the industry-standard accessibility engine used by Microsoft, Google, and the US government. This page dogfoods accX—all accessibility compliance is achieved using accX attributes, not raw ARIA.

1. Enhanced Buttons

Automatic ARIA attributes

Before: <button>Save</button>

genX Attributes:

<button ax-enhance="button" ax-label="Save your work">

2. Form Accessibility

Auto-linked labels and inputs

Before: Unlinked label and input Email

genX Attributes:

<label ax-enhance="label">
<input ax-enhance="input">

3. Skip Navigation

Keyboard-only skip links

Before: Regular anchor link Skip to main content

genX Attributes:

<a ax-enhance="skiplink">

4. ARIA Landmarks

Automatic landmark roles

Before: <div> with no role

Navigation content

genX Attributes:

<div ax-enhance="landmark" ax-landmark="navigation">

5. Live Updates

Screen reader announcements

Before: Static text, no announcements

Status: Ready

genX Attributes:

<div ax-enhance="live" ax-live="polite">

6. Focus Indicators

Enhanced focus visibility

Before: Browser default focus ring

genX Attributes:

<button ax-enhance="focus">

7. Form Errors

Accessible error announcements

Before: Error not linked to input

This field is required

genX Attributes:

<input ax-enhance="input" aria-invalid="true">
<div ax-enhance="error" role="alert">

8. Accessible Tooltips

Screen reader friendly tooltips

Before: No tooltip accessible to AT

genX Attributes:

<button ax-enhance="tooltip" ax-tooltip="...">

9. Modal Focus Trap

Accessible modal dialogs

Before: No focus trap, no ARIA dialog

genX Attributes:

<div ax-enhance="dialog">

10. Status Updates

Non-intrusive status messages

Before: Status not announced

5 items saved

genX Attributes:

<div ax-enhance="status" role="status">

bindX - Reactive Data Binding

Two-way data binding with automatic DOM updates

1. Two-Way Binding

Input automatically updates display

Initial: (empty)

Hello, World!

genX Attributes:

<input bx-model="name">
<span bx-bind="name">

2. Number Binding

Numeric input with live updates

Initial: 1

Quantity: 1

genX Attributes:

<input type="number" bx-model="quantity">
<span bx-bind="quantity">

3. Checkbox Binding

Boolean state binding

Initial: unchecked (false) I agree

Status: false

genX Attributes:

<input type="checkbox" bx-model="agreed">
<span bx-bind="agreed">

4. Select Binding

Dropdown selection binding

Initial: Red

Selected: Red

genX Attributes:

<select bx-model="color">
<span bx-bind="color">

5. Radio Binding

Radio button group binding

Initial: (none selected)

Small

Medium

Large

Size: -

genX Attributes:

<input type="radio" bx-model="size" value="S">
<span bx-bind="size">

6. Computed Properties

Auto-calculated values

Initial: 10 × 2 = 20

Total: $20

genX Attributes:

<input bx-model="price">
<input bx-model="qty">
<span bx-bind="total" bx-computed="price * qty">

7. Form Binding

Multiple field binding

Initial: (empty)

Full name: - -

genX Attributes:

<input bx-model="firstName">
<span bx-bind="firstName">

8. Textarea Binding

Multi-line text binding

Initial: 0 characters

Characters: 0

genX Attributes:

<textarea bx-model="bio">
<span bx-bind="bio.length">

9. Conditional Binding

Show/hide based on value

Initial: hidden

Show details

Additional details shown

genX Attributes:

<input bx-model="showDetails">
<div bx-if="showDetails">

10. Live Validation

Instant feedback

Initial: (empty)

Value:

✓ Valid email format

✗ Invalid email format

genX Attributes:

<input bx-model="email" bx-validate="email">
<span bx-if="email && email.includes('@')">✓ Valid</span>

11. Form Validation & State Management

Complete form validation with real-time feedback, multiple validation rules, and form state tracking.

Email *

Username *

Age *

Website

I accept the terms and conditions *

Form State:

Pristine: true

Dirty: false

Valid: false

Invalid: true

✨ Validation Features:

Real-time validation - Errors appear as you type
14 built-in rules - required, email, min/max, minLength/maxLength, pattern, url, number, integer, alpha, alphanumeric, phone
Custom error messages - bx-error-* attributes
Form state tracking - pristine/dirty, valid/invalid
CSS classes - bx-error, bx-valid, bx-pristine, bx-dirty on fields and form
Multiple rules per field - Space-separated validation rules

Example Code:

<form bx-form>
  <input bx-model="email"
         bx-validate="required email"
         bx-error-required="Email is required"
         bx-error-email="Invalid email">

  <input bx-model="username"
         bx-validate="required minLength:3 alphanumeric">

  <button type="submit">Submit</button>
</form>

dragX - Drag and Drop

Touch, mouse, and keyboard drag-and-drop with accessibility

1. Basic Drag & Drop

Simple draggable item

State: Item in source position

Drag me!

Drop here

genX Attributes:

<div dx-draggable="card" dx-data='{"id":1}'>
<div dx-drop-zone="cardzone" dx-accepts="card">

2. Multiple Draggables

Drag multiple items to zone

State: 3 items in list

Item 1

Item 2

Item 3

Drop items here

genX Attributes:

<div dx-draggable="item">
<div dx-drop-zone="itemzone" dx-accepts="item">

3. Type-Based Drops

Accept specific types

State: Zone accepts images only

Image

Text

Images Only

genX Attributes:

<div dx-draggable="image">
<div dx-drop-zone="imagezone" dx-accepts="image">

4. Keyboard Dragging

Space + Arrow keys

State: Keyboard accessible drag

Press Space, use arrows

Drop target

genX Attributes:

<div dx-draggable="kbd" tabindex="0">

5. Custom Ghost Image

Custom drag preview

State: Custom preview on drag

Custom preview

genX Attributes:

<div dx-draggable="custom" dx-ghost="custom">

6. Axis Constraint

Horizontal-only drag

State: Horizontal movement only

← Horizontal only →

genX Attributes:

<div dx-draggable="slider" dx-axis="horizontal">

7. Clone Mode

Leave original in place

State: Original stays, copy created

Drag to copy

Drop copies here

genX Attributes:

<div dx-draggable="template" dx-clone="true">

8. Revert Animation

Return to start if invalid

State: Reverts on invalid drop

Try dropping outside

Wrong type

genX Attributes:

<div dx-draggable="revert" dx-revert="invalid">

9. Grid Snapping

Snap to 50px grid

State: Snaps to 50px increments

Snaps to grid

genX Attributes:

<div dx-draggable="grid" dx-snap="50">

10. Drag Events

Track drag lifecycle

State: Events logged on drag

Drag to track events

genX Attributes:

<div dx-draggable="tracked">

loadX - Loading States

Declarative loading indicators with zero layout shift

1. Spinner Loader

Circle spinner animation

genX Attributes:

<div lx-strategy="spinner"></div>

2. Skeleton Screen

Content placeholder with shimmer

genX Attributes:

<div lx-strategy="skeleton" lx-rows="3"></div>

3. Progress Bar

Determinate progress indicator

genX Attributes:

<div lx-strategy="progress" lx-value="50"></div>

4. Fade Transition

Smooth opacity fade effect

Loading content...

genX Attributes:

<div lx-strategy="fade">Content</div>

5. Dots Spinner

Alternative spinner style

genX Attributes:

<div lx-strategy="spinner" lx-spinner-type="dots"></div>

6. Custom Duration

Control animation timing

Fast (500ms)
genX Attributes:

<div lx-strategy="spinner" lx-duration="500"></div>

7. All Strategies

Side-by-side comparison

spinner

skeleton

progress

Content

fade

navX - Navigation Patterns

Accessible navigation with keyboard support and ARIA

1. Breadcrumb Navigation

Auto-generated from URL path

genX Attributes:

<nav nx-breadcrumb="hierarchical">

2. Tab Navigation

Click tabs or use arrow keys

Overview content goes here.

Features: Fast, accessible, declarative.

Pricing: Free and open source!

genX Attributes:

<div nx-tabs>
  <div role="tablist">
    <button role="tab">Tab 1</button>
  </div>
  <div role="tabpanel">Content</div>
</div>

3. Dropdown Menu

Click or press Enter/Space/↓

genX Attributes:

<div nx-dropdown>
  <button>Menu ▼</button>
  <ul hidden>...</ul>
</div>

4. Mobile Menu

Hamburger with focus trap + Escape

genX Attributes:

<div nx-mobile>
  <button data-mobile-trigger>☰</button>
  <nav data-mobile-menu hidden>...</nav>
</div>

5. Scroll Spy

Scroll the content area - nav highlights current section

Introduction

Welcome to navX scroll spy. As you scroll through this content, the navigation on the left will highlight the current section.

Features

Uses IntersectionObserver for performance. Works with any scrollable container. Supports custom thresholds.

Usage

Add nx-scroll-spy to your nav element. Link hrefs should match section IDs.

genX Attributes:

<nav nx-scroll-spy>
  <a href="#section1">Section 1</a>
</nav>

6. Sticky Navigation

Make navigation stick to viewport on scroll

The module navigation at the top of this page uses nx-sticky - scroll up to see it stick to the viewport.

genX Attributes:

<nav nx-sticky>...</nav>

7. Smooth Scrolling

Built into nx-nav automatically

genX Attributes:

<nav nx-nav>
  <a href="#section">Go</a>
</nav>

6. tableX - Table Enhancements

Declarative table sorting, pagination, and responsive layouts with tx-* attributes

1. Table-Level Sorting

Make all columns sortable with one declaration. Auto-detects data types. Three-state toggle: ascending → descending → clear.

Name	Age	Department	Hire Date	Salary
Alice Johnson	32	Engineering	2022-03-15	95000
Bob Smith	28	Marketing	2023-01-10	72000
Charlie Brown	45	Sales	2020-07-22	88000
Diana Prince	29	Engineering	2023-05-03	98000
Eve Martinez	38	HR	2021-11-18	76000
Frank Zhang	51	Engineering	2019-02-14	105000
Grace Lee	26	Design	2023-08-01	68000
Henry Wilson	42	Sales	2020-12-05	91000

<table tx-sortable>
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Department</th>
      <th>Hire Date</th>
      <th>Salary</th>
    </tr>
  </thead>
  <tbody>
    <!-- Table rows -->
  </tbody>
</table>

2. Column-Level Sorting

Add sorting to specific columns one at a time with tx-sortable on individual headers.

Product	Price	Actions
Widget A	29.99
Widget B	19.99
Widget C	39.99

<table>
  <thead>
    <tr>
      <th tx-sortable>Product</th>
      <th tx-sortable>Price</th>
      <th>Actions</th> <!-- Not sortable -->
    </tr>
  </thead>
</table>

3. Custom Sort Values

Use data-value attribute to provide sortable values different from display text.

Status	Priority
🟢 Active	Low
🔴 Critical	High
⚪ Inactive	Medium

<td data-value="2">🟢 Active</td>
<td data-value="1">🔴 Critical</td>
<td data-value="3">⚪ Inactive</td>

Keyboard Shortcuts

⚡ Live Performance Metrics

1. Polymorphic Notation - Four Ways, One Result

Currency Formatting ($1,234.56)

1. Verbose (Beginner)

2. Compact (Expert)

3. JSON (Power User)

4. CSS Class (Designer)

Two-Way Binding with Debounce

1. Verbose (Beginner)

2. Compact (Expert)

3. JSON (Power User)

4. CSS Class (Designer)

ARIA Label

1. Verbose (Beginner)

2. Compact (Expert)

3. JSON (Power User)

4. CSS Class (Designer)

Loading Spinner

1. Verbose (Beginner)

2. Compact (Expert)

3. JSON (Power User)

4. CSS Class (Designer)

Route Navigation

1. Verbose (Beginner)

2. Compact (Expert)

3. JSON (Power User)

4. CSS Class (Designer)

Draggable Item

1. Verbose (Beginner)

2. Compact (Expert)

3. JSON (Power User)

4. CSS Class (Designer)

Live Interactive Demo - All Four Notations Working Together

1. Verbose (Beginner)

2. Compact (Expert)

3. JSON (Power User)

Syntax Precedence (highest to lowest):

fmtX - Number & Date Formatting

0. SmartX - Auto-Detection & Normalization ✨

1. Currency Formatting with Input Types

2. Percentage with Input Types

3. Date Formatting with Input Types

4. Relative Time

5. File Size

6. Decimal Control

7. Large Numbers

8. Compact Numbers

9. Phone Numbers

10. Time Formatting

11. Duration Formatting

accX - Accessibility Enhancements

Examples

Live Accessibility Audit

1. Enhanced Buttons

2. Form Accessibility

3. Skip Navigation

4. ARIA Landmarks

5. Live Updates

6. Focus Indicators

7. Form Errors

8. Accessible Tooltips

9. Modal Focus Trap

Dialog Title

10. Status Updates

bindX - Reactive Data Binding

1. Two-Way Binding

2. Number Binding

3. Checkbox Binding

4. Select Binding

5. Radio Binding

6. Computed Properties

7. Form Binding

8. Textarea Binding

9. Conditional Binding

10. Live Validation

11. Form Validation & State Management

Form State:

✨ Validation Features:

Example Code: