Today I'm happy to announce the first stable release of Wrium: a tiny JavaScript library for building reactive user interfaces, with no build step and no dependencies.
What is Wrium?
Wrium lets you write normal HTML and make it come alive. You describe what the page should show, and when your data changes, the page updates by itself. There is no need to manually find elements and rewrite their content.
If you have ever used Vue, the style will feel familiar. Wrium is inspired by the best parts of modern frameworks, but it keeps things small and simple: the whole core is only about 10.9 KB minified.
Why build it?
Sometimes you just need a small interactive part on a page: a counter, a form, a list that updates. For that, setting up a bundler, a compiler, and a big framework can feel like too much. Wrium is made for those moments. Add a script tag, write your template, and you are done.
What you get in v1.0.0
- Reactivity: your data and your page stay in sync automatically.
- Simple templates: show or hide content, repeat lists, handle clicks, and bind form inputs right in your HTML.
- Components: reuse pieces of markup across your pages.
- Plugins: add your own custom features when you need them.
- Zero dependencies and no build step.
- TypeScript support out of the box.
- MIT license: free for personal and commercial projects.
A quick taste
This is a complete, working counter:
<div id="app">
<p>Count: {{ count }}</p>
<button @click="count.value++">Add one</button>
</div>
<script type="module">
import { createApp, ref } from '@wrium/wrium';
createApp(() => ({ count: ref(0) })).mount('#app');
</script>
Click the button and the number updates. That's all it takes.
Try it
You can install it with npm:
npm install @wrium/wrium
Everything you need is here:
- Website and documentation: wrium.dev
- Source code: github.com/wrium/wrium
- npm package: @wrium/wrium
Wrium is young, and I would love to hear what you think. If you try it, feel free to open an issue or share feedback on GitHub, and a star is always appreciated.
