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

See It In Action

This interactive Apple Watch with 8 functional faces? One script tag. No webpack, no Vite, no "npm install 47 packages". Just works.

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 a tiny footprint. 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

Comprehensive resource management handles all cleanup automatically—from DOM bindings to async operations, component trees to reactive subscriptions.

Auto GC Leak Prevention Smart Cleanup

Built-in Performance

Fine-grained reactivity, expression caching, computed memoization, keyed diffing, and batched updates—all optimized out of the box.

Keyed Diffing Smart Caching Batched Updates

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

Full component system with reactive props, 7 lifecycle hooks, slots, signals, HTML file support, and programmatic mounting.

HTML Components Signals API Mount API

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.

Fraction of the Size

A typical React app (react + react-dom + react-router) weighs ~100KB+ gzipped; Vue 3 + Vue Router ~59KB. FyneJS delivers more features—router, TypeScript stripping, signals, transitions—in a single lighter package.

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	✅	✅	⚠️	❌
Built-in SPA Router	✅	❌	❌	❌
Browser-Native TypeScript (.ts files)	✅	❌	❌	❌
Native HTML Component Files	✅	❌	❌	❌
Computed Cache & Optimization	✅	❌	✅	✅
Event Delegation	✅	❌	❌	❌
Batched DOM Updates	✅	❌	✅	✅
Multiple Components per File	✅	⚠️	❌	⚠️
Dynamic Component Switching	✅	❌	✅	⚠️
Component Lazy Loading	✅	❌	✅	✅
Signals (Component Messaging)	✅	❌	⚠️	❌
Comprehensive Auto-Cleanup	✅	❌	⚠️	⚠️
Event Modifiers	✅ 35+	✅ 12	✅ 12	❌
Lifecycle Hooks	✅ 7	⚠️ 1	✅ 8	✅ 3