Hozo

Write React Native. Ship semantic HTML on the Web and native UI on iOS and Android.

Hozo is a universal UI framework for React Native, compiled by a compiler written in Rust. You write components with React Native's vocabulary (View, Text, Pressable, and semantic primitives such as Heading and Section) and Tailwind classes, or take them ready-made from @hozo/ui. The build turns them into semantic HTML, CSS and ARIA on the Web, and into React Native components and StyleSheet values on iOS and Android. What the build can read is compiled; only what it cannot read is left to a small runtime. Along the way it checks semantics and accessibility, and tells whoever runs it, a person or an agent, what to change.

Documentation · Website · REPL · Storybook · Conformance · Releases

What it does

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

export function Welcome() {
  return (
    <Section accessibilityLabel="Welcome" className="gap-2 p-6">
      <Heading level={2} className="text-xl font-bold">Hello</Heading>
      <Text className="text-gray-600">Compiled at build time.</Text>
    </Section>
  )
}

On the Web, the build writes this (compiler output, unedited):

<section className="hozo-view hozo-9hei4i-r0-0" aria-label={"Welcome"}><h2 className="hozo-9hei4i-r0-1">Hello</h2><span className="hozo-9hei4i-r0-2">Compiled at build time.</span></section>

.hozo-9hei4i-r0-0 { gap: 8px; padding-top: 24px; padding-right: 24px; padding-bottom: 24px; padding-left: 24px; }
.hozo-9hei4i-r0-1 { font-size: 20px; line-height: var(--tw-leading, 28px); font-weight: 700; }
.hozo-9hei4i-r0-2 { color: oklch(44.6% 0.03 256.802); }

A <section> with a name is a region landmark, the heading is an <h2>, and the classes are real CSS. No React Native for Web and no style runtime is involved. On React Native the same source becomes View and Text with StyleSheet values, and the heading a Text with the header role. The REPL shows both outputs for anything you type.

Try it

Stack	Install	Guide
Vite 8+	@hozo/vite	Vite
Next.js	@hozo/next	Next.js
React Native, Expo	@hozo/metro	Metro
Astro	@hozo/vite	Astro
Storybook	@hozo/storybook	Storybook
TanStack Start	@hozo/vite	TanStack Start

On Vite, for example:

npm install --save-dev @hozo/vite @hozo/compiler
npm install @hozo/core

// vite.config.ts: hozo() before react(), so it sees the JSX as written
plugins: [hozo({ css: 'src/theme.css' }), react()]

If something stops you, Troubleshooting lists what others hit first. For an existing React Native app, npx @hozo/migration-audit . reports what Hozo would change before you change anything.

Status

Early, 0.x. Published to npm and crates.io, and tested in CI on every change; the Native backend also runs weekly on an Android emulator and an iOS simulator. Public APIs and package boundaries may still change in any minor release.

What is partial, manual or not yet tested is listed in What Hozo does not do yet. How far the output matches Tailwind, React Native and WAI-ARIA is measured, not claimed: see the Conformance Matrix.

Learn more

• How styles are resolved: what compiles, and what is left to the runtime
• Accessibility: ARIA as the vocabulary, checked on every build
• How the packages stack: which packages the compiler runs and which your app runs
• Design decisions: settled questions, with the evidence
• docs/proposal.md: the design document (Japanese)

Contributing

CONTRIBUTING.md has the repository layout, setup, and the checks a pull request runs. Agents also read AGENTS.md.

License

MIT — see LICENSE.