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
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
Contributing
CONTRIBUTING.md has the repository layout, setup, and the
checks a pull request runs. Agents also read AGENTS.md.
License
MIT — see LICENSE.
