Backend developers
You render HTML in Rails, Laravel, Django, or WordPress and need real interactivity on a few screens — without bolting on an SPA.
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 drops into Wordpress, Rails, Laravel, Django or any other solution and makes server-rendered HTML 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.
npm install micra.js or one script tag from a CDN.
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>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. No build, no SPA.
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, not 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, not slides
See it work
A full admin panel — tables with filters, slide-over forms, dark mode — built as a single no-build HTML file on Micra.
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.