Claudi — a Claude IDE that runs entirely in one HTML file

Claudi is a Claude IDE: a full, Cursor-style AI coding environment — file tree, tabbed code editor with syntax highlighting, live preview, an AI chat and planning agent powered by Claude — that ships as a single, dependency-free index.html file. No build step, no npm install, no server. Open the file (or paste it into a claude.ai artifact) and you have a working Claude-powered IDE in your browser.

This project — every line of index.html — was fully created by Claude Fable 5, written as a claude.ai artifact and then extended from there. If you're searching for a "Claude IDE," an "AI IDE built by Claude," or a browser-based Claude Code alternative, this is that project.

Live demo: https://umomany.github.io/claudi/ — served straight from this repo's index.html via GitHub Pages, no build step involved.

What is this?

Claudi is a browser IDE, similar in spirit to Cursor or VS Code, but built as one vanilla-JS HTML file (~91 KB) with zero dependencies. It runs a seeded demo project (a V60 coffee brew timer) out of the box, and lets you create, edit, and organize your own files, folders, and projects from scratch — then ask Claude to explain, edit, or build on your code.

Features

• File tree with folders — name a file src/utils.js and the folder structure appears automatically; create, rename, move, and delete files and folders from the sidebar.
• Tabbed code editor — a custom syntax highlighter (sticky-regex tokenizer) for JS, Python, CSS, HTML, JSON, and Markdown, with bracket auto-closing, auto-indent, comment toggling, and line duplication.
• Ghost completions — pause while typing at the end of a line and Claudi suggests an inline continuation; press Tab to accept.
• Chat mode — ask Claude questions about your code, get explanations, reviews, and code snippets you can insert, copy, or save as new files.
• Agent mode (planning agent) — describe a feature in plain language and Claudi plans the change as a set of file-level steps first, then writes each file in its own pass (this is how it works around small per-request token limits to build much larger features reliably).
• Ctrl+K inline edit — select code (or none, for the whole file), tell Claudi what to change, and review a diff before applying it.
• Checkpoints — Claudi automatically snapshots your project before every AI-driven edit, so you can always roll back from the checkpoints panel. Nothing an AI edit does is ever unrecoverable.
• Diff review — every AI-proposed change (chat, agent, or Ctrl+K) can be reviewed as a line-level diff before you accept or reject it.
• Find & replace — in-file (Ctrl+F) and project-wide search (Ctrl+Shift+F), plus a fuzzy file-open and command palette (Ctrl+P, > for commands, # for content search).
• Live preview — an in-browser iframe preview for HTML and Markdown files, with local <link>/<script> references resolved automatically and a console bridge that streams console.log/warn/error and runtime errors from the preview into a real console panel (with a one-click "Fix with Claudi" action on errors).
• Import & export — drag-and-drop files or a .zip, or use the file picker; export your whole project back out as a .zip (via a lazy-loaded JSZip, the only external dependency, and only when you use import/export).
• Persistence — projects autosave as you work. On claude.ai, this uses the artifact platform's storage API; in a normal browser it now falls back automatically to localStorage, so your project survives a reload with no setup required.
• Light & dark themes, adjustable font size, and a keyboard-first workflow throughout.

Getting started

Just want to try it? Open the live demo — no install, no setup.

On claude.ai: open index.html as an artifact — the AI features work immediately with no configuration, using claude.ai's built-in, keyless access to the Claude API.

Running it locally: open index.html directly, or serve the repo with any static file server, e.g.:

python3 -m http.server 8080
# then open http://localhost:8080/

Everything except the AI features (chat, agent mode, ghost completions, Ctrl+K) works immediately. To enable AI features locally, askClaude() needs either:

• a Claude API key added client-side with the anthropic-dangerous-direct-browser-access: true header (fine for local development — never ship a real key in client-side code), or
• a local proxy (e.g. Ollama or LiteLLM) exposing an Anthropic-compatible /v1/messages endpoint that askClaude() can point at instead.

Possible enhancements

Ideas that would build naturally on what's here:

• Word-wrap toggle for the editor (needs a gutter rework to keep line numbers aligned with wrapped lines).
• Minimap and drag-to-reorder tabs.
• Streaming responses in chat and agent mode, instead of waiting for a full reply.
• A settings panel for model choice and max_tokens (currently pinned low by the claude.ai artifact platform; a local proxy setup can already raise this today).
• Multi-cursor editing and bracket-match highlighting.
• PWA support (manifest + service worker) so Claudi installs and works fully offline.
• IndexedDB as a higher-capacity persistence backend for very large projects or many checkpoints, alongside the current localStorage fallback.

Project structure

Everything lives in index.html — state, seed project, persistence, syntax highlighter, editor, ghost completions, file tree, find/replace, live preview, diff engine, the Claude API calls, chat UI, the planning agent, the command palette, and import/export — all inside one <script> block. See CLAUDE.md for the internal architecture and the hard invariants that keep a single-file app like this maintainable.

Credits

Claudi — every feature, every line — was fully created by Claude Fable 5.