Rozie.js
A cross-framework component definition language and compiler. Authors write components once in a Vue/Alpine-flavored block-based syntax (.rozie files), and Rozie compiles them to idiomatic React, Vue, Svelte, Angular, Solid, and Lit components. The name derives from the Rosetta Stone — one source, many target languages.
Rozie is not a runtime framework. It does not own the rendering pipeline; the heavy lifting still happens in whichever target framework the consumer chose. Rozie owns the author-side API so a single component definition can drop into any of the six supported frameworks without per-framework wrapper boilerplate.
📖 Documentation — install, quick start, features tour, and live examples (the docs site dogfoods the compiler — every example is the actual .rozie source compiled by @rozie/unplugin/vite and rendered inline).
Who it's for
Component-library and design-system authors who today maintain manual bindings/wrappers across React, Vue, Svelte, Angular, Solid, and Lit for libraries that ultimately do their real work in vanilla JS. Write one .rozie file, ship working idiomatic consumers in every framework from it.
Status
Pre-v1.0, published. The toolchain is live on npm under the @rozie scope — @rozie/core, @rozie/unplugin, @rozie/cli, and @rozie/babel-plugin (see the changelog for current versions), plus the per-framework @rozie/runtime-* helper packages. The six target emitters ship bundled inside the toolchain packages rather than as separate npm packages. All six targets are gated by a byte-identical dist-parity suite — every reference component compiled across all six targets and every entrypoint (compile API / CLI / Babel plugin / unplugin) must match byte-for-byte. Each target ships with a consumer demo plus Playwright e2e coverage.
The toolchain (compiler, CLI, Babel plugin, unplugin, runtimes) and 20 of the 29 @rozie-ui component families are published on npm under MIT. The remaining families are built and gated in-repo, pending release verification. v1.0 of the toolchain is the next milestone.
Quick look
A minimal Counter component in .rozie:
<rozie name="Counter">
<props>{ value: { type: Number, default: 0, model: true }, step: { type: Number, default: 1 } }</props>
<script>
const canIncrement = $computed(() => $props.value + $props.step <= Infinity)
// Read a prop with $props; write a two-way (model) prop with $model.
const increment = () => { if (canIncrement) $model.value += $props.step }
</script>
<template>
<button @click="increment">{{ $props.value }}</button>
</template>
<style>.counter { display: inline-flex; }</style>
</rozie>
In any Vite project today — install from npm, pick a target, and drop the unplugin in:
npm i -D @rozie/unplugin
// vite.config.ts
import Rozie from '@rozie/unplugin/vite';
import vue from '@vitejs/plugin-vue'; // or @vitejs/plugin-react, @sveltejs/vite-plugin-svelte, etc.
export default { plugins: [Rozie({ target: 'vue' }), vue()] };
// ^^^^^ swap for 'react' | 'svelte' | 'angular' | 'solid' | 'lit'
<script setup>
import Counter from './Counter.rozie';
</script>
<template><Counter v-model:value="n" /></template>
See the docs site for the same .rozie source compiled side-by-side into all six targets, plus live demos for each example.
Component library (@rozie-ui)
The @rozie-ui families under packages/ui/ are the compiler's flagship dogfood: 29 production component families, each authored as one .rozie source and shipped as six pre-compiled, per-framework npm packages (-react, -vue, -svelte, -angular, -solid, -lit). Consumers install only the package for their framework — no Rozie toolchain, no build-time compile step:
npm i @rozie-ui/data-table-react # or -vue, -svelte, -angular, -solid, -lit
Most families wrap a battle-tested vanilla-JS engine whose framework bindings are today uneven or missing; the headless group carries no engine at all and proves Rozie handles rich interaction on its own. Every family has a showcase page, API reference, cross-library comparison, and live demo on the docs site.
Engine-backed families
Headless families (no engine — authored from scratch in .rozie, fully accessible)
Shared internals: @rozie-ui/headless-core (workspace-internal state helpers) and @rozie/runtime-keynav-core (published keyboard-navigation primitive). Adding a family is documented in packages/ui/ADDING-A-FAMILY.md.
Repo layout
packages/
core/ SFC parser, IR, lowering pipeline
targets/{vue,react,svelte,angular,solid,lit}/ Per-framework emitters
runtime/{vue,react,svelte,solid,lit,keynav-core}/ Runtime helpers consumed by emitted code
unplugin/ Vite/Rollup/Webpack/esbuild/Rolldown/Rspack plugin
cli/ Standalone `rozie build` CLI
babel-plugin/ Babel-plugin path for non-Vite consumers
language-server/ LSP for semantic .rozie editor features
ui/ @rozie-ui component families (29 families,
each shipping 6 per-framework packages)
examples/
*.rozie Reference components (Counter, SearchInput,
Modal, Dropdown, TreeNode, Card/CardHeader,
TodoList) plus regression-probe fixtures
consumers/ Live Vite demos + Playwright e2e per target
playground/ Browser playground (Monaco editor, in-browser
compile to any target)
docs/ VitePress documentation site
tools/
intellij-plugin/ JetBrains IDE plugin (syntax + injection)
textmate/ TextMate grammar (VSCode, IDEA Community)
ci-repro/ Local Docker mirror of the CI matrix
tests/
dist-parity/ Byte-identical fixtures across all targets
visual-regression/ Cross-target VR suite (Linux-rendered baselines)
... Per-feature integration suites
.planning/ Phase artifacts (gitignored — internal)
Getting started
The shortest path to working output:
pnpm install
pnpm -r --filter '@rozie/core' --filter '@rozie/unplugin' --filter '@rozie/target-*' --filter '@rozie/runtime-*' build
Then either run one of the consumer demos:
cd examples/consumers/vue-vite # or react-vite, svelte-vite, angular-analogjs, solid-vite, lit-vanilla-demo
pnpm dev # dev server with HMR
pnpm test:e2e # Playwright suite for this target
Or use the CLI directly for one-shot codegen:
pnpm rozie build examples/Counter.rozie --target solid --out Counter.tsx
For the full walkthrough — install, three different compile paths (Vite plugin, Babel plugin, CLI), per-feature tour, and live examples — see the docs site.
Tech stack rationale
@babel/parser + @babel/traverse + @babel/types + @babel/generator — <script> AST round-triphtmlparser2 — SFC block splitter and <template> tokenizerpeggy — modifier micro-grammar (@click.outside($refs.x).stop, .debounce(300), .throttle(100))magic-string — source-map-preserving string mutation in <script> and CSSpostcss — <style> AST + scope-attribute selector rewritingunplugin v3 — author once, ship to Vite + Rollup + Webpack + esbuild + Rolldown + Rspack
Full rationale and alternatives considered in CLAUDE.md.
IDE Tooling
A JetBrains IntelliJ Platform plugin (Rozie.js) provides syntax highlighting and JS/HTML/CSS language injection for .rozie files in IDEA Ultimate / WebStorm / PhpStorm / RubyMine / GoLand 2024.2+, with first-class support for the <components> block. Semantic features (diagnostics, completions, hover, go-to-definition, rename) are powered by @rozie/language-server, an LSP server built on @rozie/core.
See tools/intellij-plugin/README.md for installation, supported IDEs, dev loop, and dogfood feedback workflow.
For lightweight color-only support (no JS plugin required), the TextMate grammar at tools/textmate/ works in IDEA Community, PyCharm CE, and VSCode. The same grammar powers Shiki syntax highlighting on the docs site.
Contributing
This is a planned, phase-driven build under the GSD workflow (/gsd-execute-phase, /gsd-plan-phase, etc.). Phase artifacts live in .planning/phases/ (gitignored). Read CLAUDE.md and .planning/PROJECT.md before opening a substantive PR.
Releasing packages to npm? See RELEASING.md — the release runbook, plus pnpm release:precheck to catch the mechanical footguns automatically.
License
MIT © 2026 One Learning Community LTD.
