Gardener Documentation

A lightweight, DOM-first front-end framework designed for high performance and zero-overhead. Gardener eliminates the Virtual DOM, allowing you to build reactive applications through direct DOM manipulation and native ES modules.

Quick Start Command

pnpm create gardener app

Installation

Set up your local development environment in three steps:

# 1. Scaffold a new project
pnpm create gardener app

# 2. Enter directory and install dependencies
cd app && pnpm install

# 3. Launch the development server
pnpm run dev

Core Concepts

DOM-First Approach

Gardener interacts directly with the Document Object Model. No diffing algorithms, no reconciliation—just instant updates.

Zero Build (Native ESM)

Utilize native ES modules. Develop directly in the browser without mandatory transpilation steps during the dev phase.

API Reference

The `gardener()` Utility

The core engine for element creation. It converts a JSON configuration into a live DOM element.

Property	Type	Description
t	String	HTML Tag name (e.g., 'div', 'button')
cn	Array	CSS class names list
attr	Object	Standard HTML attributes (id, data-*, etc.)
events	Object	Event listeners (click, input, etc.)

gardener({
  t: 'button',
  cn: ['btn-primary', 'p-4'],
  txt: 'Click Me',
  events: {
    click: () => alert('Gardener Active!')
  }
});

State Management

Reactive state is handled via the State class. Register callbacks to trigger UI updates automatically when data changes.

// 1. Initialize
const count = new State(0);

// 2. Listen for changes
count.registerCb(val => {
  document.querySelector('#display').innerText = val;
});

// 3. Update
count.set(count.get() + 1);

Advanced Features

01

Dynamic Page Creation

Use the framework's API to inject routes. Clicking the + icon in development creates new EJS views and automatically configures backend routes in gardener.route.ts.

02

Smart Image Optimization

On-the-fly resizing and WebP conversion. Simply use the structured URL format:

/static/cache/[name]_[width]x[height].webp

03

Static Site Generation (SSG)

Generate a static version of your site by hitting the /createstatic endpoint. The output is saved to src/frontendstatic for easy deployment to static hosts.