Compote — Compose Templater

A browser-based visual editor for Docker Compose configurations. No backend, no sign-up — everything runs locally in your browser.

What it does

Compote lets you build and manage Docker Compose setups through a point-and-click UI instead of hand-writing YAML. You organize services into Compose projects, and projects onto hosts (physical or virtual machines). When you're done, export a ready-to-deploy ZIP bundle with your docker-compose.yml and a generated README.

Key capabilities:

• Validation — real-time rule-based checks catch misconfigured services before you deploy
• Connectivity tracking — detects port conflicts, missing network links, unresolved service dependencies, and cross-project collisions
• Visual service editor — configure images, ports, volumes, environment variables, and depends_on through forms; see the rendered YAML in real time
• Multi-host management — model your infrastructure as hosts (with OS/architecture metadata), each carrying one or more Compose projects
• Registry search — browse Docker Hub and GitHub Container Registry to pick images directly in the UI
• README generation — produces a Markdown README from your Compose file automatically
• ZIP export — download a bundle with docker-compose.yml, .env, and generated docs
• Serverless — runs entirely in the browser; no backend, no account, all data stays in local IndexedDB

Tech stack

Layer	Technology
Framework	React 18 + TypeScript 5
Build	Vite 5 + Bun
Styling	Tailwind CSS 3 + shadcn/ui
State	Zustand
Storage	IndexedDB (idb-keyval)
Routing	React Router v6

Getting started

Prerequisites: Bun ≥ 1.0

# Install dependencies
bun install

# Start dev server (http://localhost:3010)
bun run dev

Build

# Production build
bun run build

# Preview production build
bun run preview

Adding services to the catalog

Each service lives in its own directory under public/catalog/{service-id}/:

public/catalog/
  prometheus/
    metadata.json       ← display name, category, image, ports, env vars, volumes
    compose-part.yml    ← service body injected into Compose output (no top-level keys)
    icon.svg / icon.png

catalog.json is auto-generated by a Vite plugin on every build — never edit it directly.

Minimal metadata.json:

{
  "name": "Prometheus",
  "category": "MONITORING",
  "description": "The Prometheus monitoring system and time series database.",
  "image": "prom/prometheus:latest",
  "containerPorts": [9090],
  "defaultHostPort": 9090,
  "requires": [],
  "requiredEnv": [],
  "publicExposure": "optional",
  "resourceClass": "medium",
  "iconSVG": true
}

Icons can be fetched automatically from Simple Icons, selfh.st, or Dashboard Icons via:

node scripts/fetch-icons.mjs {service-id}

Project structure

src/
├── components/ui/     # shadcn/ui primitives
├── features/          # Feature modules (builder, hosts)
├── lib/core/          # Pure logic: importers, exporters, renderers, validation rules
└── stores/            # Zustand stores

Data model: Host → Compose Projects → Services

Routes: /hosts → /hosts/:hostId → /hosts/:hostId/:composeId

License

MIT