Backend developers
You render HTML in Rails, Laravel, Django, or WordPress and need real interactivity on a few screens — without bolting on an SPA.
Build sites and want a lighter React? Grab one script tag and go — reactive UI with the ease of jQuery.
Open source · 7 KB gzip · no build step
Reactive UI for server-rendered apps, admin panels and internal tools — without a build or an SPA
Micra makes the HTML your server already renders reactive — the filterable tables, slide-over forms, and dashboards that internal tools and small SaaS apps are made of. 7 KB, no toolchain, no rewrite.
Drops into
- WordPress
- Rails
- Laravel
- Django
- & any backend
counter.html
<div data-component="counter">
<button @click="dec">-</button>
<span data-text="count"></span>
<button @click="inc">+</button>
</div>
<script type="module">
import * as Micra from 'micra.js'
Micra.define('counter', {
state: { count: 0 },
inc() { this.state.count++ },
dec() { this.state.count-- },
})
Micra.start()
</script> Live result
0
Where it fits
More than jQuery sprinkles. Less than a React SPA
jQuery / vanilla
Manual DOM, event wiring by hand. Fast to start, hard to keep coherent.
Micra
Reactive state and directives over server-rendered HTML. A simple, drop-in way to add reactivity — build step optional.
React / Vue
Full SPA and toolchain. Powerful, but heavy for an admin or a content site.
Who it's for
For the people shipping the unglamorous screens
Internal tools & admin panels
Filterable tables, slide-over forms, dashboards, modals — the CRUD-heavy screens where a full framework is overkill but jQuery turns to spaghetti.
Indie devs & small SaaS
Ship a product, or a proof-of-concept, this week. One script tag, no toolchain, no lock-in — and your AI writes it right the first time.
Agencies & freelancers
Hand off client sites the next person can actually maintain: plain HTML with data-* directives, not a bespoke build to inherit.
Built for how you code now
The reactive framework your AI writes correctly the first time
One way to do each thing, a tiny directive surface, and expressions an AST can validate. The small surface that makes Micra easy to learn is exactly what makes an LLM generate it right — no hallucinated APIs, no framework soup.
Ships an LLM guide, a ready-made prompt, and a
/llms.txt the model can read.
No build step
Add a script tag or import the module. Nothing to compile, bundle, or configure. Open the file and it works.
Fits your backend
Drops into Rails, Laravel, Django, or plain HTML. Your server renders the markup; Micra makes it reactive.
Zero dependencies
The entire runtime. No virtual DOM, no peer packages, nothing extra to keep updated or audit.
Runs under strict CSP
A custom expression engine with no eval. Works where unsafe-eval is forbidden — extensions, banking, gov.
Copy, paste, own it
Accessible components without a dependency
Modal, combobox, command palette, data table, date picker, toast — 14 primitives with keyboard support and ARIA built in. Copy the markup and the component into your project; there's nothing to install beyond Micra.
Proof, proof, proof
See it work
A live analytics dashboard — KPI cards, a period switcher and an inline chart that all recompute from one piece of state — built as a single no-build HTML file on Micra.
Built to be trusted
Small, but not slight
~7 KB gzip, zero dependencies — the whole runtime is one file.
300+ tests a full suite that's green on every release.
No eval a custom expression engine that runs under a strict CSP.
Hardened same-origin CSRF, and XSS sinks blocked in data-bind.
Benchmarked against Alpine, petite-vue, Stimulus and vanilla JS.
MIT open source — read and audit every line on GitHub.
FAQ
Questions, quickly answered
Is Micra a replacement for React or Vue?
No. Micra is for server-rendered apps that need a sprinkle of reactivity. If you're building a full single-page app with client-side routing and heavy client state, reach for React or Vue — Micra deliberately stops short of that.
Do I need a build step or a toolchain?
No. Add one script tag from a CDN, or import the module — there is nothing to compile, bundle, or configure. Open the file and it works.
How big is it?
About 7 KB gzip, with zero dependencies and no virtual DOM. The whole runtime is a single file.
Which backends does it work with?
Any of them. Your server renders the HTML — Rails, Laravel, Django, WordPress, or hand-written pages — and Micra makes that markup reactive in place. There are recipes for Rails, htmx, and Server-Sent Events.
Is it safe for production?
Yes. Expressions run through a custom evaluator with no eval and no new Function, so Micra works under a strict Content-Security-Policy. Recent releases added a same-origin CSRF check and blocked XSS sinks in data-bind; for data-html you can register a sanitizer in one line.
Why not just use Alpine.js?
Micra is roughly half the size, validates directive expressions with an AST (no window or eval reachable from markup), and ships a built-in fetch helper and event bus. Standard data-* syntax also reads cleaner for both people and LLMs. There is a step-by-step migration guide from Alpine.
Can an AI write Micra code for me?
That's a design goal. The surface is small and there is one idiomatic way to do each thing, so models generate it correctly. The site ships an LLM guide and a /llms.txt you can hand straight to your assistant.
How do I add it to a page?
Drop in the CDN script tag (or run npm install micra.js), write Micra.define('name', { ... }) for your component, add data-component to the markup, and call Micra.start(). The Getting started guide walks through it.
Is it open source and free?
Yes — MIT licensed and free, with the source on GitHub.
Drop it into your next page
One script tag, no build — start with the docs or copy a working example.
Collaboration
Want it built for you?
I build and migrate server-rendered apps and admin panels on Micra. Tell me what you're shipping.