Online demoBuilt for everyday life

Garden Planner

A botanical catalogue and a walkable 3D garden for one real yard.

Garden Planner: the illustrated plant catalogue, a botanical cherry illustration and the 3D walk view on a phone

The plan view shows a real yard, so it isn't pictured. The catalogue, specimen pages and illustrations are.

Why it matters

Garden Planner turns a planting spreadsheet into a living plan. Beds, paths and structures are drawn to measured lengths, plants are placed from an illustrated catalogue, and the same scene can be walked through in 3D across the seasons.

  1. 01

    A catalogue with sources

    156 plants, each fact linked to where it came from. A blank stays “Unknown”, and safety for pets is never assumed.

  2. 02

    Botanical illustrations

    141 plants have a watercolour-style illustration, with a manager for replacing them.

  3. 03

    Walk the garden in 3D

    Orbit or walk through the same scene, with seasonal light, on a desktop or a phone.

  4. 04

    Plans drawn to measure

    Draw beds, paths and structures, drag corners or type exact edge lengths, with undo that survives a reload.

The details

Open any part for the full story.

Features6
  • A bird's-eye plan: draw beds, paths and structures, drag corners or type exact edge lengths.
  • Painted plan textures, labels that never overlap, a month scrubber and layers.
  • A 3D walkthrough with orbit and walk modes, seasonal light and a breeze.
  • A 156-plant catalogue with sourced evidence and planner rules.
  • Botanical illustrations for 141 plants, with a manager for replacements.
  • Spreadsheet import that gives the same result on every run.
How it works
  • An art pipeline turns the master illustrations into responsive WebP files. The illustrations were generated with an image model and curated by hand.
  • 3D work runs in workers behind a pixel-diff gate, and a phone performance pass cut the worst blocking task from about 5.5 s to under 300 ms.
Technology
  • React
  • TypeScript
  • Vite
  • three.js
  • React Three Fiber
  • Zustand
  • Hono
  • SQLite
  • Playwright
Development notes

My part

Sole builder.
Status and context
Status
PrototypeDemo site being set up
When
Oct 2026 — now
Kind
Built for everyday life

Who it’s for

A household planning one real garden through the seasons.

The problem it solves

Planting decisions lived in a spreadsheet with gaps. The app had to show what is known, what isn't, and never pretend a blank cell is a safe answer.

Screens

Botanical illustration of a Lapins sweet cherry tree with white blossom and dark red cherries
Lapins cherry
Botanical illustration of a pink peony in full bloom
Peony
Botanical illustration of tall blue delphinium spires
Delphinium
Botanical illustration of a Redhaven peach tree with pink blossom and ripe peaches
Redhaven peach
Botanical illustration of a hydrangea with blue and pink flower heads
Hydrangea
Botanical illustration of a near-black Raven bearded iris
Raven iris
Botanical illustration of Gladiator allium with round purple flower heads
Gladiator allium
Botanical illustration of a blueberry bush with berries and pale flowers
Blueberry
garden.danielkloosterboer.com
Plant catalogue titled “The garden's plants” with search, filters and illustrated cards for beans, carrots and a sweet cherry

Plant catalogue titled “The garden's plants” with search, filters and illustrated cards for beans, carrots and a sweet cherry

1 / 5