Quick Start

The shortest path from a .rozie file to working framework output.

1. Write a component

Create Counter.rozie:

<rozie name="Counter">

<props>
{
  value: { type: Number, default: 0, model: true },
  step:  { type: Number, default: 1 },
  max:   { type: Number, default: Infinity },
}
</props>

<data>
{ 
  hovering: false 
}
</data>

<script>
const canIncrement = $computed(() => $props.value + $props.step <= $props.max)
const increment = () => { if (canIncrement) $model.value += $props.step }
</script>

<template>
<button
  :class="{ hovering: $data.hovering }"
  @mouseenter="$data.hovering = true"
  @click="increment"
>
  {{ $props.value }}
</button>
</template>

<style>
.hovering { background: rgba(0, 0, 0, 0.04); }
</style>

</rozie>

Key things to notice:

• <props> and <data> accept real JS expressions, not JSON. default: () => [], Number, Infinity — all fine.
• canIncrement is a $computed: it re-derives whenever value, step, or max changes, and gates the increment when a consumer passes :max (unbounded by default).
• model: true on a prop signals two-way binding. Rozie expands this to each target's native pattern: defineModel (Vue), controllable-state pair (React), $bindable (Svelte), model<T>() (Angular), createControllableSignal (Solid), a property/attribute pair with a *-change CustomEvent (Lit).
• r-* directives mirror Vue's v-* but are deliberately namespaced so .rozie files are visually distinct.

2. Compile in a Vite project

Install the unplugin and import the file:

// vite.config.ts
import Rozie from '@rozie/unplugin/vite';
import vue from '@vitejs/plugin-vue';

export default { plugins: [Rozie({ target: 'vue' }), vue()] };

<!-- App.vue -->
<script setup>
import Counter from './Counter.rozie';
import { ref } from 'vue';
const n = ref(0);
</script>
<template><Counter v-model:value="n" /></template>

Swap target: 'vue' for react, svelte, angular, solid, or lit and the same .rozie file produces an idiomatic component for that target.

3. Inspect the output

The fastest way to see what Rozie emits is the CLI:

pnpm rozie build Counter.rozie --target vue
pnpm rozie build Counter.rozie --target react
pnpm rozie build Counter.rozie --target svelte
pnpm rozie build Counter.rozie --target angular
pnpm rozie build Counter.rozie --target solid
pnpm rozie build Counter.rozie --target lit

See the Counter example for the full per-target output side by side.

Next steps

• Examples — full source + per-target output for representative components
• Why Rozie? — the problem Rozie solves and who it's for
• Install — supported target versions and bundler setup