JSON Canvas MCP Server

A Model Context Protocol (MCP) server for working with JSON Canvas files — the open infinite-canvas format used by Obsidian. It lets an MCP client create, validate, read, and list .canvas files.

Built on the official mcp Python SDK (>=1.27), which negotiates the 2025-11-25 MCP protocol revision. Runs over stdio by default and optionally over the Streamable HTTP transport.

Hosts that support the MCP Apps UI extension render an interactive canvas viewer inline when you read or create a canvas — a pan/zoom, Obsidian-style preview of the nodes and edges. Text-only clients are unaffected and keep receiving the canvas as text/structured output.

Components

Tools

• create_canvas — Create a canvas from nodes (and optional edges) and write it to a date-prefixed .canvas file under OUTPUT_PATH.
  • Input: nodes (array of JSON Canvas node objects), filename (string, no extension), edges (optional array of edge objects).
  • Returns (structured): { path, node_count, edge_count }.
• validate_canvas — Validate canvas data against the JSON Canvas 1.0 specification.
  • Input: canvas (object with optional nodes and edges).
  • Returns (structured): { valid, error }.
• read_canvas — Read a stored .canvas file and return its nodes and edges.
  • Input: filename (string, with or without the .canvas extension).
  • Returns (structured): { nodes, edges } (also rendered by the canvas viewer; text fallback is the canvas JSON).
• list_canvases — List the .canvas files available in OUTPUT_PATH.
  • Returns: array of filenames.
• edit_canvas — Add, update, and/or remove nodes and edges on a stored canvas in one atomic write (a failed operation leaves the file unchanged).
  • Input: filename, plus optional add_nodes, update_nodes (partial, must include id), remove_node_ids (cascades connected edges), add_edges, update_edges, remove_edge_ids.
  • Returns (structured): { path, node_count, edge_count, canvas } — the updated canvas, so UI-capable hosts re-render it inline.
• export_canvas — Export a stored canvas to another format.
  • Input: filename, format (markdown | svg).
  • Returns (structured): { format, mime_type, content }. Markdown is an edge-ordered outline; SVG is a standalone vector image (node title lines only — plain SVG can't render Markdown).
• search_canvases — Case-insensitive substring search across stored canvases.
  • Input: query, optional filename to scope to one canvas.
  • Returns (structured): { matches: [{ filename, kind, id, field, snippet }] }.

create_canvas, read_canvas, and edit_canvas are linked to the canvas viewer via _meta.ui.resourceUri, so UI-capable hosts render the result inline.

Node objects use the JSON Canvas shape: id, type (text | file | link | group), x, y, width, height, optional color, plus type-specific fields (text, file/subpath, url, label/background/backgroundStyle). Edge objects use id, fromNode, toNode, and optional fromSide/toSide/fromEnd/toEnd/color/label.

Resources

• canvas://schema — JSON Schema for validating canvas files.
• canvas://examples/basic — A simple example canvas (two text nodes joined by an edge).
• ui://canvas/viewer.html — The interactive canvas viewer (MCP Apps UI), served with MIME type text/html;profile=mcp-app. Referenced by create_canvas and read_canvas.

Interactive canvas viewer (MCP Apps UI)

The viewer is a single self-contained HTML bundle built from the ui/ source with Vite and the official @modelcontextprotocol/ext-apps client. It renders nodes (with markdown, colors, and groups) and edges (sides, arrows

... View full README on GitHub