Getting started

Gluon 1.10.0 supports Node ^22.12.0 || ^24.0.0. Create a maintained application from the public generator:

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

New to frontend frameworks? Follow the step-by-step learning path next. It explains the generated files, templates, bindings, reactivity, keyed lists, styles, cleanup, tests, and the words used throughout the rest of the documentation.

To add the runtime to an existing project, install its public package entry point:

npm install @gluonjs/core

Repository contributors use npm ci --ignore-scripts, install the required Playwright browsers, and run npm run check from a clean checkout.

First application

Create an #app mount container, then use the public Core and Reactivity entry points:

import { createApp, html } from '@gluonjs/core';
import { ref } from '@gluonjs/reactivity';

const count = ref(2);

createApp(() => html`
  <main>
    <h1>Count ${count.value}</h1>
    <button type="button" @click=${() => { count.value += 1; }}>Increment</button>
  </main>
`).mount(document.querySelector('#app')!);

Gluon updates the existing template parts when count.value changes. The application owns its render effect and releases it during unmount.

Production check

npm run check typechecks public API fixtures, runs Node and browser tests, builds client/server/static outputs, validates package archives, compiles every maintained starter, and builds this documentation site.

Package chooser

Install a package when the feature enters the application. A minimal browser app does not need Router, Store, SSR, or the optional UI packages.