seedling

qrazy

Building a micro-framework to cure framework fatigue

The best cure for "framework fatigue" is realizing that frameworks aren't magic—they're just JavaScript code written by people who got tired of copy-pasting the same logic.

So I built one. 250 lines. No build step. Called it qrazy because you'd have to be to roll your own in 2026.

Here's what it looks like:

<div q-data="{ count: 0 }">
  <button q-click="count++">
    Clicked <span q-text="count"></span> times
  </button>
</div>

That's it. No npm install. No webpack. No JSX. Just HTML with special attributes that make things reactive.

The three problems

Every UI framework—React, Vue, Svelte, Alpine, htmx—solves the same three problems. They just solve them differently.

Problem 01

Reactivity

How do you know when state changes? When someone sets count = 5, how does the framework notice?

qrazy answer: Proxy API. Wrap objects in a trap that fires on every property change.

Problem 02

Binding

How do you connect state to the DOM? HTML doesn't know about your JavaScript objects.

qrazy answer: Custom attributes. Walk the DOM, find q-text, q-click, etc., wire them up.

Problem 03

Reconciliation

What happens when you delete item #2 from a list? Do you rebuild the whole thing or surgically remove one element?

qrazy answer: Keyed templates. Track which DOM nodes belong to which data items.

What we built

qrazy supports these directives:

Directive	Purpose
`q-data`	Define a reactive scope with initial state
`q-text`	Bind element's textContent to an expression
`q-show`	Toggle visibility based on a boolean expression
`q-bind:attr`	Bind any HTML attribute to an expression
`q-model`	Two-way binding for input elements
`q-click`	Execute a statement on click
`q-submit`	Handle form submission
`q-for`	Render a list from an array

That's enough to build real UIs. Counters, forms, todo lists, dynamic tables.

Go deeper

Each problem has its own deep dive. Start from first principles, understand why things work the way they do.

Reactivity

The Proxy API, dirty checking, signals vs proxies, and why arrays are weird.

Binding

DOM walking, the TreeWalker API, expression evaluation, and the scope chain.

Reconciliation

The hard problem. Template cloning, keyed updates, and why React exists.

The Landscape

How React, Vue, Svelte, Solid, Alpine, and htmx solve these same problems.

Playground

Live editor. Write qrazy code, see it run, watch the Proxy traps fire.

The meta-lesson

Once you build a crappy version of React, you understand exactly why React does what it does. The "arbitrary" complexity of modern web dev stops looking arbitrary—it starts looking like standardized solutions to the problems you just struggled with.

Framework fatigue isn't about there being too many frameworks. It's about not understanding what they do for you. Fix that, and the fatigue goes away.