Core Directives
Essential directives for creating reactive components and managing data flow.
x-data Component Initialization
Defines a reactive component with initial data. The root directive that makes elements reactive.
<div x-data="{ count: 0, message: 'Hello World' }">
<span x-text="message"></span>
<button x-on:click="count++">Count: <span x-text="count"></span></button>
</div>x-text Text Content Binding
Sets the text content of an element. Automatically escapes HTML for security.
<div x-data="{ name: 'FyneJS', version: '1.0' }">
<h1 x-text="name"></h1>
<p x-text="`Version: ${version}`"></p>
</div>{{ ... }} Mustache Text Interpolation
Embed values inline without attributes. Escapes HTML by default.
<div x-data="{ first: 'Ada', last: 'Lovelace' }">
<p>Hello, {{ first }} {{ last }}!</p>
</div>x-html HTML Content Binding
Sets the innerHTML of an element. Use with caution as it doesn't escape HTML.
<div x-data="{ content: '<strong>Bold text</strong>' }">
<div x-html="content"></div>
</div>x-show Toggle Visibility
Shows or hides an element using CSS display property. Element remains in DOM.
<div x-data="{ visible: true }">
<button x-on:click="visible = !visible">Toggle</button>
<p x-show="visible">This text can be toggled!</p>
</div>x-if x-else-if x-else Conditional Rendering
Conditionally render elements. Unlike x-show, these directives add/remove elements from DOM.
<div x-data="{ status: 'loading' }">
<div x-if="status === 'loading'">Loading...</div>
<div x-else-if="status === 'error'">Error occurred!</div>
<div x-else>Content loaded successfully</div>
</div>x-for List Rendering
Renders a list of elements from an array. Supports complex iteration patterns.
<div x-data="{ items: ['Apple', 'Banana', 'Cherry'] }">
<ul>
<li x-for="(item, index) in items" :key="index">
<span x-text="`${index + 1}. ${item}`"></span>
</li>
</ul>
</div>x-model Two-Way Data Binding
Creates two-way data binding for form inputs. Automatically syncs input values with data.
<div x-data="{ name: '', email: '', agree: false }">
<input x-model="name" placeholder="Your name">
<input x-model="email" type="email" placeholder="Your email">
<label><input x-model="agree" type="checkbox"> I agree</label>
<p>Name: <span x-text="name"></span></p>
</div>x-init Initialization Code
Runs code when the component is initialized. Perfect for setup tasks.
<div x-data="{ time: '' }"
x-init="time = new Date().toLocaleTimeString()">
<p>Page loaded at: <span x-text="time"></span></p>
</div>Attribute Directives
Dynamic attribute binding for creating responsive and interactive elements.
x-bind:attr x:attr Dynamic Attributes
Dynamically bind any HTML attribute. Supports shorthand syntax with x: prefix.
<div x-data="{ disabled: false, url: 'https://fynejs.com' }">
<button x-bind:disabled="disabled">Button</button>
<a x:href="url">Visit FyneJS</a>
<img x:src="`/images/${imageFile}`" x:alt="description">
</div>x-class Dynamic Classes
Conditionally apply CSS classes. Supports string, array, and object syntax.
<div x-data="{ active: true, type: 'primary' }">
<!-- Object syntax -->
<button x-class="{ 'bg-blue-500': active, 'bg-gray-500': !active }">
Toggle Button
</button>
<!-- String syntax -->
<div x-class="`btn btn-${type}`"></div>
</div>x-style Dynamic Styles
Apply dynamic inline styles. Supports both object and string syntax.
<div x-data="{ width: 50, color: 'red' }">
<!-- Object syntax -->
<div x-style="{ width: width + '%', backgroundColor: color }">
Dynamic Box
</div>
<!-- String syntax -->
<div x-style="`color: ${color}; font-size: 16px`"></div>
</div>Event Directives
Handle user interactions with powerful event binding and modifiers.
x-on:event Event Listeners
Attach event listeners to elements using the x-on directive.
<div x-data="{ count: 0 }">
<!-- Click events -->
<button x-on:click="count++">Increment</button>
<button x-on:click="count--">Decrement</button>
<!-- Form events -->
<input x-on:input="console.log($event.target.value)">
<form x-on:submit.prevent="handleSubmit()"></form>
<!-- Keyboard events -->
<input x-on:keydown.enter="search()">
</div>Event Modifiers
Powerful modifiers to control event behavior without writing additional JavaScript.
Execution Control
Control how events are handled
.prevent
Calls preventDefault() - stops default browser behavior
.stop
Calls stopPropagation() - prevents event bubbling
.self
Only trigger when event target is the element itself
.once
Remove event listener after first execution
.passive
Add passive event listener for better performance
.capture
Use capture phase instead of bubbling phase
.defer
Execute handler in next microtask
Key Modifiers
Filter events by specific keys
.enter
Enter key
.esc
Escape key
.space
Space key
.tab
Tab key
.up
Arrow Up
.down
Arrow Down
.left
Arrow Left
.right
Arrow Right
.home
Home key
.end
End key
.delete
Delete key
.backspace
Backspace
Combination Keys
Require modifier keys to be held
.ctrl
Require Ctrl key to be held down
.alt
Require Alt key to be held down
.shift
Require Shift key to be held down
.meta
Require Meta/Cmd key to be held down
💡 Combination Example:
x-on:keydown.ctrl.s.prevent="save()"
Triggers save() when Ctrl+S is pressed
Mouse & Touch
Mouse buttons and touch interactions
.left
Left mouse button only
.middle
Middle mouse button (scroll wheel)
.right
Right mouse button only
.outside
Click outside the element
.single
Single touch point
.multi
Multiple touch points
Modifier Examples
<div x-data="{ message: '' }">
<!-- Prevent form submission -->
<form x-on:submit.prevent="handleSubmit()"></form>
<!-- Enter key to search -->
<input x-on:keydown.enter="search()" placeholder="Press Enter to search">
<!-- Ctrl+S to save -->
<div x-on:keydown.ctrl.s.prevent="save()">Press Ctrl+S to save</div>
<!-- Click outside to close -->
<div x-on:click.outside="isOpen = false">Modal content</div>
<!-- Stop event bubbling -->
<button x-on:click.stop="doNotBubble()">Isolated Click</button>
</div>Component Directives
Advanced directives for building reusable components and managing component communication.
x-prop Reactive Props
Pass reactive properties to registered components, enabling parent-child component communication.
<!-- Parent component passing props -->
<div x-data="{ userName: 'John Doe', userRole: 'admin' }">
<component source="user-card" x-prop="{ name: userName, role: userRole }"></component>
</div>XTool.registerComponent Reusable Components
Register reusable components using the XTool.registerComponent() method with HTML template literals.
// Component registration
XTool.registerComponent({
name: 'todo-item',
template: html`
<div x-data="{ completed: false }" class="todo-item">
<input x-model="completed" type="checkbox">
<span x-class="{ 'line-through': completed }" x-text="title"></span>
</div>
`
});
// Component usage in HTML
<div x-data="{ todos: ['Learn FyneJS', 'Build app'] }">
<div x-for="todo in todos">
<component source="todo-item" x-prop="{ title: todo }"></component>
</div>
</div>