Examples

Fifteen example pages, each kept live against the compiler: every source listing and per-target output (Vue, React, Svelte, Angular, Solid, Lit) is regenerated from the real .rozie file through @rozie/core on every docs build, so the docs can't drift. Pick whichever lines up with the feature you're trying to evaluate.

By complexity

• Counter: <props> with model: true, <data>, $computed, template event handlers. The smallest example that's still interesting.
• SearchInput: .debounce(300) modifier, $emit, $onMount with a teardown return, r-if / r-else, $refs. Single-component scope with rich event-handling.
• Modal: <listeners> block with side-effect handlers (body-scroll lock, focus), .self modifier on a backdrop click, multiple colocated lifecycle hooks, slots with scoped params, <components> embed. The heaviest single-file example.
• Dropdown: .outside(...$refs), .throttle(100).passive, reactive r-if conditional-attach on each <listener>, $watch on a prop transition, named slot with scoped params. The marquee <listeners> showcase.
• TreeNode: self-recursion via <components> self-import; minimal <props>-only component. Demonstrates the per-target self-reference idioms.
• Card (with CardHeader): wrapper-pair composition. Two .rozie files; shows the kebab/camel prop bridge and the per-target child-component import + selector rewrite (notably Angular's <rozie-card-header>).
• TodoList: r-for with :key, multiple $emit channels, named + default slots with per-item scoped params, fallback content, r-if / r-else empty state. Calls out the documented React render-prop divergence in slot consumer ergonomics.
• Table: slot-driven UI-library table (named scoped slots for header/cell/empty), a consumer-side dynamic slot fill (<template #[`footer${mode}`]>) toggling between two footer renderers, and an r-match / r-case / r-default switch in the consumer's #cell template. The dynamic-slot and r-match showcase.
• PortalList: portal-slot primitive demo. A tiny inline vanilla-JS engine owns row containers but the per-row CONTENT is rendered through <slot name="item" portal /> + $portals.item(container, scope). The cross-target equivalent of FullCalendar's eventContent, AG-Grid's cellRenderer, Swiper's slide content.
• ThemeContext: the $provide / $inject cross-component context pair. A provider, an unaware passthrough, and a deep consumer — three separately-compiled files proving inject-at-depth with no prop-drilling, the live-getter reactivity rule, and the guarded read for Lit's async first paint.

Engine wrappers

Vanilla-JS libraries (drag-and-drop, date pickers, charts), each ported to a single .rozie file that replaces the stack of per-framework wrapper libraries those engines ship today. Each page embeds a companion demo (*Demo.rozie) that is itself a Rozie file, so the demo is its own six-way integration proof.

• SortableList: SortableJS drag-and-drop. model: true two-way bind on an array, the cross-framework DOM-reconciler workaround, a default scoped slot, $watch reconciliation via instance.option().
• Flatpickr: the flatpickr date picker. Scalar model: true two-way bind, $onMount teardown, $watch pushing mode / bounds changes into the live instance with no remount.
• LineChart: a Chart.js canvas chart. One-way reactivity over a deeply-nested prop, $snapshot for the Svelte $state-proxy interop, in-place chart.data reconciliation.

Authoring features

Pages that showcase a <block>-level authoring feature rather than a component pattern.

• SCSS styling: <style lang="scss"> with compile-time dart-sass, a Sass map iterated with @each, @for / @function with @if control flow, %placeholder + @extend, #{…} interpolation.
• TypeScript authoring: <script lang="ts"> with author-declared interface / type, a type-only import, typed $computed declarations, and the statement-position type-hoist for the class-based targets.

By feature

If you're looking for a specific authoring feature:

Feature	See
model: true two-way binding	Counter, Modal, Dropdown, TodoList
r-model:prop consumer-side two-way bind	Flatpickr (scalar), SortableList (array)
$computed	Counter, SearchInput, TodoList
$emit	SearchInput, Modal, TodoList
$refs in script	SearchInput, Modal, Dropdown
$onMount with teardown return	SearchInput, Modal
$onMount / $onUnmount colocated pair	Modal
Multiple $onMount hooks	Modal, Dropdown
$watch(() => getter, cb)	Dropdown, Flatpickr, LineChart, SortableList
$snapshot (Svelte $state-proxy interop)	LineChart
$provide / $inject cross-component context	ThemeContext
<listeners> block (<listener> elements with reactive r-if attach)	Modal, Dropdown
.debounce(ms) modifier	SearchInput
.throttle(ms).passive modifier chain	Dropdown
.outside(...$refs) modifier	Dropdown
.self modifier	Modal
.enter / .escape key filters	SearchInput
<components> block	Modal, Card, TreeNode
Self-recursion	TreeNode
r-for with :key	TodoList, TreeNode
r-if / r-else	SearchInput, TodoList
r-match / r-case / r-default switch	Table
r-model	SearchInput, TodoList
Named slots	Modal, Dropdown, TodoList
Default slot with scoped params	Modal, Dropdown, TodoList
Slot fallback content	TodoList
Dynamic slot fills (consumer-side <template #[expr]>)	Table
Portal slots (<slot portal /> + $portals.X)	PortalList
Vanilla-JS engine wrapper	SortableList, Flatpickr, LineChart
<style lang="scss">	SCSS styling
<script lang="ts"> typed blocks	TypeScript authoring
:root { } global escape hatch in <style>	Modal, Dropdown

For the design rationale behind each of these, see Features & design choices.