Your site doesn't need to be slow.

Nor should you depend on 1314 packages to display "Hello World".

Elegance gives you performance, state-of-the-art features and syntaxical sugar, whilst leaving you in full control of how your site works.

/pages/page.ts

const variables = createState({
    counter: 0,
});

const functions = createState({
    increment: eventListener(
        [variables.counter],
        (event, counter) => {
            counter.value++;
            counter.signal();
        }
    ),
});

export const page = body ({
    class: "bg-black text-white",
},
    p ({
        innerText: observe(
            [variables.counter],
            (value) => `The Counter is at: ${value}`,
        )
    }),

    button ({
        onClick: functions.increment,
    },
        "Increment Counter",
    ),
);

/pages/page.ts

Learn More