Views & Templates - FLIN Docs

Basic Syntax

FLIN views look like HTML:

views.flin

<div class="card">
    <h1>Hello World</h1>
    <p>Welcome to FLIN</p>
    <button>Click me</button>
</div>

Interpolation

Use {} to embed expressions:

interpolation.flin

name = "Juste"
price = 99.99
quantity = 3

<p>Hello, {name}!</p>
<p>Total: ${price * quantity}</p>

Conditionals

Use {if} for conditional rendering:

conditionals.flin

{if isLoggedIn}
    <p>Welcome back!</p>
{else}
    <p>Please log in</p>
{/if}

{if score >= 90}
    <span>A</span>
{else if score >= 80}
    <span>B</span>
{else}
    <span>C</span>
{/if}

Loops

Use {for} to iterate:

loops.flin

items = ["Apple", "Banana", "Cherry"]

{for item in items}
    <li>{item}</li>
{/for}

// With index
{for item, idx in items}
    <li>{idx + 1}. {item}</li>
{/for}

Dynamic Attributes

Bind variables to attributes:

attributes.flin

isActive = true
imageUrl = "photo.jpg"

<div class={isActive ? "active" : "inactive"}>...</div>
<img src={imageUrl} />
<button disabled={!isActive}>Submit</button>