Zero Dependencies • Zero Build Step

Fast Reactive UI
For The Web

Build interactive web apps with declarative attributes. No compilation, no complex setup—just drop the script and start building.

Get Started →
npm version npm downloads jsDelivr hits

See It In Action

Build complex interactive components like this Apple Watch with 8 functional faces. No compilation, no setup—just pure reactivity.

index.html 
<script src="https://cdn.jsdelivr.net/npm/fynejs"></script>

<!-- Apple Watch Component - Full Featured Smartwatch -->
XTool.registerComponent({
  name: 'apple-watch',
  template: `<div class="relative mx-auto" style="width:240px;height:280px;">
    <div class="relative w-full h-full bg-gradient-to-br from-gray-800 via-gray-900 to-black rounded-3xl shadow-2xl">
      <!-- Digital crown -->
      <div class="absolute -right-1 top-16 w-3 h-10 bg-gradient-to-r from-gray-600 to-gray-800 rounded-r-lg"></div>
      
      <!-- Interactive Side button with dynamic themes -->
      <button x-on:click="switchWatchFace" 
              class="absolute -right-1 top-32 w-3 h-8 bg-gradient-to-r rounded-r-md shadow-lg transition-all duration-300 transform hover:scale-110">
      </button>
      
      <!-- 7 Interactive Watch Faces: Activity, Timer, Messages, News, Weather, Music, Digital -->
      <div class="absolute inset-3 bg-black rounded-3xl overflow-hidden">
        <!-- Dynamic face content with templates -->
      </div>
    </div>
  </div>`,
  makeData: () => ({ 
    currentFace: 'activity', faces: ['activity','digital','news','weather','music','timer','messages'],
    steps: 7842, heartRate: 72, standHours: 8, totalActivity: 420, timerRunning: false, 
    messages: [{ sender: 'Sarah', text: 'Hey! Lunch today?', time: '2m ago' }], isPlaying: false
  })
});

<!-- Live Interactive Demo -->
<div x-data="{ frozen: false }">
  <label><input type="checkbox" x-model="frozen"> Freeze demo</label>
  <component x:source="'apple-watch'" x-bind:readonly="frozen"></component>
</div>
Live Demo

Why Choose FyneJS?

Enterprise-grade features in just 11KB. All the power, none of the complexity.

Zero Build Required

No webpack, Vite, or compilation. Drop in a script tag and start building immediately.

<script src="https://cdn.jsdelivr.net/npm/fynejs">

Auto Memory Cleanup

Multi-layered cleanup prevents memory leaks. Event listeners, timers, observers—all handled automatically.

WeakMaps AbortController Resource Tracking

Built-in Performance

Static directive optimization, computed caching, batched DOM updates, and event delegation built-in.

Static Analysis RAF Batching Event Delegation

Dynamic Switching

Switch components instantly by changing source attribute—like img src. Includes lazy loading and preload strategies.

Dynamic Switching Lazy Loading Preload Strategies

Enterprise Components

Reusable components with reactive props, lifecycle hooks, slots, and HTML templates with IDE syntax highlighting.

Reactive Props Lifecycle Hooks Slots

Alpine.js Drop-in

Zero migration effort. Enhanced performance, more features, better memory management—100% Alpine.js compatible.

100% Compatible Zero Migration Enhanced Features

Zero New Syntax

No JSX, no .vue files, no special template language. Pure HTML with familiar directives you already know.

ESM/CommonJS Ready

Full ES module and CommonJS support. Works with Webpack, Vite, Rollup, or any modern build system seamlessly.

Multiple Components per File

Define multiple x-data components AND registerComponent() definitions in one file. Unlike Vue/React's one-per-file constraint.

Just 11KB Gzipped

7x smaller than Vue, 4x smaller than React. Complete framework in a single optimized file.

25+ Event Modifiers

Most comprehensive event system. Key combinations, mouse buttons, touch gestures, timing controls.

Modern ES6 Reactivity

Proxy-based deep reactivity with computed properties, automatic dependency tracking, and intelligent updates.

Mustache Interpolation

Inline text bindings with {{ like this }} anywhere in templates. Works alongside x-text/x-html.

Readonly Freeze

Add readonly to components to freeze interactivity instantly. Remove to resume—perfect for previews & embeds.

Why Developers Choose FyneJS

No Learning Curve

Uses standard HTML, CSS, and JavaScript. If you know web development, you know FyneJS.

Full ESM/CommonJS Support

Works seamlessly with modern bundlers, Node.js, and legacy build systems. Import however you prefer.

Production Ready

Enterprise-grade memory management, performance optimizations, and comprehensive error handling.

Future Proof

Built on web standards with zero dependencies. No framework churn, no deprecated APIs, no breaking changes.

component.html 
<!-- Multiple component types, one file -->
<script>
// Registered component
XTool.registerComponent({
  name: 'user-card', 
  template: '<p x-text="greeting"></p>',
  data: { greeting: 'Hello from component!' }
});
</script>

<!-- x-data component -->
<div x-data="{ count: 0 }">
  <button x-on:click="count++">Count: <span x-text="count"></span></button>
</div>

<!-- Use registered component -->
<component source="user-card"></component>

How Does It Compare?

Familiar syntax, zero compromises

Feature FyneJS Alpine.js Vue React
Zero Dependencies ✅ ✅ ❌ ❌
No Build Step ✅ ✅ ⚠️ ❌
Computed Cache & Optimization ✅ ❌ ✅ ✅
Static Directive Optimization ✅ ❌ ⚠️ ❌
Event Delegation ✅ ❌ ⚠️ ❌
Batched DOM Updates ✅ ❌ ✅ ✅
Multiple Components per File ✅ ⚠️ ⚠️ ⚠️
Configurable Directive Prefix ✅ ❌ ❌ ❌
HTML Strings + IDE Syntax Highlighting ✅ ❌ ⚠️ ❌
Dynamic Component Switching ✅ ❌ ⚠️ ❌
Component Lazy Loading ✅ ❌ ✅ ✅
Comprehensive Auto-Cleanup ✅ ❌ ⚠️ ⚠️
Event Modifiers ✅ 25+ ✅ 8 ✅ 6 ❌
Lifecycle Hooks ✅ 7 ⚠️ 2 ✅ 8 ✅ 3
Bundle Size (gzipped) ~12KB ~16KB ~76KB ~48KB