Getting Started

Choose Your Installation Method

Start building in seconds with your preferred setup

CDN (Recommended)

Start immediately - just add one script tag

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

NPM Package

For bundlers and modern build tools

npm install fynejs

import FyneJS from 'fynejs';
FyneJS.init();

Three Ways to Build Components

Inline Components

Use x-data directly in HTML for quick, simple components

Registered Components

Component Loading

Load components from external files with lazy loading and preload strategies

<!-- Inline x-data component -->
<div x-data="{ count: 0, message: 'Hello!' }">
  <h1 x-text="message"></h1>
  <p x-text="'Count: ' + count"></p>
  <button x-on:click="count++">Click me</button>
</div>

<script>
// Register reusable component
FyneJS.registerComponent({
  name: 'counter-card',
  template: \`
    <div class="card">
      <h2 x-text="title"></h2>
      <p x-text="'Count: ' + count"></p>
      <button x-on:click="increment">+</button>
    </div>
  \`,
  data: { count: 0, title: 'Counter' },
  methods: {
    increment() { this.count++; }
  }
});
</script>

<!-- Use the component -->
<component source="counter-card"></component>

<script>
// Load components from external files
FyneJS.loadComponents([
  { path: 'components/header.js', mode: 'preload' },
  { path: 'components/sidebar.js', mode: 'defer' },
  { path: 'components/modal.js', mode: 'lazy' }
]);
</script>

<!-- Components load automatically -->
<component source="header"></component>
<component source="sidebar"></component>

Building Multi-Page Projects

Learn how to organize and structure complex FyneJS applications with multiple pages and components.

Central Setup File Pattern

Create a single setup file (like demo-loader.js or app-setup.js) that handles initialization, component loading, and routing for your entire application.

1 Create your setup file:

// demo-loader.js (or app-setup.js)
(function() {
  // List all your component files
  const componentFiles = [
    'header.js',
    'footer.js',
    'user-card.ts',        // TypeScript works too!
    'modal.js',
    'data-chart.ts'
  ];
  
  // Initialize FyneJS
  XTool.init({ 
    router: { enabled: true }
  });
  
  // Load all components
  XTool.loadComponents(
    componentFiles.map(file => ({
      path: 'components/' + file,
      mode: 'preload'  // or 'defer', 'lazy'
    }))
  );
})();

📚 Full API: See the XTool.init() and loadComponents() documentation for all configuration options.

2 Include in every HTML page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>My App - Home</title>
  
  <!-- Styles -->
  <link rel="stylesheet" href="./styles.css" />
  
  <!-- FyneJS Core -->
  <script src="../dist/x-tool.min.js" defer></script>
  
  <!-- Your Setup File (loads everything) -->
  <script src="./demo-loader.js" defer></script>
</head>
<body>
  <!-- Components are now available -->
  <component source="header"></component>
  
  <main>
    <component source="user-card"></component>
  </main>
  
  <component source="footer"></component>
</body>
</html>

Recommended Project Structure

Organize your components logically by feature, page, or UI type. Mix JavaScript and TypeScript files as needed.

my-fynejs-app/
├── index.html
├── about.html
├── contact.html
├── styles.css
├── demo-loader.js          # Central setup file
├── components/
│   ├── page-specific/
│   │   ├── hero-section.ts
│   │   ├── pricing-table.js
│   │   └── testimonials.ts
│   ├── features/
│   │   ├── user-dashboard.ts
│   │   ├── analytics-widget.js
│   │   └── notification-center.ts
│   └── ui/
│       ├── modal.js
│       ├── tooltip.js
│       └── dropdown.ts
└── shared/
    ├── navigation.js       # Shared across all pages
    └── footer.js          # Shared across all pages

Pro Tips

• Keep shared components (nav, footer) in a shared/ directory
• Group page-specific components together
• Use feature folders for related component groups
• Mix .js and .ts files freely—FyneJS handles both!

Routing & Navigation

FyneJS includes a built-in SPA router with view transitions, prefetching, and navigation hooks.

Enable routing in your setup file:

XTool.init({
  router: {
    enabled: true,
    before: (to, from, info) => {
      // Optional: auth checks, analytics, etc.
      return true;
    },
    after: (to, from, info) => {
      // Optional: scroll, update UI, etc.
    }
  }
});

Use x-link in your navigation:

<nav>
  <a href="/index.html" x-link>Home</a>
  <a href="/about.html" x-link>About</a>
  <a href="/contact.html" x-link>Contact</a>
</nav>

📚 Learn more: Check out the Router documentation or Router API reference for all configuration options including view transitions, prefetching, error handlers, and more.

This Documentation Site Uses This Pattern!

The site you're reading right now follows this exact structure. Check out docs/demo-loader.js to see it in action.

✓ What We Do

• Single demo-loader.js file
• All pages include the same scripts
• Components loaded once, shared everywhere
• Router handles navigation smoothly
• TypeScript components work seamlessly

⚡ Benefits

• DRY: Don't repeat script includes
• Consistent: Same setup everywhere
• Fast: Components cached after first load
• Maintainable: Change once, apply everywhere
• Scalable: Easy to add new components

What's New

Discover the latest features added to FyneJS that make building interactive applications even easier.

HTML Component Files

Write components in native .html files with full IDE syntax highlighting—no template strings needed!


                <template>...</template>

                <script setup>

                  expose({ data, methods });

                </script>

Signals API

Lightweight child → parent messaging with payloads and bubbling. Perfect for component communication.


                Signals.emit('saved', data);

                Signals.connect('saved', handler);

x-ref & :attr Shorthand

Named element references via $refs and Vue-style :attr shorthand for cleaner attribute binding.


                <input x-ref="myInput">

                <img :src="url" :alt="desc">

TypeScript Support → Learn About SPA Routing →

What's Next?

Explore Directives → Build Components → SPA Routing → View Examples →

Getting Started with FyneJS