🚧 FLIN is in active development. Coming soon! Thank you for your patience. Join Discord for updates

Events & Actions

Handle user interactions with simple event syntax. No callbacks, no arrow functions.

Basic Events

Attach actions directly to elements:

events.flin 
count = 0

// Click event
<button click={count++}>Increment</button>

// Multiple actions with semicolon
<button click={count = 0; message = "Reset!"}>Reset</button>

Common Events

Event Usage
click Mouse click / tap
dblclick Double click
input Input value change
change Selection change
submit Form submission
enter Enter key pressed
focus Element focused
blur Element lost focus

Form Handling

Handle forms without ceremony:

form.flin 
title = ""

// Input binding + Enter to submit
<input
    value={title}
    input={title = event.value}
    enter={save Todo { title: title }; title = ""}
/>

// Form submit
<form submit={save user}>
    ...
</form>

Event Object

Access event data with the event object:

event-object.flin 
// Get input value
<input input={name = event.value} />

// Get key pressed
<input keydown={if event.key == "Escape" { close() }} />

// Get target element
<div click={handleClick(event.target)} />
💡 No Arrow Functions

Unlike React's onClick={() => ...}, FLIN uses direct expressions: click={count++}. Simpler syntax, same result.

Calling Functions

Call functions from events:

functions.flin 
fn handleSubmit() {
    save user
    showSuccess = true
}

<button click={handleSubmit()}>Submit</button>

Next Steps

You've learned the core concepts! Now try: