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 fynejsimport FyneJS from 'fynejs';
FyneJS.init();Three Ways to Build Components
Inline Components
Use x-data directly in HTML for quick, simple components
Registered Components
Register reusable components with templates, methods, and lifecycle hooks
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>