Xata Branching Demo

An interactive demo that visualizes Xata's database branching in realtime. Create Postgres instances, spawn copy-on-write branches, and watch them hibernate and wake up — all rendered as an animated node graph.

A stats HUD in the top-right corner shows live cluster metrics (total databases, active count, CPU, memory) and rolling latency charts for each operation type.

Running locally

Configure a .env file (see .env.example for the required keys):

• XATA_API_URL — https://api.xata.tech for prod, https://api.staging.maki.cooking for staging.
• XATA_ORG_ID — create a dedicated organization for this demo and copy the org ID from the URL.
• XATA_API_KEY — create an API key dedicated to this demo.
• XATA_REGION — the region to provision in. us-east-1 is a good default.
• SITE_PASSWORD — optional. Setting it enables a password gate (1-day cookie). Leave empty to skip auth in local dev or preview.

Example:

XATA_API_URL=https://api.staging.maki.cooking
XATA_ORG_ID=rg39df
XATA_API_KEY=xau_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
XATA_REGION=us-east-1

Then:

npm install
npm run dev

Open http://localhost:3000.

Built with

• Next.js
• React Flow for the node graph
• Recharts for the stats charts
• Zustand for state management