Gea

A compiler-first reactive JavaScript UI framework. No virtual DOM. Compile-time JSX transforms. Proxy-based stores. Surgical DOM patching. A hello-world production build is 121 B brotli; an equivalent interactive todo ships 4.9 kb of brotli JavaScript.

Gea compiles your JSX into efficient HTML string templates at build time, tracks state changes through deep proxies, and patches only the DOM nodes that actually depend on the changed data — no diffing, no reconciliation overhead.

Svelte made "compile the framework away" famous. Gea takes the phrase literally: in a static hello-world app, the framework runtime disappears from the bundle.

Compile To Almost Nothing

In a fresh Vite production hello-world build, Gea ships 121 B of brotli JavaScript. The equivalent Solid build ships 3.6 kb, Svelte ships 8.5 kb, Vue ships 20.7 kb, and React ships 50.8 kb.

Measured from fresh Vite 8.0.10 production apps, summing JavaScript assets only. Gea used the compiled component output; React, Vue, and Svelte used equivalent minimal hello-world components.

Stays Lean When The App Does Work

Hello world proves the compiler can disappear. Todo proves the runtime stays lean when the app actually does something.

In an equivalent interactive todo app with reactive state, input handling, filtering, item updates, and identical CSS, Gea ships 4.9 kb of brotli JavaScript. Solid ships 5.7 kb, Svelte ships 13.7 kb, Vue ships 22.6 kb, and React ships 51.5 kb.

Measured from fresh Vite production builds in /tmp/gea-todo-framework-size-compare. CSS was identical across all builds: 2,711 B raw, 746 B brotli.

// counter-store.ts
import { Store } from '@geajs/core'

class CounterStore extends Store {
  count = 0
  increment() { this.count++ }
  decrement() { this.count-- }
}

export default new CounterStore()

// app.tsx
import { Component } from '@geajs/core'
import counterStore from './counter-store'

export default class App extends Component {
  template() {
    return (
      <div>
        <h1>{counterStore.count}</h1>
        <button click={counterStore.increment}>+</button>
        <button click={counterStore.decrement}>-</button>
      </div>
    )
  }
}

// main.ts
import App from './app'

new App().render(document.getElementById('app'))

Getting Started

npm create gea@latest my-app
cd my-app
npm install
npm run dev

This scaffolds a Vite-powered project with TypeScript, a sample store, class and function components, and hot module replacement — ready to build on.

Packages

Package	Description	Version
@geajs/core	Core framework — stores, components, reactivity, DOM patching
@geajs/ui	Headless UI primitives — accessible, composable components built on Zag.js
@geajs/mobile	Mobile UI primitives — views, navigation, gestures, layout
@geajs/ssr	Server-side rendering — streaming HTML, hydration, store isolation
@geajs/vite-plugin	Vite plugin — JSX transform, reactivity wiring, HMR
create-gea	Project scaffolder — npm create gea@latest
gea-tools	VS Code / Cursor extension — completions, hover, diagnostics	—

Philosophy

JavaScript code should be simple and understandable. Gea is built on the belief that a framework should not force you to learn a new programming model. You shouldn't need signals, dependency arrays, compiler directives, or framework-specific primitives to build a reactive UI. You should write regular JavaScript — classes, functions, objects, getters — and it should just work.

Gea finds the right mix of object-oriented and functional style. Stores are classes with state and methods. Components are classes with a template() that returns JSX. Function components are true plain functions with no side-effects. Computed values are getters. There is nothing to learn that isn't already JavaScript.

The only "magic" is under the hood: the Vite plugin analyzes your ordinary code at compile time and wires up the reactivity for you. You write this.count++ and the DOM updates. You don't call a setter, you don't wrap values in a signal, and you don't declare dependencies. The framework stays invisible.

Gea is built on the philosophy of the beautifully simple erste.js and regie libraries, carrying forward their core ideas — minimal abstraction, class-based components, and direct DOM ownership — while adding compile-time JSX transforms, deep proxy reactivity, and a modern build toolchain.

Why Gea?

• Just JavaScript. No signals, no hooks, no dependency arrays, no new syntax. Classes, functions, objects, and getters — concepts you already know.
• No virtual DOM. The Vite plugin analyzes your JSX at build time and generates targeted DOM patches. Updates touch only the elements that changed.
• Proxy-based reactivity. Mutate state directly — this.count++ — and the framework handles the rest. The compile-time analysis makes your regular JS fully reactive without you conforming to arbitrary rules.
• Near-zero baseline. A compiled hello-world app is 121 B brotli; an equivalent interactive todo is 4.9 kb brotli JS. Gea starts as your code, not a framework tax.
• Pay for routing when you use it. Router APIs are built in and tree-shakable; a hello-world app with routing is ~7.3 kb gzipped. Zero runtime dependencies.
• Familiar JSX. Write JSX with class instead of className and lowercase event attributes (click, input, change) instead of onClick.
• Props that follow JavaScript. Objects and arrays passed as props are the parent's reactive proxy — the child can mutate them and both update. Primitives are copies, just like function arguments in JS. No emit, no v-model, no callback wiring.
• Class and function components. Use class components for stateful logic and lifecycle hooks, function components for presentational UI. The Vite plugin converts function components to classes at build time.
• Accessible UI primitives. The @geajs/ui package builds on Zag.js to provide robust, accessible components — dialogs, menus, tooltips, accordions, and more — ready to style and compose in any Gea app.
• Built-in mobile UI. The @geajs/mobile package provides view management, iOS-style navigation transitions, back gestures, sidebars, tabs, pull-to-refresh, and infinite scroll.

How It Compares

Gea is the fastest compiled UI framework — closer to hand-written vanilla JavaScript than any other framework in the js-framework-benchmark (weighted geometric mean: 1.02). It gives you reactive state management, a component model, routing, and JSX without making the runtime the center of the story. Simple components can compile down to almost nothing; apps pay for the pieces they actually import.

See the full comparisons: React vs Gea | Vue vs Gea | Full benchmark report

Examples

Documentation

Full documentation is available in the docs directory, covering:

• Getting Started
• Stores and Components
• JSX Syntax
• Router
• Gea UI
• Gea Mobile
• API Reference

AI-Assisted Development

Install the Gea AI skills with:

npx skills add dashersw/gea

This repository includes agent skills that teach AI coding assistants how to work with Gea. In compatible environments, this gives your editor the context it needs to understand Gea's stores, components, JSX conventions, and reactivity model so you can scaffold and iterate on Gea apps with much better AI assistance.

Contributing

Contributions are welcome. The repo is a standard npm workspaces monorepo:

git clone https://github.com/dashersw/gea.git
cd gea
npm install
npm run build

Each package has its own build script. The root npm run build builds all packages.

License

MIT — Copyright (c) 2017-present Armagan Amcalar

Star History