HUX UI Framework

Table of Contents

• Overview
• Project Structure
• Packages Overview
• Getting Started
  • Prerequisites
  • Installation
  • Development Server
  • Building & Bundling Packages
  • Linting & Formatting
• Contribution Guidelines
• Changelog
• Roadmap
  • Future Plans
• License
• Contact

Overview

Hux is a modern, modular UI framework written in TypeScript. It follows a monorepo architecture with multiple packages for core system logic, UI controls, and demo applications.

Key features include

• TypeScript-first architecture

• Modular, reusable components

• Incremental builds using esbuild

• Preconfigured ESLint + Prettier setup with Unicorn, SonarJS, and TypeScript rules

• Dev server with hot rebuilds for fast iteration

• CI/CD ready

Project Structure

hux/
├── apps/                  # Applications
│   └── demo/              # Demo app
├── packages/              # Monorepo packages
│   ├── core/              # Core system: DI, renderer, change detection
│   └── controls/          # UI components (Button)
├── tools/                 # Build scripts and developer tools
│   ├── build/             # build scripts
│   └── dev-server/        # Dev server
├── tsconfig.base.json     # Base TypeScript configuration
├── tsconfig.json          # Root TypeScript configuration
├── package.json           # Root manifest & workspace config
├── eslint.config.js       # ESLint flat config
├── prettier.config.js     # Prettier configuration
├── README.adoc            # Project overview & getting started
├── CONTRIBUTING.adoc      # Contribution guidelines
├── CHANGELOG.adoc         # Changelog for all packages
├── ROADMAP.adoc           # Development roadmap
└── LICENSE                # MIT License

Packages Overview

Package	Description
📦 core	Core system: dependency injection, renderer, change detection CHANGELOG
🎛️ controls	UI components (Button, Input, etc.) CHANGELOG

Getting Started

Prerequisites

• Node.js >= 20

• npm >= 10

• Git

Installation

git clone https://github.com/a-linko/hux.git
cd hux
npm install

Development Server

Start the dev server with automatic rebuilds

npm run dev

Open [http://localhost:8000] in your browser.

Building & Bundling Packages

Compile all packages (TypeScript)

npm run build

Clean build outputs

npm run clean

Build individual packages (TypeScript only)

cd packages/core && npm run build
cd packages/controls && npm run build

Bundle all packages (distributable output)

npm run bundle

Bundle individual packages

npm run bundle core
npm run bundle controls

Linting & Formatting

Lint the project and auto-fix issues

npm run lint

Check linting without fixing

npm run lint:check

Format all files with Prettier

npm run format

Check format without fixing

npm run format:check

Script	Description
npm run dev	Start dev server with hot reload
npm run build	Compile TypeScript for all packages
npm run bundle	Bundle all packages into distributable formats
npm run clean	Clean all build outputs
npm run lint	Lint project and auto-fix issues
npm run lint:check	Check linting only
npm run format	Format files with Prettier
npm run format:check	Check format only

Contribution Guidelines

Please follow coding conventions, ESLint rules, and Prettier formatting. See CONTRIBUTING for detailed instructions.

Changelog

See Changelog for the latest changes.

Roadmap

See full roadmap: ROADMAP 2026

Future Plans

The HUX UI Framework aims to become a modern, modular, and highly performant UI library.

Key goals and planned features include

• Modular Component System

  • Components as reusable WebComponents

  • Template-based, JSON-based, and programmatic creation (new HUX.ui.Button(…​))

  • BaseComponent for minimal per-component logic

  • Declarative templating

• Reactive Architecture

  • Signals for reactive data flow

  • Decorators for Inputs, Outputs, Events, Watches, Dependency Injection

  • Efficient OnPush-style Change Detection

  • Lazy loading, memoization, debouncing for performance

• UI & Layouts

  • Sidebar, Topbar, Grid, Split-View, Modal, Detail View

  • Responsive design for mobile & desktop

  • Accessibility (ARIA) and screen reader support

  • Dynamic layout via JSON schema

  • UI Builder planned for drag-and-drop visual design

• UI Components / Widgets

  • Buttons, Inputs, Toggles, Badges/Tags

  • Icon Cards, Large Icon Views, Download Buttons

  • Modals, Tooltips, Notifications / Toasts

  • Color pickers, Copy-to-Clipboard, Breadcrumbs

  • Dark Mode toggle

• State Management

  • Centralized stores based on Signals

  • Side-effects handled via services or middleware

  • Serializing state for persistence

  • Computed / derived properties (future)

• Event System

  • Typed Custom Events with hux:eventName convention

  • Event Bubbling in Shadow DOM

  • Simple listener binding via decorators (@Listen)

• Internationalization (i18n)

  • JSON-based language resources

  • Dynamic runtime language switching

  • Pluralization & placeholders support

  • Lazy loading for performance

• Theming & Styling

  • Design tokens via JSON

  • SCSS-based theming without external frameworks

  • Custom properties for easy theming

• Development & Tooling

  • Modern Dev Server with Hot Reload

  • CI/CD ready

  • Storybook integration for component documentation

  • DevTools planned for components, state, and events

  • Linting & formatting with ESLint + Prettier

• Build & Deployment

  • esbuild-based incremental builds

  • Code splitting, tree shaking, minified bundles

  • CSP-compliant builds, no dynamic eval()

  • Source maps for easier debugging

• Integration & Extensibility

  • Plug-and-play modules for end-user applications

  • WebComponents-based

  • Plugin system for extending core functionality

  • Migration tools for breaking changes

• Testing & Quality

  • Jest for unit testing

  • E2E testing with Cypress/Playwright (future)

  • Storybook for visual regression testing

The roadmap for HUX will be incremental, focusing on building a working demo and expanding the framework step by step. All features will aim to reduce complexity for the application developer while maintaining performance, accessibility, and flexibility.

License

LICENSE

Contact

• Source repository: https://github.com/a-linko/hux

• Issues: https://github.com/a-linko/hux/issues