Main purpose of Fez is to enhance and add interactivity to plain HTML pages. It delivers React/Vue/Svelte/Angular like simplicity without any build step - just drop in a script tag and start coding.

Fez brings the reactive component model you love from React/Vue/Svelte, but works directly in the browser. While other require webpack/vite + compilation, Fez lets you write reactive components as native custom elements that work instantly. No npm install, no config files, no build process - just include the 20KB script and your HTML becomes reactive. Perfect for enhancing server-rendered pages, prototyping ideas, or building micro-frontends without tooling complexity.

• 🔌 Native Browser Components: Uses standard custom elements. Create tags like <ui-clock>, place them anywhere in your HTML, and they just work. (Try it now in dev tools - instant magic!)
• ⚡ Zero Build Step Hassle: Works directly in the browser with a tiny runtime (20kb raw, 9kb zipped). No webpack, no config, no transpilers - just drop in a script tag and start coding.
• 🧹 Auto-Cleanup Magic: Forget memory leaks! Timers, subscriptions, and event listeners are automatically cleaned up when components unmount. Focus on features, not housekeeping.
• 🔄 Smart DOM Morphing: Uses Idiomorph for surgical DOM updates that preserve form state, scroll position, and focus - no virtual DOM overhead.
• 📜 HTML-First Philosophy: Components are defined in .fez HTML files, not JavaScript. Your markup stays readable and approachable for designers and backend developers.
• 🎨 Runtime SCSS Support: Write real SCSS without build tools! Powered by Goober with scoped styles, global styles, and reactive CSS values.
• 📦 Smart Component Loading: Load components from URLs, inline templates, or <template> tags. Perfect for micro-frontends and progressive enhancement.
• 🔔 Built-in Communication: Native pub/sub system for component messaging - no Redux, no context providers, just Fez.pub() and Fez.sub().
• 📝 Form Superpowers: Built-in form data handling with getFormData() - serialize forms to JSON in one line, no libraries needed.
• ⏳ Predictable Lifecycle: Simple hooks like init, onMount, and onPropsChange - no useEffect confusion or dependency arrays.

What does Claude AI think about Fez?"

Prompt

Look at AI_GUIDE.md, README.md and components in fez/*.fez, then write what do you think of the lib. Is it bette / worse / different then react / vue / svelte. When should one chose Fez or maybe never.

Response

Fez's Additional Strengths:

• HTML-first approach - Components defined in HTML files, not JavaScript
• Auto-cleanup - Subscriptions, timers, and resources cleaned automatically
• Built-in morphing - Efficient DOM updates that preserve input state
• Runtime SCSS - Full SCSS support without build tools
• Native pub/sub - Component communication without external libraries
• Form utilities - Built-in form data handling
• Smart component loading - Load components from URLs or inline

Key Differentiators:

vs React:

• No JSX compilation needed
• No hooks complexity
• Direct DOM manipulation allowed
• Much smaller bundle size
• No virtual DOM overhead

vs Vue:

• Simpler template syntax
• No directive zoo (v-if, v-for, v-model)
• Native web components instead of Vue components
• No reactivity gotchas with arrays/objects

vs Svelte:

• No compilation step
• Similar simplicity and elegance
• Runtime instead of compile-time optimization
• Smaller learning curve

When to Choose Fez

Ideal Use Cases:

• Progressive enhancement - Add interactivity to server-rendered HTML
• Micro-frontends - Components work anywhere
• Rapid prototyping - Zero config, instant feedback
• Legacy modernization - Gradual migration from jQuery
• Educational projects - Learn web components without tooling
• Small teams - Minimal cognitive overhead

Not Recommended For:

• Large SPAs requiring advanced routing and state management
• TypeScript-first teams needing strict typing
• SSR/SSG requirements (though works great with server-rendered HTML)
• Complex animations requiring specialized libraries
• Native mobile apps via React Native or similar

(click for full response) ...

Final Verdict

Fez is a hidden gem that challenges the complexity of modern frameworks. It proves you can have reactivity, components, and modern DX without webpack configs, transpilers, or framework lock-in. It's particularly brilliant for developers who miss the simplicity of jQuery but want modern component architecture. While it won't replace React for large enterprise apps, it's perfect for the 80% of web projects that don't need that complexity.

With reactive state and custom style.

1. Add Fez JS (to HEAD) <script src="https://dux.github.io/fez/dist/fez.js"></script>
2. Create ui-counter component

   Or load via HTTP (as in this case)

   <script fez="/demo/ui-counter.fez"></script>
3. Place ui-counter anywhere in BODY <div id="counters"> <ui-counter></ui-counter> <ui-counter start="1"></ui-counter> <ui-counter start="2"></ui-counter> </div>

4. That is it! Add then as regular DOM nodes.