{"id":49574558,"url":"https://github.com/1vav/embedded-editor-for-claude-code","last_synced_at":"2026-05-03T16:04:11.171Z","repository":{"id":353128370,"uuid":"1216441251","full_name":"1vav/embedded-editor-for-claude-code","owner":"1vav","description":"Embedded visual workspace for Claude Code — Excalidraw, tldraw, and Markdown with MCP tools and inline PNG previews","archived":false,"fork":false,"pushed_at":"2026-05-02T12:53:39.000Z","size":31192,"stargazers_count":1,"open_issues_count":8,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-02T14:32:17.043Z","etag":null,"topics":["anthropic","claude-code","claude-desktop","excalidraw","markdown","tldraw"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/1vav.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":"AUTHORS.md","dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-04-20T23:01:01.000Z","updated_at":"2026-05-02T12:52:21.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/1vav/embedded-editor-for-claude-code","commit_stats":null,"previous_names":["1vav/embedded-editor-for-claude-code"],"tags_count":31,"template":false,"template_full_name":null,"purl":"pkg:github/1vav/embedded-editor-for-claude-code","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1vav%2Fembedded-editor-for-claude-code","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1vav%2Fembedded-editor-for-claude-code/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1vav%2Fembedded-editor-for-claude-code/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1vav%2Fembedded-editor-for-claude-code/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/1vav","download_url":"https://codeload.github.com/1vav/embedded-editor-for-claude-code/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/1vav%2Fembedded-editor-for-claude-code/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32575127,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-03T06:36:36.687Z","status":"ssl_error","status_checked_at":"2026-05-03T06:36:09.306Z","response_time":103,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["anthropic","claude-code","claude-desktop","excalidraw","markdown","tldraw"],"created_at":"2026-05-03T16:04:10.167Z","updated_at":"2026-05-03T16:04:11.164Z","avatar_url":"https://github.com/1vav.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Embedded Editor for Claude Code\n\nAn embedded visual workspace for Claude Code — edit Excalidraw diagrams, tldraw canvases, Markdown notes, and DuckDB tables in the browser preview pane, all linked together with `[[wikilinks]]`.\n\n![ee.png](assets/ee.png)\n\nClaude also gets **MCP tools** to create, query, and edit all four file types inline — including authentic PNG previews for diagrams and structured table data for DuckDB files.\n\n---\n\n## What it does\n\n| | |\n|---|---|\n| **⬡ Excalidraw** | Rough hand-drawn diagrams. Claude creates and edits them via MCP tools and sees PNG previews inline. Also fully editable in the browser. |\n| **◈ tldraw** | Infinite canvas with a full shape library. Browser-only — no MCP tools needed, just open and draw. |\n| **¶ Markdown** | Full CommonMark with `[[wikilinks]]`, `![[diagram embeds]]`, images, tables, code blocks, strikethrough. Frontmatter panel, note style/color picker. |\n| **🦆 DuckDB** | Real embedded analytical tables. Claude creates schemas, writes rows, runs SQL queries, and creates dynamic views via MCP tools. Embed live previews with `![[name.duckdb]]`. Click column headers to sort. Click the filename to rename in place. |\n| **📄 PDF** | Drop in a `.pdf` file and open it in the browser — page-by-page viewer with zoom. |\n| **📊 CSV** | `.csv` files open as read-only tables with the same column-sort UI as DuckDB. |\n\nAll editors are **live-synced** via SSE — Claude's edits appear in the browser immediately and vice versa.\n\n---\n\n## Quick start\n\n### Global install (recommended)\n\nRegisters the MCP server and `/editor-start` · `/editor-stop` slash commands for every project:\n\n```sh\nnpx embedded-editor-for-claude-code init --global\n```\n\nRestart Claude Code, then use the slash commands in any project:\n\n```text\n/editor-start    ← starts the viewer and opens it in the preview pane\n/editor-stop     ← shuts it down\n```\n\n### Per-project install (optional)\n\nAdds a full Excalidraw element reference to `CLAUDE.md` so Claude knows the diagram API without being told. Run inside the project you want to set up:\n\n```sh\ncd your-project\nnpx embedded-editor-for-claude-code init\n```\n\n### Update to latest version\n\n```sh\nnpx embedded-editor-for-claude-code@latest init --global\n```\n\n\u003e Re-run `init` after upgrading to refresh the API reference in `CLAUDE.md`.\n\n### Manual MCP registration (alternative)\n\nIf you prefer not to use `init`, add the MCP server directly:\n\n```sh\nclaude mcp add --transport stdio embedded-editor -- npx -y embedded-editor-for-claude-code\n```\n\n\u003e **Desktop app users:** installation always requires a terminal step. Run any command above in a terminal, then switch to the desktop app — it picks up the configuration automatically without a restart.\n\n### Ask Claude to draw\n\n\u003e \"Draw an architecture diagram of this service\"  \n\u003e \"Sketch the auth flow as a sequence diagram\"  \n\u003e \"Add a database node to the existing diagram\"\n\nClaude calls the MCP tools and returns PNG previews inline as it builds the diagram.\n\n### DuckDB tables with a live query pane\n\n\u003e \"Create a table tracking sprint velocity — story points planned vs delivered\"\n\nClaude creates `velocity.duckdb`, defines the schema, and seeds it with rows. Open the file in the browser and you get a full table viewer with a **slideout SQL query pane**:\n\n```\n┌─────────────────────────────────────────────────────────────────┐\n│  velocity.duckdb  · 4 rows  │ ⌘ Query │ ≡ Table │ ⊞ Cards │ ↓  │\n├──────────┬───────────────────────────────────────────────────────┤\n│ SQL·QUERY│  sprint  │ planned │ delivered │ pct   │ status      │\n│          ├──────────┼─────────┼───────────┼───────┼─────────────│\n│ SELECT   │  1       │ 34      │ 29        │ 85.3% │ ⚠ Below     │\n│   sprint,│  2       │ 40      │ 38        │ 95.0% │ ✓           │\n│   ...    │  3       │ 36      │ 36        │ 100%  │ ✓           │\n│          │  4       │ 42      │ 31        │ 73.8% │ ⚠ Below     │\n│ ▶ Run ⌘↵ │                                                       │\n└──────────┴───────────────────────────────────────────────────────┘\n```\n\nClick **⌘ Query** to slide the SQL editor open. Write any SQL and hit `⌘↵` — results replace the table view instantly. Switch to **⊞ Cards** for a Kanban-style board that groups rows by any column (auto-detected from `status`, `state`, `stage`, etc.) with drag-to-regroup.\n\nClick any **column header** to sort (click again to reverse). The header turns amber and shows ▲/▼. Click the **filename** in the toolbar to rename the file in place — the tab bar, sidebar, and all wikilinks update automatically.\n\nThe toolbar also shows **\"updated Xm ago\"** — a timestamp updated after every `write_rows` call, equivalent to Jupyter's \"last run\" indicator.\n\nEmbed a live preview in any note with `![[velocity.duckdb]]` — it renders an inline table that updates whenever the data changes. The embed supports the same column sort.\n\n---\n\n## MCP tools\n\n**Excalidraw diagrams**\n\n| Tool | What it does |\n|---|---|\n| `list_diagrams` | List all `.excalidraw` files |\n| `create_diagram` | Create a blank diagram; returns PNG preview |\n| `read_diagram` | Return current JSON + PNG |\n| `write_diagram` | Replace elements; returns PNG |\n| `append_elements` | Add elements to existing diagram; returns PNG |\n| `delete_diagram` | Delete a diagram file |\n\n**Markdown notes**\n\n| Tool | What it does |\n|---|---|\n| `list_notes` | List all `.md` notes |\n| `create_note` | Create a blank note |\n| `read_note` | Read note content |\n| `write_note` | Write (replace) note content |\n| `delete_note` | Delete a note |\n\n**DuckDB tables**\n\n| Tool | What it does |\n|---|---|\n| `list_tables` | List all `.duckdb` files |\n| `create_table` | Create a new DuckDB file with an optional schema |\n| `read_table` | Read rows from the first user table (returns markdown) |\n| `write_rows` | Upsert rows into a table (batched — all rows in one SQL statement) |\n| `delete_rows` | Delete rows matching a WHERE clause |\n| `query_table` | Run arbitrary SQL; optional `save_as` inserts results into another table |\n| `create_view` | Create a named DuckDB VIEW — a saved SQL query that re-executes dynamically on every read. Any column whose values match workspace file names gets a companion `_name` column with `[[wikilinks]]`; the browser renders those cells as clickable navigation links. |\n\n**Workspace**\n\n| Tool | What it does |\n|---|---|\n| `list_workspace` | List all files grouped by type in one call (diagrams, notes, tldraw, tables) |\n| `rename_file` | Rename a file and rewrite all `[[wikilinks]]` |\n| `get_backlinks` | Find all files that link to a given file |\n| `list_history` | List saved snapshots for a diagram |\n| `restore_snapshot` | Restore a diagram to a saved version |\n| `list_tldraw` | List tldraw canvas files |\n| `read_tldraw` | Read tldraw canvas JSON |\n\n### How PNG rendering works\n\n1. Claude calls `write_diagram` with Excalidraw JSON elements\n2. The server writes the `.excalidraw` file\n3. Excalidraw's `exportToSvg` runs in a jsdom shim — authentic SVG with rough.js strokes, hachure fills, real arrowheads\n4. `@resvg/resvg-js` rasterizes to PNG\n5. Returns `{type: \"image\", mimeType: \"image/png\", data: \u003cbase64\u003e}` — Claude Code renders it inline\n\n---\n\n## Viewer features\n\n- **File browser** — sidebar lists all `.excalidraw`, `.tldraw`, `.md`, `.duckdb`, `.pdf`, and `.csv` files; filter by type\n- **Wikilinks** — `[[filename]]` in any editor navigates to that file as a new tab\n- **Diagram embeds** — `![[diagram.excalidraw]]` in Markdown renders the diagram inline in preview\n- **Image embeds** — `![alt](image.png)` works with local files; the server serves them from the project directory\n- **Backlinks** — see which files link to the current one\n- **Version history** — last 30 versions auto-saved; browse and restore from the history panel (`⟳`)\n- **Live rename** — renaming rewrites all `[[wikilinks]]` across the project\n- **Live sync** — SSE events push changes to all open tabs instantly\n- **Light/dark** — follows your OS preference\n- **Note style picker** — font style (Serif · Sans · Literary · Compact · Mono) and color profile (Auto · Sepia · Paper · Night · Forest) selectors in the Markdown toolbar; each setting is independent and persists across sessions\n- **Frontmatter panel** — YAML front matter in notes renders as a collapsible property panel; dates, URLs, and booleans get styled display\n- **External links** — because the preview pane only allows `localhost` navigation, clicking any external link copies its URL to the clipboard (a \"link copied\" toast confirms it)\n- **Drag-to-reorder** — grab handles appear on hover for paragraphs, table rows, list items, headings (with their sections), and whole tables; drag to reorder\n- **Column sort** — click any column header in DuckDB or CSV views to sort asc/desc (▲/▼); click again to reverse; numeric values sort numerically\n- **Inline rename** — click the filename in a DuckDB tab or embed header to rename it in place; all wikilinks update via the server\n\n### Slash commands\n\nIn the Markdown note editor, type `/` at the start of a line to open the command palette:\n\n![slash_commands.png](assets/slash_commands.png)\n\n| Command | What it does |\n|---|---|\n| `/diagram [description]` | Creates a new Excalidraw diagram, embeds it as `![[name.excalidraw]]`, and pre-fills the prompt bar with your description so Claude populates it |\n| `/canvas [description]` | Creates a new tldraw canvas and embeds it as `![[name.tldraw]]` |\n| `/note [description]` | Creates a new linked Markdown note, embeds it as `[[name]]`, and pre-fills the prompt bar for Claude to write its content |\n| `/table [description]` | Creates a new DuckDB table file with a slug-based name derived from the description (e.g. `/table sprint velocity` → `sprint-velocity-a3f.duckdb`), embeds it, and pre-fills the prompt bar so Claude defines the schema |\n| `/query [description]` | Creates a new DuckDB file as a query result target with a slug-based name, embeds it, and pre-fills Claude to write the query SQL |\n| `/link` | Opens a searchable picker of all existing files and inserts a wikilink |\n\n**How it works:**\n\n1. Type `/diagram` (or `/d` to narrow) — the palette shows matching commands\n2. Press `Space` and type a description — the option updates to show your text\n3. Press `Tab` or `Enter` to accept — the file is created instantly, the slash command is replaced with the wikilink embed, and the prompt bar below is pre-filled with your description ready to send to Claude\n\nExample: typing `/diagram show the auth flow` then pressing Tab creates `diagram-abc123.excalidraw`, inserts `![[diagram-abc123.excalidraw]]` in the note, and pre-fills:\n\n```\nshow the auth flow\n\nDiagram file: [[diagram-abc123.excalidraw]] (already created). Use the write_diagram MCP tool to populate it.\n```\n\nCopy that into Claude and it draws the diagram directly into the linked file.\n\n---\n\n## Architecture\n\n### Excalidraw\n\n![[architecture.excalidraw]]\n\n### tldraw\n\n![[architecture.tldraw]]\n\n---\n\n## Diagram API knowledge\n\nRunning `npx embedded-editor-for-claude-code init` writes a complete **Excalidraw element reference** into your `CLAUDE.md`, including:\n\n- All element types (`rectangle`, `ellipse`, `diamond`, `arrow`, `text`, …)\n- Every valid prop value (colors, fill styles, roughness levels, stroke styles)\n- Arrow binding syntax\n- Copy-pasteable minimal examples\n\nThe guide is stamped with the exact package versions it was generated from. Re-run `init` after upgrading `embedded-editor` to refresh it.\n\n---\n\n## Requirements\n\n- **Node.js 18+**\n- **[`@resvg/resvg-js`](https://github.com/yisibl/resvg-js)** — prebuilt binaries for macOS (arm64/x64), Linux (x64/arm64), Windows (x64). No compilation needed on these platforms.\n\n---\n\n## Development\n\n```sh\ngit clone https://github.com/1vav/embedded-editor-for-claude-code.git\ncd embedded-editor-for-claude-code\nnpm install\nnpm run build          # generate vendor/ bundles\n\n# Rebuild after changing src/viewer/entry.jsx\nnode scripts/build-viewer-bundle.mjs\n\n# Rebuild after bumping @excalidraw/excalidraw\nnode scripts/build-excalidraw-bundle.mjs\n\n# Smoke test (MCP stdio protocol happy path)\nnode scripts/smoke-stdio.mjs\n```\n\nSee [CONTRIBUTING.md](./CONTRIBUTING.md) for full contribution guidelines.\n\n---\n\n## License\n\nMIT — see [LICENSE](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1vav%2Fembedded-editor-for-claude-code","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F1vav%2Fembedded-editor-for-claude-code","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F1vav%2Fembedded-editor-for-claude-code/lists"}