⚡ Haronix UI Suite

The Declarative Generative UI Ecosystem

Framework-agnostic. AI-Native. Zero Dependencies. Light DOM.

Documentation & Live Demos →

🚀 The GenUI Vision

Haronix is built for the era of Generative AI. While traditional libraries focus on manual coding, Haronix provides a standardized presentation layer that AI agents can reliably control, stream, and update in real-time.

🧠 Why AI-First?

• Schema-Driven: AI models (Claude/GPT/Gemini) can easily generate valid Haronix JSON Schema (HJS).
• Smart Streaming: Native support for incremental UI updates (Smart Sync) as AI tokens arrive.
• No Glue Code: Send JSON from your backend, and <ha-renderer> handles the rest.
• Light DOM: Full CSS inheritance means AI-generated UI always matches your brand's look and feel.

💎 Key Components

🏗️ <ha-renderer> — The Streaming Engine

The centerpiece of Haronix. It transforms JSON into live, interactive UI.

<!-- Connect to an AI stream via SSE -->
<ha-renderer id="ai-chat"></ha-renderer>

<script>
  const renderer = document.getElementById('ai-chat');
  const eventSource = new EventSource('/api/ai/generate');

  eventSource.onmessage = (e) => {
    // appendChunk handles both new nodes and incremental updates!
    renderer.appendChunk(JSON.parse(e.data));
  };
</script>

🧩 HJS Schema (v1)

A simple, portable format for defining UI:

{
  "id": "main-card",
  "component": "ha-card",
  "props": { "title": "AI Insight", "variant": "elevated" },
  "children": [
    { "component": "p", "children": "Hello from the future!" }
  ]
}

📦 Component Library

| Component | Purpose | Status | |---|---|---| | <ha-renderer> | Streaming JSON-to-UI engine | ✅ Stable | | <ha-card> | Adaptive content container | ✅ Stable | | <ha-icon> | Lazy-loading SVG icon system | ✅ Stable | | <ha-spinner> | GPU-accelerated loading states | ✅ Stable | | <ha-avatar> | Smart initials & status indicators | ✅ Stable | | <ha-tooltip> | Viewport-aware accessible hints | ✅ Stable | | <ha-badge> | Semantic status indicators | ✅ Stable | | <ha-stat-card> | Data visualization primitive | 🔨 Phase 2 |

🛠️ Installation

npm install haronix-wc
# or
yarn add haronix-wc

Quick Start (CDN)

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/haronix-wc/dist/index.es.js';
  import 'https://cdn.jsdelivr.net/npm/haronix-wc/dist/lucide.es.js';
</script>

<ha-card title="Haronix Ready" subtitle="GenUI is here">
  <ha-icon name="rocket" color="var(--ha-color-primary)"></ha-icon>
  Hello World
</ha-card>

🎨 Design System & Theming

Haronix uses a robust CSS token system. Wrap your app in <ha-theme-provider> or set tokens on :root:

:root {
  --ha-color-primary: #6366f1;
  --ha-radius-lg: 1rem;
  --ha-font-family: 'Inter', sans-serif;
}

📊 Comparison

| Feature | Traditional Libraries | Haronix UI Suite | |---|---|---| | AI Compatibility | Hard (requires glue code) | Native (HJS Schema) | | Streaming | Complex (manual VDOM sync) | Built-in (appendChunk) | | JS Footprint | Dozens of KBs | Minimal core logic | | Styling | Scoped / CSS-in-JS | Global CSS / Variables | | Dependencies | Often heavy | Zero dependencies |

🗺️ Roadmap

• [x] Phase 1: Core primitives & Token system
• [/] Phase 2: GenUI Streaming & Data Primitives
• [ ] Phase 3: Advanced AI Layouts & Animation Orchestration

📄 License

MIT © 2026 An Le