OBIX — Heart/Soul UI/UX SDK

Obi (Igbo) — Heart. Soul. The living centre.

OBIX is a data-oriented, accessibility-first UI/UX Software Development Kit built on the principle that the interface is the heart of any software system.

Install

npm install @obinexusltd/obix

One install brings the entire SDK: runtime, components, router, forms, accessibility, telemetry, state management, adapter, motion, CLI — plus all 10 platform drivers and 10 language bindings.

Quick Start

import { ObixRuntime } from '@obinexusltd/obix';

const runtime = new ObixRuntime();

// Define a component as a plain data object
runtime.register({
  name: 'Counter',
  state: { count: 0 },
  actions: {
    increment: () => ({ count: runtime.getInstance('Counter-1')!.currentState.count + 1 }),
    reset: () => ({ count: 0 }),
  },
  render: (state) => `<span>${state.count}</span>`,
});

// Create an instance (returns ComponentInstance, not a string)
const counter = runtime.create('Counter');

// Update state via actions
runtime.update(counter.id, 'increment');
runtime.update(counter.id, 'increment');

// Read current state
const instance = runtime.getInstance(counter.id);
console.log(instance?.currentState.count); // 2

// Subscribe to lifecycle events
runtime.onLifecycle(({ hook, instanceId, instance }) => {
  console.log(`[${hook}] ${instanceId}`, instance?.currentState);
});

What's Included

Top-Level Exports

| Export | From | |---|---| | ObixRuntime | @obinexusltd/obix-core | | StateHaltEngine, PolicyEngine | @obinexusltd/obix-core | | Button, Input, Card, Modal | @obinexusltd/obix-components | | FUD policies (applyAccessibilityPolicy, etc.) | @obinexusltd/obix-components |

Namespaced Exports

import { Router, Forms, Accessibility, Telemetry, State, Adapter, Motion, CLI } from '@obinexusltd/obix';

Drivers (import individually)

import { ... } from '@obinexusltd/obix-driver-dom-mutation';
import { ... } from '@obinexusltd/obix-driver-animation-frame';
import { ... } from '@obinexusltd/obix-driver-gpu-acceleration';
// ... and 7 more

Bindings (import individually)

import { ... } from '@obinexusltd/obix-binding-rust';
import { ... } from '@obinexusltd/obix-binding-python';
import { ... } from '@obinexusltd/obix-binding-swift';
// ... and 7 more

Design Principles

• Data-Oriented — Components are plain objects. State is explicit, serialisable, deterministic.
• Accessibility-First — WCAG 2.2 enforced at the policy layer, not left to the developer.
• FUD Mitigation — Built-in policies prevent CLS, focus trap failures, touch target violations.
• State Halting — Stable instances auto-halt to prevent unnecessary re-renders.
• Neurodivergent-First — Reduced motion, high contrast, predictable patterns built in.

Fixture Demo

See fixtures/banking-management-system/ for a standalone HTML/CSS/JS demo that demonstrates the OBIX component model with a banking dashboard.

Author

Nnamdi Okpalan — Founder, OBINexus Computing [email protected]

License

MIT