Gardener

Develop With No Bloat

Gardener is a lightweight, DOM-first front-end library. No virtual DOM, no JSX, and no compilation step. Just the real DOM.

Get Started Documentation

View On Github View On npm

$pnpm create gardener app

✨ Philosophy

DOM-First: Renders directly to the real DOM.
Deterministic: If you can inspect it, you can understand it.
Native: Works in the browser via ES modules.
Zero Build: No bundlers or magic required.

🚀 Features

Declarative UI

SVG Namespace Support

Hot Reload

Image Optimization

The Core API

gardener({
  t: 'div',
  cn: ['p-6', 'flex'],
  attr: { id: 'hero' },
  txt: 'Welcome to the Garden',
  events: {
    click: () => console.log('Growth!')
  },
  children: [
    { t: 'span', txt: 'Pure DOM nodes.' }
  ]
})

🧠 Simple State

No proxies. No diffing. Just clean, reactive callbacks.

// Initialize

const count = new State(0);

// React

count.registerCb(val => updateUI(val));