The Tailwind of Frontend Behavior
genX
Frontend devs, unite. Stop waiting on the backend.
Formatting, tables, binding, accessibility, 50+ UI components — all from HTML attributes.
Define behavior once. Use it everywhere. Keep your code DRY.
Declare Independence
Tired of waiting on backend PRs for UI changes? Format currencies, sort tables, bind data, add accessibility — ship it yourself, today. No API changes. No deploy coordination. Just HTML.
Before: Traditional JavaScript
Create a formatter, query elements, attach listeners, handle updates...
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD'
});
document.querySelectorAll('.price').forEach(el => {
el.textContent = formatter.format(
parseFloat(el.dataset.value)
);
});After: genX
One attribute. Done.
<span fx-format="currency">1299.99</span>
<!-- Displays: $1,299.99 -->Nine Modular Components
Currency, dates, numbers, phones
WCAG accessibility
Loading states & skeletons
Client-side routing
Drag & drop
Reactive data binding
Sorting, filtering, pagination
Auto-detection formatting
50+ UI components with declarative triggers
Contributed by Shawna Staff
uiX: Complete Component Library
50+ production-ready UI components — buttons, modals, tabs, accordions, alerts, forms, and more. All controlled through declarative HTML attributes. No custom JavaScript required.
Contributed by Shawna Staff
Declarative Triggers
Open modals, switch tabs, toggle accordions — all with HTML attributes like ux-opens and ux-toggles
CSS Custom Properties
Full theming support via --ux-* variables. Customize colors, spacing, and more without touching CSS files.
Accessible by Default
ARIA attributes, keyboard navigation, and focus management built into every component.
Interactive Playground
Configure components visually, see live previews, and copy the generated HTML. Try it now →
Why genX?
HTML-First
Control everything with attributes. Your HTML becomes self-documenting.
On-Demand Loading
~1KB bootloader scans your page. Only used modules are loaded.
100% Client-Side
No tracking. No external calls. GDPR compliant by design.
WCAG 2.1 AA
Accessibility built in. Screen reader friendly, keyboard navigable.
60 FPS Target
All operations complete in under 16ms. No jank, no lag.
Define Once, Use Everywhere
Stop copy-pasting formatting logic. One attribute, consistent behavior across your entire codebase.
Works Everywhere
Static sites, SPAs, server-rendered apps. Vanilla HTML, React, Vue, Django, Rails — wherever you have HTML.
Get Started in Seconds
<script src="https://cdn.genx.software/v1/bootloader.js" defer></script>That's it. Start using genX attributes immediately.