Examples

Every example on this site is a real, running component — and they all live in one app: the playground on GitHub. Each docs page below embeds its example live and shows the exact playground files as code; StackBlitz boots the whole collection from GitHub, so every push redeploys everything.

Open the whole playground in StackBlitz ⚡

Or use the embedded StackBlitz Playground without leaving the docs.

Run the playground locally

The same app is in the repository, with every example in one navigable workspace:

git clone https://github.com/infinite-system/ivue.git
cd ivue
npm install
npm run dev:playground

Open the Vite URL printed in the terminal (usually http://localhost:5173), then use the app's sidebar to switch between examples. Edit the classes or templates and Vite will update the running playground.

Start small

• Counter — your first class: one ref, a plain-getter derivation, two methods.
• Plain getter vs computed() — the same derivation both ways, with live run counters proving whose body runs when.
• Lifecycle & teardown — both lifetimes side by side: a component-owned Ticker (plain watch, hooks, an interval released by dispose()) and an outliving Sensor started, suspended and disposed by hand.
• Inheritance chain — three files, three levels, one instance; total refines through super.total with zero computeds.
• Composables in classes — both directions of the seam: useMouse hosted privately behind a $-getter, and an undo history class published as useUndoHistory().
• Pinia Store Alternative — a class-based alternative to Pinia stores; optional reactive() view, fully typed.

Full-complexity

• Workspace Platform — a ClickUp-scale application graph with list and board views, filters, workload, task editing, comments, and activity over the same ivue domain objects.
• Extensible Kernel — construction binds to a namespaced class key, so plugins extend notifications and their children.
• Advanced Select Field — a Quasar-based extension: server search, pagination, variants, chips, create-new — one class, 54 plain getters, one computed.
• Advanced Media Uploader — a Quasar-based extension: uploads, preexisting-media hydration, lightbox — plus a class-extended square-tile variant.
• Virtual scroller on Lenis — 1,000,000 rows, a handful of divs; scrolling itself is virtual.
• AI chat on the scroller — a real 10,000-message Claude Code session: pages fetched on demand, tool calls that expand to their code, an index that selects and exports.
• The formula grid — real Excel-syntax formulas over a virtualized million-cell sheet, dependency graph discovered by Vue.
• The flyweight grid — 20,000,000 cells, fully reactive at 4.7 bytes per cell.
• Benchmarks — creation, method dispatch, the formula grid and the cell-grid comparison, run live in your browser.

Full applications

• Invar — Terminal IDE — the largest ivue codebase in production: a terminal IDE built by AI agents, 108,000 lines on the ivue standard — every model a Reactive() class, the entire capability layer on Static().