Name: FyneJS
Availability: InStock
Rating: 5.0 (1 reviews)
Author: FyneJS

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 ~18.6KB. All the power, none of the complexity.

NEW & UNIQUE

TypeScript Without Build

Run .ts files directly in the browser. Token-based type stripping in ~34ms— Faster than the browser rendering a page font or stylesheet

Instant Stripping Zero Config Browser Native

Built-in SPA Router

Client-side routing with view transitions, intelligent prefetching, and navigation hooks—no additional libraries needed.

View Transitions Smart Prefetching Navigation Hooks

Zero Build Required

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

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

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 ~18.6KB Gzipped

4x smaller than Vue, 2.5x smaller than React. Complete framework with TypeScript stripping, router, and enterprise features in a single optimized file.

35+ 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	✅	❌	✅	✅
Browser-Native TypeScript (.ts files)	✅	❌	❌	❌
Comprehensive Auto-Cleanup	✅	❌	⚠️	⚠️
Event Modifiers	✅ 35+	✅ 30	✅ 29	❌
Lifecycle Hooks	✅ 7	⚠️ 1	✅ 8	✅ 3

Fast Reactive UI For The Web