Skip to content

✨ Why Re4? A Compiler-First UI Framework Born from Curiosity

Too Many Frameworks. Too Many Ways to Say count++

There are already a lot of frontend frameworks: React, Solid, Svelte, Vue each with its own way of handling state and reactivity. All solid.

And then even more: Preact, Qwik, Lit, Marko, Alpine, Melt, Astro, HTMX, Million.js Signals everywhere. Hydration islands. Fine-grained updates.

At some point, I started wondering: What does my ideal framework look like? Not to compete. Not to replace. Just to try something better. Something that feels more natural to write.

That’s where Re4 comes in. A framework focused on developer experience, compiler-level optimization, and writing UI code with as little friction as possible.


Too Many Ways to Say count++

Here’s how a simple counter looks in popular frameworks:

React

tsx
const [count, setCount] = useState(0);
setCount(count + 1);

Solid

tsx
const [count, setCount] = createSignal(0);
setCount(count() + 1);

Vue

vue
<template>
  <button @click="count++">Count is {{ count }}</button>
</template>

<script setup>
import { ref } from 'vue';
const count = ref(0);
</script>

Svelte

svelte
<script>
  let count = $state(0)
</script>

<button onclick={() => count++}>
  Count is {count}
</button>

Re4

re
component Counter {
  state count = 0

  console.log("this only runs once")

  <button onClick={count++}>
    Count is {count}
  </button>
}

No .value, no setCount, no count(). Just count++. And it's reactive.

Re4 lets you write UI code without boilerplate or wrapper functions. The compiler handles the wiring behind the scenes.


What Re4 Does

  • Tracks reactive primitive state and computed values
  • Compiles to fine-grained DOM updates
  • Has no wrappers or runtime-specific syntax

You write plain, declarative code. The compiler figures out the rest.


Why This Matters

This isn't about choosing sides - it's a playground for ideas.

A space to explore concepts inspired by Svelte, Solid, and React - but built around a different core: simplicity at compile time.

Re4 is for developers who want to push the boundaries of frontend thinking. To try new patterns.

And maybe rethink a few assumptions we've all taken for granted.


✅ TL;DR

Re4 is a compiler-first UI language built for minimal syntax, zero runtime overhead, and a smoother developer experience.

No .value, no setCount, no wrappers — it just works.

The goal is to make frontend development more intuitive, less repetitive, and explore how far compiler-first ideas can take us.


What's Next

  • Parser
  • 🔧 Compiler: in progress
  • 🧪 Playground, IntelliSense, etc... yeah, we'll make it.

If you're into:

  • Compilers
  • Framework internals
  • UI reactivity experiments

Feel free to follow along. I'll be posting updates as things evolve.

— Aadi (Follow On X)