Fez brings a familiar component-based approach you know from Vue or React, but strips away the build complexity. It lets you write components naturally, right in your HTML, without needing a compilation step. Think of it as a jQuery for modern component development, with the simplicity of dropping a script tag into your page. You get to use your components as if they were native HTML elements, making the development experience straightforward and intuitive.

• 🔌 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 connect, onMount, and onPropsChange - no useEffect confusion or dependency arrays.

What does Claude AI think about Fez?"

Prompt

Look at FEZ_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 <template fez="ui-counter"> <script> init(props) { // called when Fez node is connected to DOM this.MAX = 6 this.state.count = parseInt(props.start || 0) } isMax() { // is state is changed, template is re-rendered return this.state.count >= this.MAX } more() { this.state.count += this.isMax() ? 0 : 1 } </script> <style> /* compiles from scss to css and injects class in head */ /* body style */ background-color: #f7f7f7; /* scoped to this component */ :fez { margin: 10px 0; button { position: relative; top: -3px; } span { padding: 5px 10px; } } </style> <button class="btn-sm" onclick="fez.state.count -= 1" disabled={{ state.count < 1 }}>-</button> <span>{{ state.count }}</span> <button class="btn-sm" onclick="fez.more()" disabled={{ isMax() }}>+</button> {{if state.count > 0}} <span>&amp;mdash;</span> {{if state.count == MAX }} MAX {{else}} {{if state.count % 2 }} odd {{else}} even {{/if}} {{/if}} {{/if}}

   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.