Hozo — Write React Native.Ship Semantic Web & Native UI.
React Native and Hozo's own components compile to semantic HTML and CSS on the Web, and to native primitives on iOS and Android.
Native semantics on every platform. First-class accessibility. Diagnostics and guardrails for humans and AI alike.
pnpm add @hozo/corepnpm add -D @hozo/vite @hozo/compilerOne 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.
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> )}// Compiled JSX; CSS and imports are emitted separately.<div className="hozo-view hozo-0" role="alert"> <h2 className="hozo-1">{title}</h2> <p className="hozo-2">{message}</p> <button className="hozo-3" type="button" onClick={onDismiss} data-hozo-pressable="" > Dismiss </button></div>// Compiled JSX; StyleSheet and imports are emitted separately.<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>Keep the source. Lose the runtime.
React Native on the Web usually means React Native for Web: a runtime that turns components and styles into DOM in the browser, on every render. Hozo does that work at build time wherever the source says enough, and leaves a runtime only where it does not.
Existing Source First
Write standard components imported from react-native or @hozo/core. No proprietary DSL, no framework rewrites. Adopt it file by file, and run the migration audit first to see what changes before anything does.
import { View, Text } from 'react-native'First-Class Accessibility
ARIA is not an afterthought or runtime patch. Hozo checks roles and their required attributes against the WAI-ARIA data in aria-query on every build, and names the file and line of each problem it finds.
Zero-Runtime Static Paths
Class names the build can read compile to CSS classes on the Web and precomputed StyleSheets on Native, with no style work left at runtime. A conditional class compiles each branch, so only the condition is left to run.
Works in the Build You Already Have
Each is one plugin or wrapper in the config you already have.
- Vite@hozo/viteRuns before the React plugin and lowers JSX to semantic DOM and compiled CSS.Vite setup guide →
- Next.js@hozo/nextOne wrapper around your Next config, on Turbopack or webpack.Next.js setup guide →
- Astro@hozo/viteStatic components ship no JavaScript; islands hydrate as usual.Astro setup guide →
- Metro / Expo@hozo/metroPrecomputed StyleSheets for iOS and Android from the same source.Metro / Expo setup guide →
- Storybook@hozo/storybookAn addon for the Storybook you already run.Storybook setup guide →
- TanStack Start@hozo/viteFull-stack SSR with TanStack Start and Nitro.TanStack Start setup guide →
Components to Start From
A styled component library written in the same primitives as your code, shipped as source and compiled with it, for the Web and Native.
Weekly report
This panel is plain HTML and CSS, rendered by Hozo at build time. Each component has a page in the docs with a live preview to press and type into, and the source beside it.
All components and how to install themTry Hozo
Explore the components, SVG effects and 3D scenes in the browser or the native showcase.
iOS Simulator
For a Mac with Xcode. Simulator app only—not an iPhone app or TestFlight build.
Download Simulator appBeyond Boxes and Text
3D, a 2D canvas, SVG, Tailwind and StyleX, on the same primitives and the same compiler. Each has a live page.
- Scenes on WebGL and WebGPU, with a bounded Native GPU path.
Three.js
@hozo/three - Charts and heatmaps: HTML5 Canvas on the Web, Skia on Native.
2D Canvas
@hozo/canvas - One SVG source, DOM SVG on the Web and react-native-svg on Native, filters included.
Universal SVG
@hozo/svg - Classes and state variants resolved at build time on both platforms.
Tailwind, compiled
@hozo/tailwind - Meta's StyleX read into the same compiler, beside Tailwind.
StyleX, compiled
@stylexjs/stylex - How far the output matches Tailwind, React Native and WAI-ARIA, and where it does not.
Conformance Matrix
snapshot from CI
Interactive 3D, from the same React
Kumimono — a Japanese roof-bracket set, 56 parts
A 3D study of Japanese timber roof brackets. Use the button or assembly slider to separate and rejoin its 56 parts.
Kumimono · 3D assembly study