A batteries-included, reactive JavaScript UI framework. No virtual DOM. Compile-time JSX transforms. Proxy-based stores. Surgical DOM patching. Built-in state management and routing. ~13 kb gzipped with the router, ~10 kb without.
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.
// 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'))npm create gea@latest my-app
cd my-app
npm install
npm run devThis scaffolds a Vite-powered project with TypeScript, a sample store, class and function components, and hot module replacement — ready to build on.
| 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/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 | — |
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.
- 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. - Batteries included. State management and routing are built in — no decision fatigue, no extra packages. Gea ships a default solution for the biggest pain points of modern frontend development.
- Tiny footprint. ~13 kb gzipped with the full router, ~10 kb without. Zero runtime dependencies.
- Familiar JSX. Write JSX with
classinstead ofclassNameand lowercase event attributes (click,input,change) instead ofonClick. - 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, nov-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/uipackage 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/mobilepackage provides view management, iOS-style navigation transitions, back gestures, sidebars, tabs, pull-to-refresh, and infinite scroll.
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.03). It gives you reactive state management, a component model, routing, and JSX — without the weight of a virtual DOM or a large runtime. And unlike React and Vue, you don't need to pick separate packages for state management and routing — they're built in.
| Gea | React | Vue | |
|---|---|---|---|
| Bundle size (min+gz) | ~13 kb | ~74 kb | ~35 kb |
| What's included | Rendering + state + routing | + React Router + Zustand | + Vue Router + Pinia |
| Virtual DOM | No | Yes | Yes |
| Reactivity | Proxy-based, automatic | Explicit (setState, hooks) |
Proxy-based (ref/reactive) |
| JSX classes | class |
className |
class (templates) |
| Event syntax | click={fn} |
onClick={fn} |
@click="fn" (templates) |
| Props (objects/arrays) | Two-way (same proxy) | One-way (callbacks up) | One-way (emit/v-model up) |
See the full comparisons: React vs Gea | Vue vs Gea | Full benchmark report
| Example | Description |
|---|---|
| flight-checkin | Multi-step check-in flow with multiple stores, conditional views, and E2E tests |
| todo | Classic todo app demonstrating lists, filtering, and computed values |
| router | Client-side routing with RouterView, Link, and dynamic params |
| kanban | Kanban board with drag semantics |
| mobile-showcase | Mobile UI showcase using @geajs/mobile components |
Full documentation is available in the docs directory, covering:
This repository includes agent skills that teach AI coding assistants how to work with Gea. If you use Cursor, Codex, or a similar AI-enabled editor, it will automatically pick up the skill files and understand Gea's stores, components, JSX conventions, and reactivity model — so you can scaffold and iterate on Gea apps with full AI assistance out of the box.
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 buildEach package has its own build script. The root npm run build builds all packages.
MIT — Copyright (c) 2017-present Armagan Amcalar