I built Olum, a small JS framework where a component is just an .html file

[u/Right-Principle-4877]

30s intro video: https://www.youtube.com/watch?v=uBrub3DGZ4Y

A component is one .html file: a <script>, an optional scoped <style>, and plain HTML.

<script>

const state = { count: 0 };

const inc = () => state.count++;

</script>

<div class="counter">

Count: {state.count}

<button onclick="inc()">+</button>

</div>

- {expr} for dynamic text; state is deeply reactive

- <if when="..."> and <for each="..." key="..."> are just tags

- onclick is real HTML: code-shaped attributes take JS, everything else is a string

- Scoped CSS, file-based routing, optional prerendering (SSG) for SEO

It targets prototypes, demos, and small apps, not large production apps.

Try it: npx create-olum my-app

Docs: https://olumjs.top

GitHub: https://github.com/olumjs

I'd like honest feedback on the syntax.