Rust-powered Universal UI Compiler

Write React Native.
Ship Semantic Web & Native UI.

Hozo fits your React Native source to each platform’s native strengths—semantic HTML and CSS on the Web, React Native primitives on iOS and Android, with first-class accessibility.

Static paths compile away. Only truly dynamic behavior remains at runtime.

Try the REPLPlayground Explore Storybook View Conformance

$pnpm add -D @hozo/vite @hozo/compiler|Zero config fallback

Static pathsZero-runtime styling

AccessibilityFirst-class by design

IntegrationsVite · Next.js · Metro · Storybook · TanStack

CompilerRust + oxc

Core Principles

Performant by Design. Accessible by Structure.

Cross-platform UI usually forces an unwanted compromise: heavy client-side wrappers on the Web, or inflexible WebViews on Mobile. Hozo eliminates unnecessary runtime wrappers—compiling standard React Native components directly into each platform's native primitives.

Existing Source First

Write standard components imported from react-native or @hozo/core. No proprietary DSL, no framework rewrites. Adopt incrementally in existing production codebases without breaking a line of business logic.

import { View, Text } from 'react-native'

First-Class Accessibility

ARIA is not an afterthought or runtime patch. Hozo treats W3C ARIA as a foundational grammar, validating roles and required attributes at build time via aria-query before code ever reaches production.

Build-time W3C ARIA validation + Zero div-soup

Zero-Runtime Static Paths

All static styles compile to zero-runtime CSS classes on Web and precomputed StyleSheets on Native. Static utilities cost 0ms at runtime; finite dynamic branches are precompiled so runtime work is reduced to the remaining condition.

Static (0 JS) → Structural (Boolean fold) → Dynamic fallback

True Platform Primitives

Semantic primitives from @hozo/core lower cleanly: Heading becomes genuine <h1>-<h6>, Section becomes <section>, and on Mobile they lower to native React Native primitives rendered by Fabric.

import { Heading, Section, Button } from '@hozo/core'

Style Engine

Tiered Style Resolution

Even with dynamic class names, Hozo never compromises. From compile-time static extraction to structural boolean toggles and incremental candidate caching, three interlocking tiers eliminate runtime overhead.

Tier 1 • Static0ms Runtime

Pure Elimination

Literal class names are extracted during build time. Emitted as genuine CSS classes on Web and precomputed StyleSheet objects on Native.

// Input (Source)<View className="p-4 bg-blue-500" />// Web Output (Pure HTML & scoped CSS)<div className="hozo-view hozo-1jskca5-r0-0" />

• Zero JavaScript runtime cost
• Browser-native CSS cascade

Tier 2 • StructuralBoolean Toggle

Precompiled Branching

Conditionals like cn(...) are pre-compiled for both branches while preserving AST shape. At runtime, only a fast boolean toggle remains.

// Input (Source)<View className=={cn('p-4', active && 'bg-blue-500')} />// Web Output (Precompiled Branch)<div className=={"hozo-view " + (active ? "hozo-1jskca5-r0-1" : "hozo-1jskca5-r0-0")} />

• Precalculated CSS class names
• Zero runtime style recalculation

Tier 3 • DynamicCached Fallback

Whole-Project Cache

For props and unknown dynamic variables, Hozo analyzes candidate classes across the project and pre-generates them into a high-speed cached lookup.

// Input (Source)<View className=={props.className} />// Web Output (Cached Resolver)<div className=={hozoClasses(props.className)} />

• Incremental candidate caching
• Zero missing CSS rules

Compiled at build time

Every element below was a Hozo primitive in the source and is plain HTML in this page.

No runtime import
No event handler
No client bundle

The compiler that produced this

Side-by-Side Lowering

One Source, Two True Primitives

From a single universal component, Hozo lowers directly to genuine Semantic HTML and CSS on the Web, and native React Native primitives and StyleSheet on Mobile.

Universal Source: NotificationCard.tsx

React Native / @hozo/core

import { View, Heading, Paragraph, Button } from '@hozo/core'

export function NotificationCard({ title, message, onDismiss }) {
  return (
    <View role="alert" className="p-6 rounded-2xl bg-yakisugi-800 border border-hinoki/20">
      <Heading level={2} className="text-xl font-bold text-shikkui mb-2">{title}</Heading>
      <Paragraph className="text-stone-400 text-sm mb-4">{message}</Paragraph>
      <Button onPress={onDismiss} className="bg-bengara px-4 py-2 rounded-lg text-shikkui font-medium">
        Dismiss
      </Button>
    </View>
  )
}

Web Lowering (DOM + CSS + W3C ARIA)

No RNW Wrapper

// Real compiler output: semantic DOM & scoped atomic CSS
export function NotificationCard({ title, message, onDismiss }) {
  return (
    <div className="hozo-view hozo-i5cum2-r0-0" role="alert">
      <h2 className="hozo-i5cum2-r0-1">{title}</h2>
      <p className="hozo-i5cum2-r0-2">{message}</p>
      <button className="hozo-i5cum2-r0-3" type="button" onClick={onDismiss}>
        Dismiss
      </button>
    </div>
  )
}

Native Lowering (Fabric / StyleSheet)

React Native / Fabric

// Real compiler output: StyleSheet & native primitives
export function NotificationCard({ title, message, onDismiss }) {
  return (
    <View style={hozoStyles.hozo0} role="alert">
      <Text style={hozoStyles.hozo1} accessibilityRole="header">{title}</Text>
      <Text style={hozoStyles.hozo2}>{message}</Text>
      <Pressable style={hozoStyles.hozo3} accessibilityRole="button" onPress={onDismiss}>
        <Text style={hozoStyles.hozo3_text}>Dismiss</Text>
      </Pressable>
    </View>
  )
}

Accessibility-First

Accessible by Structure, Not Afterthought

Accessibility isn't decorative trim—it is the foundational joinery of software. Hozo validates supported WAI-ARIA role and attribute constraints at compile time and provides seamless cross-platform keyboard and focus behaviors.

Compile-Time ARIA Verification

Directly derived from the machine-readable W3C specification via aria-query. Catches invalid roles, missing attributes, and malformed states during compilation before they ship to production.

✕ Hozo Diagnostic [ARIA_INCOMPLETE_PATTERN]`role="checkbox"` needs aria-checked to mean anything, and this element has none of them.

✓ Automatic semantic mapping (header → heading, search → searchbox)
✓ Abstract role warnings (role="widget")

Accessible Patterns (@hozo/patterns)

Stateful widgets with the WAI-ARIA keyboard contract built in, across Web and Native, on the headless engines in @hozo/behaviors: focus scopes, roving tabindex, typeahead, dismissal, and collision-aware anchoring.

Dialog & Tooltip

Combobox & Listbox

Tabs & RadioGroup

Menu & Toolbar

✓ WAI-ARIA compliant keyboard listeners
✓ Deterministic focus restoration on dismissal

Ecosystem

Five Bundler and Framework Integrations

Vite, Next.js, Metro, Storybook, and TanStack Start. Across supported stacks, Hozo integrates in a single line of configuration.

VVite

@hozo/vite

Executes ahead of the React plugin, lowering JSX directly to semantic DOM and compiled CSS.

import { hozo } from '@hozo/vite'

export default defineConfig({
  plugins: [
    hozo({ css: 'src/theme.css' }),
    react(),
  ],
})

NNext.js

@hozo/next

Verified with Turbopack (Next.js 16) and Webpack with zero manual setup.

import { withHozo } from '@hozo/next'

export default withHozo(
  { /* next config */ },
  { css: 'src/theme.css' }
)

MMetro / Expo

@hozo/metro

Compiles React Native components into optimized native StyleSheets and Fabric primitives.

const { withHozo } = require('@hozo/metro/config')

module.exports = withHozo(
  getDefaultConfig(__dirname),
  { css: 'src/theme.css' }
)

SStorybook

@hozo/storybook

Zero-configuration preset built on top of the Vite Web backend.

export default {
  framework: '@storybook/react-vite',
  addons: ['@hozo/storybook'],
}

Open Storybook Preview→

TTanStack Start

@hozo/vite

Full-stack SSR with TanStack Start, Nitro, and Hozo Vite compilation.

export default defineConfig({
  plugins: [
    hozo({ css: 'src/theme.css' }),
    tanstackStart(),
  ],
})

CConformance

@hozo/tailwind-conformance

Automated differential test suite comparing Hozo 1:1 against the official Tailwind engine.

&check; Continuous differential snapshots verified in CI

Open Conformance Matrix→

Internal Design

Compiler Architecture

High-performance AST parsing powered by Rust and oxc. A shared IR drives both backends while making platform asymmetries explicit.

Source CodeReact Native TSX / @hozo/core Primitives

Rust Compiler Enginehozo_parser & hozo_ir

Style IRTailwind & static style extraction

Semantic IRRoles, elements & state transitions

DiagnosticsW3C ARIA static validation

Web Backendcrates/hozo_web

Semantic DOM + CSS + ARIA

Pure semantic HTML tags (<h1>, <p>, <button>), precomputed CSS classes, zero runtime on static paths.

Native Backendcrates/hozo_native

React Native Primitives (Fabric)

View, Text, Pressable, and precomputed StyleSheet objects rendered by React Native's Fabric engine.

Write React Native.Ship Semantic Web & Native UI.