Skip to content

demo.md

Latest commit

 

History

History
65 lines (38 loc) · 2.72 KB

demo.md

File metadata and controls

65 lines (38 loc) · 2.72 KB

Demo + Benchmarks

See Zero-UI in action with interactive demos and performance comparisons.

Experience the difference between React re-renders and Zero-UI's instant updates.

Live Demo | React Version | Zero-UI Version

Interactive Examples

Demo Description Live Link Source Code
Interactive Menu Side-by-side comparison with render tracker Main Demo GitHub
React Benchmark Traditional React render path (10k nodes) React 10k GitHub
Zero-UI Benchmark Identical DOM with data-* switching (10k nodes) Zero-UI 10k GitHub

Full Demo Source: Zero Rerender Demo

Why Zero-UI?

Every setState in React triggers the full VDOM -> Diff -> Reconciliation -> Paint pipeline. For pure UI state (themes, menus, toggles) that work is wasted.

Zero-UI's "PRE-rendering" Approach:

  1. Build-time: Tailwind variants generated for every state
  2. Pre-render: App renders once with all possible states
  3. Runtime: State changes only flip a data-* attribute

Result: 5-10× faster visual updates with ZERO additional bundle cost.

Performance Benchmarks

Tested on Apple M1 - Chrome DevTools Performance Tab

Nodes Updated React State Zero-UI Speed Improvement
10,000 ~50 ms ~5 ms 10× faster
25,000 ~180 ms ~15 ms 12× faster
50,000 ~300 ms ~20 ms 15× faster

Try it yourself: Re-run these benchmarks using the demo links above with Chrome DevTools.

Ready to get started?

Get Started and never re-render again.