Quick Start

The 4-Line Counter

This is everything you need for a working counter app:

count = 0

<button click={count++}>
    {count}
</button>

Run it:

What's Happening?

count = 0

This declares a reactive variable. In React, you'd need useState. In Vue, you'd need ref. In FLIN, all variables are reactive by default.

click={count++}

This is an event handler. When the button is clicked, increment count. No arrow functions, no callbacks — just the action.

{count}

This is template interpolation. The button displays the current value of count, and updates automatically when it changes.

Adding More Features

Let's enhance the counter with increment and decrement:

count = 0

<div>
    <button click={count--}>-</button>
    <span>{count}</span>
    <button click={count++}>+</button>
</div>

FLIN vs React

Here's the same counter in React for comparison:

import { useState } from 'react';

export default function Counter() {
    const [count, setCount] = useState(0);

    return (
        <button onClick={() => setCount(count + 1)}>
            {count}
        </button>
    );
}

Next Steps

Now that you understand the basics, try the built-in sample apps:

• Sample Apps — Counter, Todo, and Full-Stack demos
• Variables — Deep dive into reactivity
• Entities — Persist data without SQL