Home

gUI Wiki

gUI is a performance-first JavaScript UI runtime built around fine-grained reactivity, direct DOM bindings, and one-time component setup.

This wiki is organized by how the project is actually used today:

• Installation and Setup
• Quick Start
• Reactivity
• Rendering and Templates
• Lists, Control Flow, and Portals
• Composition API
• Routing
• Web Components
• Compiler Guide
• Devtools and Inspection
• API Reference
• Playground, Demo, and Benchmarks
• Development Guide

What gUI is for

gUI is a good fit when you want:

• exact DOM updates instead of broad rerender passes
• explicit reactive data flow
• keyed structural ownership for list-heavy interfaces
• cleanup-aware dynamic subtrees
• a smaller runtime model than component-rerender frameworks

Core mental model

The runtime follows a few non-negotiable rules:

• components are setup functions, not rerender boundaries
• signals notify only direct dependents
• computeds are lazy and cached
• effects are for side effects, not UI tree rendering
• templates create stable DOM nodes and patch only the dynamic slots
• updates are batched in microtasks

Package names

The project currently ships in two registries:

• npm: @bragamateus/gui
• GitHub Packages: @gadevsbr/gui

Public entrypoints

Root package:

import {
  createApp,
  mount,
  signal,
  computed,
  effect,
  batch,
  createStore,
  createResource,
  html,
  list,
  Show,
  Match,
  Switch,
  Portal,
  createContext,
  provideContext,
  useContext,
  mergeProps,
  splitProps,
  on,
  provideContext,
  useContext,
  mergeProps,
  splitProps,
  setDomUpdateHook,
  subscribeDomUpdates,
} from "@bragamateus/gui";

Compiler entrypoint:

import {
  guiVitePlugin,
  guiEsbuildPlugin,
  transformGuiTemplates,
} from "@bragamateus/gui/compiler";

Devtools entrypoint:

import { createInspector } from "@bragamateus/gui/devtools";

Recommended reading order

If you are new to gUI:

1. Installation and Setup
2. Quick Start
3. Reactivity
4. Rendering and Templates
5. Devtools and Inspection

If you are integrating gUI into a real project:

1. Installation and Setup
2. Rendering and Templates
3. Lists, Control Flow, and Portals
4. Composition API
5. Routing
6. Web Components
7. Compiler Guide

If you are contributing to the framework itself:

1. Development Guide
2. API Reference
3. Devtools and Inspection