Type a name. Grow a tree. Leave it in the forest.

Name2Tree is a generative art app that turns text into deterministic tree drawings. It began as the ITP Spring Show 2025 project Find Trees in Names: What if We are Trees?, where visitors typed a name, watched a tree grow, added it to a shared forest, downloaded it through a QR flow, and printed it as a physical keepsake.

You are welcome here. Type your name or a short phrase on the live app, press Add to Forest, and your tree joins the community grove at the top of the forest — no GitHub pull request, just a moment between you and the algorithm.

The same words always grow the same tree. What will yours look like?

Try it live → · Explore the forest → · Project story →

1. Type — Enter a name, nickname, or any short text (validated for friendly content).
2. Grow — ASCII/Unicode digits drive a breadth-first tree; the same input always yields the same drawing.
3. Add — Community trees save to Supabase and appear first on /forest; the installation archive from names.json follows below.
4. Keep — Download PNG or SVG, scan a QR code for a print-ready page, or open collective views on /viz.
5. Return — Your community trees show a small mark; hover the card to reveal delete (only yours).

Degenerate digit runs become intentional flower-like roses. An APack stamp can sign the tree in a Chinese-character-like grid. Admin mode (?admin=true) still supports curating the bundled archive.

These are trees generated from different text inputs. The input is not limited to names — poems, phrases, and numbers all become trees.

In Bairui Su's Chinese name, the character 柏 in the family name means cypress tree. That personal link sparked a question: what trees are hidden in other names?

Name2Tree treats language as both identity and data. By turning text into natural form, it makes code, authorship, and language visible — then extends into a shared forest, swarm/cloud/grid visualizations, Tree Harmony, and the procedural landscape {Mountains, Trees, Names}*.

Your text
    │
    ▼
┌─────────────────────────────────────┐
│  Digitize (ASCII / Unicode codes)   │
│  Seeded RNG → breadth-first tree    │
│  Branch balance, roses for 1…0 runs │
└─────────────────────────────────────┘
    │
    ▼
┌─────────────────────────────────────┐
│  drawTree.js → SVG (Charming, Rough)│
│  Optional APack stamp, QR download  │
└─────────────────────────────────────┘
    │
    ├─ Add to Forest ──► Supabase `trees` (community, newest first)
    │
    └─ Archive ─────────► names.json (ITP show + bundled history, /viz only)

Community layer (src/lib/) — browser ID in localStorage, client validation, Supabase insert/delete with RLS. Forest gallery (Forest.jsx) — React grid of tree thumbnails. Viz (drawForest.js, D3, Observable Plot) — swarm, cloud, and grid layouts over the archive only.

Community add/delete uses the Supabase anon key in the browser (VITE_SUPABASE_URL, VITE_SUPABASE_ANON_KEY). Shared Supabase project bairui-studio can host more tables later (e.g. faces for BioGlyph).

Requirements: Node.js 18+, pnpm

git clone https://github.com/pearmini/name2tree.git
cd name2tree
pnpm install
cp .env.example .env.local   # optional: enable Add to Forest via Supabase
pnpm dev

Open http://localhost:5173. Without .env.local, the app runs; community add shows a friendly “not connected” message.

pnpm build     # production build
pnpm preview   # preview production build
pnpm lint      # ESLint
pnpm clean     # dedupe names.json

1. Run supabase/trees.sql in the Supabase SQL Editor.
2. Set VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY in .env.local and on Vercel.

name2tree/
├── src/
│   ├── App.jsx           # Routes, archive vs community state
│   ├── Tree.jsx          # Main generator + Add to Forest
│   ├── Forest.jsx        # Gallery, own-tree delete on hover
│   ├── drawTree.js       # Text → tree algorithm
│   ├── drawForest.js     # Swarm / cloud / grid layouts
│   ├── Viz.jsx           # Visualization route
│   ├── names.json        # Bundled installation archive
│   └── lib/
│       ├── supabase.js   # Client + browser ID header
│       ├── treesApi.js   # Fetch / add / delete community trees
│       └── validateName.js
├── supabase/
│   └── trees.sql         # Schema + RLS
└── img/

Admin shortcuts on /forest with ?admin=true: save, download, clear, remove, upload names.json (archive only).

• tree.bairui.dev — live app
• bairui.dev/name2tree — documentation
• {Mountains, Trees, Names}* — landscape
• Tree Harmony — sound
• BioGlyph — one-line faces (sibling project on shared Supabase)

MIT

tree.bairui.dev  ·  Source  ·  Blog

What if we are trees?