Gea: The Compiler-First
Reactive UI Framework

What Is Gea?

Gea is a compiler-first reactive UI framework for JavaScript that eliminates the virtual DOM entirely. Instead of diffing at runtime, Gea's Vite plugin analyzes your JSX at build time, traces every state access, and generates surgical DOM patches — code that updates only the specific DOM nodes that depend on changed state. No reconciliation, no diffing, no runtime overhead.

Created by Armagan Amcalar (known in the JavaScript community as dashersw), Gea represents the culmination of 16 years of framework design experience. Amcalar previously created tartJS (the framework behind the world's first client-side rendered single-page e-commerce application) and erste (a modernized version that powered mobile apps in Cordova shells). Gea v1.3.0, released in June 2026, is the third generation of this vision.

Writing Components in Gea

The core idea is that JavaScript is enough. You don't need to learn new primitives — just write plain classes.

Counter Component

Here's a complete interactive counter component in Gea:

class Counter extends Component {
  count = 0

  increment() { this.count++ }
  decrement() { this.count-- }

  template() {
    return (
      <div class="counter">
        <span>{this.count}</span>
        <button click={this.increment}>+</button>
        <button click={this.decrement}>-</button>
      </div>
    )
  }
}

That's everything. State is a class property. Methods mutate it directly. The template reads it. this.count++ triggers a DOM update. No useState, no signals, no dependency arrays, no wrappers. Just a JavaScript class.

The compiler traces that this.count is used inside the JSX template. When count changes, it generates a surgical patch that updates only the <span> containing the value — not the whole component, not a virtual DOM subtree.

Shared State with Stores

For state shared between components, Gea provides Store — a Proxy-wrapped base class:

class CounterStore extends Store {
  count = 0

  increment() { this.count++ }
  decrement() { this.count-- }
}

Stores work exactly like component-local state: plain properties, plain methods. The Proxy wrapper intercepts property access so the compiler can track dependencies and trigger updates when values change. Arrays are intercepted at the method level — push, splice, sort, and other mutating methods produce fine-grained change events.

Computed Getters

Computed values are just JavaScript getters:

class TodoStore extends Store {
  items = []

  get activeCount() {
    return this.items.filter(i => !i.done).length
  }

  get completedCount() {
    return this.items.filter(i => i.done).length
  }
}

The compiler recognizes getters that depend on store properties and re-evaluates them automatically when their dependencies change. No explicit memoization needed.

Function Components

Gea also supports function components for simpler cases:

function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>
}

Function components receive props as a destructured argument and return JSX. They're compiled the same way as class components — no runtime overhead difference.

How Compiler-First Reactivity Works

The magic — and the performance — comes from Gea's Vite plugin, which runs as a build-time compilation step:

1. JSX Analysis: The plugin parses every JSX template and identifies all expressions that reference component or store properties.
2. Dependency Graph: For each expression, the compiler builds a dependency graph mapping DOM nodes to their state sources.
3. Surgical Patch Generation: At build time, the compiler emits JavaScript that directly updates DOM nodes when their dependencies change — using textContent, setAttribute, or DOM insertion/removal as appropriate.
4. Runtime Elimination: In a hello-world build, the framework runtime disappears entirely from the bundle. Every DOM manipulation is direct.

This is fundamentally different from the virtual DOM approach used by React and Vue. Instead of re-rendering a virtual tree and diffing against the previous version, Gea's compiler generates code that says: "when property X changes, update DOM node Y." No diffing, no reconciliation — just direct DOM surgery.

Benchmarks: How Gea Stacks Up

The numbers are remarkable. Let's look at two data points: hello-world (proving the compiler can disappear) and a real todo application (proving the runtime stays lean when the app actually does something).

Hello-World Bundle Size

Measured from fresh Vite 8.0.10 production builds, summing JavaScript assets only. React, Vue, and Svelte used equivalent minimal hello-world components.

Todo App (Interactive) Bundle Size

CSS was identical across all builds: 2,711 B raw, 746 B brotli.

js-framework-benchmark Results

The js-framework-benchmark is the industry standard for measuring UI framework runtime performance. It constructs a table of 1,000 rows, performs operations like selecting, updating, and swapping rows, and measures the time each framework takes.

Gea scores 1.02 — within 2% of hand-written vanilla JavaScript. This is the closest any compiled UI framework has come to matching raw DOM manipulation performance.

Built-In Features

Gea ships as a batteries-included toolkit, not just a rendering library:

Client-Side Router

A built-in RouterView and Link component with route params, wildcards, and programmatic navigation. The router is tree-shaken — importing it when you need it adds no overhead when you don't.

Gea UI — Accessible Components

The @geajs/ui package provides 35+ accessible UI primitives built on Zag.js: dialogs, menus, tooltips, accordions, comboboxes, and more. These are headless components — you style them with your own CSS while the accessibility logic (ARIA attributes, keyboard navigation, focus management) is handled automatically.

Gea Mobile

Built on the experience from erste (Amcalar's earlier mobile framework), Gea Mobile provides iOS-style navigation, gesture handling, swipe-back gestures, and mobile-specific transitions for building native-feeling web applications in a Cordova/Capacitor shell.

Two-Way Props

Objects and arrays passed as props remain connected to the parent's reactive proxy. A child component mutating a prop object directly updates the parent — no explicit events, no v-model. Primitives are passed by value as expected.

HMR and Developer Experience

Gea supports Hot Module Replacement during development. Edit a component and see the result instantly without losing state. A VS Code extension is also in development.

Gea vs Svelte vs Solid: The Compiled Framework Landscape

Gea enters a space where Svelte and Solid already compete. Here's how they compare:

Gea vs Svelte

Svelte pioneered the "compile away" approach — it turns components into efficient imperative code at build time. However, Svelte still ships a runtime reactivity system. Gea takes compilation further by using Proxy-based stores that let the compiler trace dependencies precisely and eliminate virtually all runtime code.

• Svelte: Compiles components to vanilla JS-like code, but retains a runtime reactivity system (~8.5 KB min for hello-world)
• Gea: Compiles the framework entirely out of the hot path (121 B for hello-world), with Proxy-based dependency tracking
• Learning curve: Svelte has its own template syntax; Gea uses plain JavaScript classes with JSX
• Ecosystem: Svelte has a more mature ecosystem (SvelteKit, community libraries); Gea is newer but provides a batteries-included toolkit

Gea vs Solid

Solid uses fine-grained reactivity via signals — each reactive value is tracked individually, enabling precise DOM updates without a virtual DOM. But signals require explicit creation (createSignal, createEffect), which is a small conceptual overhead.

• Solid: Fine-grained reactivity via explicit signals and effects, no virtual DOM, JSX templates
• Gea: Implicit reactivity via Proxy-wrapped classes, no signals or effects to learn
• Bundle size: Solid 3.6 KB vs Gea 121 B (hello-world); Solid 5.7 KB vs Gea 4.9 KB (todo app)
• Benchmark: Solid scores 1.10, Gea scores 1.02 on js-framework-benchmark

Getting Started

Creating a new Gea project is straightforward:

npm create gea
cd my-gea-app
npm run dev

The scaffold creates a Vite 8.0 project with TypeScript, JSX compilation, and the Gea plugin pre-configured. Official example projects on GitHub demonstrate counters, todo apps, routing patterns, and server-side rendering.

Should You Use Gea?

Gea is genuinely innovative — the compiler-first approach delivers benchmark results that seemed impossible a year ago. But as with any new framework, the decision depends on your context:

Consider Gea if:

• You value minimal bundle size above all else — its 121-byte hello-world is unmatched
• Your team has strong JavaScript fundamentals and prefers plain classes over framework primitives
• You're building a new greenfield project where framework maturity risk is acceptable
• Performance-critical applications where every millisecond counts

Stick with established frameworks if:

• You need a large community and ecosystem (React's developer pool is irreplaceable for hiring)
• Your project requires extensive third-party library support
• You're building a long-lived enterprise application where framework longevity matters
• Your team already has deep expertise in React, Vue, or Angular

For most projects, the established frameworks are the right choice. But Gea represents a genuine step forward in what's possible with compiled UI frameworks, and its approach to eliminating runtime overhead through compiler analysis is likely to influence the next generation of tools — regardless of whether you use it directly.

FAQ