Example Programs

Example Programs

Note: You must have import Lyder from "lyder" somewhere in your file, otherwise your code will not work.

Counter

import Lyder from "lyder";

Lyder.createRoot(document.getElementById("app")).render(<App />);

function App() {
    let $count = 0;
    return <button onclick={() => $count++}>Count: {$count}</button>;
}

To-do List

import Lyder from "lyder";

Lyder.createRoot(document.getElementById("app")).render(<App />);

function App() {
    let $items = [], $newItem = "";

    function addItem() {
        $items = [...$items, $newItem];
        $newItem = "";
    }

    return <>
        <h1>Items</h1>
        <ul>
            {$items.map(item => <li key={item}>{item}</li>)}
        </ul>
        <input value={$newItem} onchange={e => $newItem = e.target.value} />
        <button onclick={addItem}>Add Item</button>
    </>;
}

To-do List with TypeScript

import Lyder from "lyder";

Lyder.createRoot(document.getElementById("app")!).render(<App />);

function App() {
    let $items: string[] = [], $newItem = "";

    function addItem() {
        $items = [...$items, $newItem];
        $newItem = "";
    }

    return <>
        <h1>Items</h1>
        <ul>
            {$items.map(item => <li key={item}>{item}</li>)}
        </ul>
        <input value={$newItem} onchange={(e: InputEvent) => $newItem = (e.target as HTMLInputElement).value} />
        <button onclick={addItem}>Add Item</button>
    </>;
}