Clone any GitHub repo, edit it, build it, preview it, ship it — without installing anything.

Vertex is an open-source IDE that runs entirely inside a browser tab. Real git, a real filesystem, a real bundler, a real Node runtime — all client-side. The same codebase also ships as a Tauri desktop app and as a drop-in <vertex-editor> web component.

🚀 Try it live · ⚡ Quick start · 🧩 Features · 🏗️ Architecture · 📦 Web component · ☁️ Deployment · 🤝 Contributing

---

💡 The idea

Cloud IDEs put your code on someone else's machine. Local IDEs need an install, a runtime, a toolchain. Vertex takes the third path: the browser is the machine.

     paste a repo URL  →  git clone (in-browser)  →  edit  →  bundle  →  preview  →  deploy
                              isomorphic-git          CodeMirror 6   esbuild-wasm   WebContainers   Cloudflare

There is no Vertex backend. The web app is static files on Cloudflare Pages; your repository is cloned straight from GitHub into your browser's OPFS and stays there. No account, no upload, no telemetry — because there is nowhere for it to go.

---

✨ What you get

🌿 Real git, in the tab isomorphic-git over a virtual FS. Clone, stage, commit, branch — against any public repo.	💾 Storage that survives OPFS + IndexedDB via Lightning FS. Close the tab, come back, your working tree is still there.	⌨️ A real editor CodeMirror 6 with TS/JS, HTML, CSS, JSON, Markdown, Python and Rust modes, lint and autocomplete.
📟 Terminal xterm.js with a pluggable backend — WebContainers in the browser, node-pty on the desktop.	📦 Build & preview esbuild-wasm bundles in-browser; WebContainers boot a Node runtime and serve a live preview.	☁️ Ship from the IDE Cloudflare Pages and Workers adapters live inside @vertex/runtime — build, then publish.
🖥️ Desktop too The same Angular app inside Tauri 2, with a Rust bridge for native filesystem access.	🧩 21 IDE components @vertex/ide-ui — splitters, trees, tabs, toasts, virtual lists — headless logic, CSS-var theming.	⚡ Zoneless Angular 21 Signals everywhere, OnPush everywhere, no Zone.js, no Tailwind, no component framework.

---

🚀 Try it live

vertex.andersseen.dev — paste a repo URL, hit Clone & Edit.

1.  Open  https://vertex.andersseen.dev
2.  Paste https://github.com/andersseen/palette-forge   (or any public repo)
3.  Clone & Edit — the repo is cloned into your browser, not onto a server

---

⚡ Quick start

Requirements — Bun 1.3.11+, Node.js 18+, and a Rust toolchain (desktop only).

git clone https://github.com/Andersseen/vertex.git
cd vertex
bun install
bun web:dev            # → http://localhost:5173

All the commands you'll actually need

	Command	What it does
🌐	bun web:dev	Vite dev server for the web IDE → localhost:5173
🖥️	bun desktop:dev	Tauri desktop app (needs Rust)
🔗	bun dev:all	Web app + terminal sidecar + filesystem sidecar in parallel
🧱	bun run build	Full monorepo build through Turborepo
🧹	bun lint · bun lint:fix	ESLint across every workspace
🔍	bun check-types	tsc --noEmit across every workspace
🧪	bun test	Unit tests (Bun test runner)
🎭	bun test:e2e	Playwright end-to-end suite
📦	bun web-editor:build	Bundle the <vertex-editor> web component
🎬	bun web-editor-demo:start	Build the component and serve its demo app
☁️	bun run deploy	Build + publish to Cloudflare Pages

---

🏗️ Architecture

flowchart TB
  subgraph SURFACES["🖼️ Surfaces — one codebase, three shells"]
    direction LR
    W["🌐 apps/web<br/>Angular 21 · Analog.js"]
    D["🖥️ apps/desktop<br/>Tauri 2 · Rust"]
    E["🧩 @vertex/web-editor<br/>&lt;vertex-editor&gt;"]
  end

  subgraph ANGULAR["🅰️ Angular layer"]
    direction LR
    UI["@vertex/ui<br/>layouts · editor · sidebar"]
    IDEUI["@vertex/ide-ui<br/>21 headless components"]
    CORE["@vertex/core<br/>services · Dexie · terminal DI"]
  end

  subgraph RUNTIME["⚙️ @vertex/runtime — browser-native, zero Angular"]
    direction LR
    FS["fs/<br/>OPFS · MemoryFS"] --> GIT["git/<br/>isomorphic-git"] --> BUILD["build/<br/>esbuild-wasm"] --> PREVIEW["preview/<br/>WebContainers"] --> DEPLOY["deploy/<br/>Cloudflare"]
  end

  W --> ANGULAR
  D --> ANGULAR
  E --> IDEUI
  ANGULAR --> RUNTIME
  RUNTIME --> STORE[("💾 OPFS + IndexedDB<br/>your files never leave the browser")]

Loading

Monorepo layout

apps/
  web/                  🌐 Angular 21 + Analog.js + Vite — the main IDE
  desktop/              🖥️ Tauri 2 shell around the same app
  web-editor-demo/      🎬 Playground for the standalone web component
packages/
  frontend/
    core/               🧠 Angular services, Dexie DB, terminal adapter token
    ide-ui/             🧩 @vertex/ide-ui — headless IDE components (CSS custom props)
    runtime/            ⚙️ VirtualFS · GitClient · Bundler · Preview · Deploy
    types/              📐 Shared TypeScript contracts
    ui/                 🎨 Layouts, CodeMirror editor, sidebar
    web-editor/         📦 Publishable <vertex-editor> Angular Element
  backend/
    sidecar/            🦀 Bun/Hono filesystem sidecar
    terminal/           📟 Node.js + node-pty terminal sidecar
    core/               🧪 Experimental shared terminal types
scripts/                🔧 Install & release helpers
docs/                   📚 Deployment, preview-WC design notes

Where state lives

Layer	Stores	Why
localStorage	Splitter positions	Synchronous read, no layout flash on boot
sessionStorage	Open tabs (vertex:editor)	Intentionally volatile
Dexie v4 (vertex-ide)	Active session, preferences	Structured and extensible
OPFS + IndexedDB	Cloned repository files	Browser-native filesystem, survives reloads

---

📦 Embed the editor anywhere

Vertex ships its editor as a framework-agnostic custom element. Drop one script tag into any page — React, Vue, Rails, plain HTML — and you have a CodeMirror-powered editor.

curl -fsSL https://raw.githubusercontent.com/Andersseen/vertex/main/scripts/install.mjs | node - ./public

<script src="web-editor.min.js"></script>

<vertex-editor value="const x = 1;" language="typescript" theme="dark"></vertex-editor>

Bundle	Element	Size	Use case
web-editor.min.js	<vertex-editor>	~1.1 MB	Full editing, autocomplete, lint
web-editor-lite.min.js	<vertex-editor-lite>	~450 KB	Read-only syntax-highlighted display

📥 Always-fresh builds: web-editor-latest release · 📖 component docs

---

🗺️ Status

Vertex is in active development. Phase 2 — run code in the browser — is where the work is.

Phase	Capability	State
1	Virtual filesystem · in-browser git · editor · terminal	✅ Done
2A	Bundling with esbuild-wasm	✅ Done
2B	Live preview via WebContainers	✅ Done
2C	Full Node.js runtime (headless WebContainer runner)	🔄 In progress
2D	Deploy to Cloudflare Pages / Workers from the IDE	✅ Done
3	Language server protocol, richer intellisense	🧭 Planned

---

☁️ Deployment

One platform, one pipeline, one command. Cloudflare is the only deploy target — no Vercel, no Netlify, no split brain between local and CI.

flowchart LR
  A[push to main] --> B[quality<br/>lint · types · unit]
  B --> C[e2e · Playwright]
  B --> D[deploy<br/>Cloudflare Pages]
  D --> E[🌍 vertex.andersseen.dev]

Loading

bun run deploy    # identical to what CI runs

Full details — secrets, environments, headers, the Workers migration path — in 📄 docs/DEPLOYMENT.md.

---

🛠️ Under the hood

Area	Choice
Framework	Angular 21, zoneless (provideZonelessChangeDetection), signals-first, OnPush everywhere
Meta-framework	Analog.js — file-based routing in apps/web/src/app/routes/
Build	Vite 8 · Turborepo · Bun workspaces
Editor / terminal	CodeMirror 6 · xterm.js
In-browser runtime	Lightning FS (OPFS) · isomorphic-git · esbuild-wasm · WebContainers
Desktop	Tauri 2 + Rust sidecar
Styling	Pure CSS custom properties (--ide-*). No Tailwind, no PrimeNG, no CSS-in-JS
Headless logic	quartz-headless · @andersseen/headless-components

Conventions for contributors (and coding agents) live in AGENTS.md, with Angular and Analog specifics in ANGULAR_USAGE.md and ANALOGJS_USAGE.md.

---

📚 Documentation

Doc	About
AGENTS.md	Architecture, conventions, commands — the authoritative guide
docs/DEPLOYMENT.md	Cloudflare pipeline, secrets, environments
apps/web/README.md	Web application
apps/desktop/README.md	Tauri desktop application
packages/frontend/runtime/README.md	Browser-native runtime
packages/frontend/web-editor/README.md	<vertex-editor> web component
docs/preview-wc/README.md	WebContainer preview design notes

---

🤝 Contributing

Issues, discussions and pull requests are welcome — especially around the browser runtime, the IDE component library, and language tooling.

Before opening a PR: bun lint && bun check-types && bun test.

---

⭐ If Vertex is useful to you, a star helps other people find it.

MIT licensed — see LICENSE · Built by Andrii Pap