DEV Community

Cover image for I built an open-source Canva alternative with 42 MCP tools
Panth Patel
Panth Patel

Posted on Originally published at panth.vardayinitech.in

I built an open-source Canva alternative with 42 MCP tools

Digital Canvas is a free design editor, Apache-2.0, and it opens with no login. My first commit was on 27 October and there were 160 by the 31st. The goal is everything Canva has, with your designs stored as files you own: github.com/Panth977/digital-canvas. You can try it here.

I'm Panth Patel. I build backends and developer tools, and this is a project of my own.

Why build this at all

As a graphics editor, Canva is simple. That is a compliment, and it is also why I think the editor should be free. The templates are great and they may never be free, because someone made them. The framework, the animations and the kit are different. Those are software, and software can be opened.

So I split the problem in two: an open editor now, and a template catalogue that grows over time. I set one rule on the content side. Nothing in the library is generated. Templates, stickers and palettes come from open catalogues, with credit, and the 62 mockups are real photographs.

The file is the product

A design is one .dcanvas file. It is a zip:

mimetype         application/vnd.digital-canvas+zip
document.json    { format: "digital-canvas", version: 1, width, height, pages: [...], assets: {...} }
assets/<hash>    image bytes, named by content hash
thumbnail.png    preview of page 1
Enter fullscreen mode Exit fullscreen mode

document.json is plain, documented JSON, so a script can read and write a design without the editor. You choose where the files live: this browser, a folder on your computer, or your own Google Drive. Drive access uses the drive.file scope only, so the app sees what it created and what you picked.

The backend stores a user, a login count and a Drive refresh token. Your designs never pass through it. That backend runs on IceBase, which is another thing I built and a separate post.

One renderer everywhere

Drawing goes through CanvasKit, which is Skia compiled to WebAssembly. The UI around it is Svelte 5. packages/render has no DOM in it, so the same code draws in the browser and in Node, and the unit tests render real PNGs.

That choice pays off in export. Live playback, the web MP4 export and the agent's exporter all call the same frame function, so what you see while scrubbing is what lands in the file. PNG, JPG, SVG, PDF (raster or vector) and MP4 all come out of this one engine.

Today that covers 2,000+ Google Fonts, 270+ size presets, 17 adjustments, 35 filters, tables, charts, QR codes and a video timeline. The background remover (BiRefNet) and Magic Eraser (LaMa) run on your device. The AI features use your own key, and that key goes only to its provider.

Give it to your agent

This is the part I care about most. You spend hours learning an editor. An agent should be able to use that same editor for you, and leave you a design you can open and finish by hand.

packages/mcp is an MCP server with 42 tools. Any client with remote MCP and OAuth can connect with one URL:

claude mcp add --transport http digital-canvas https://digital-canvas-p977.web.app/mcp
Enter fullscreen mode Exit fullscreen mode

The agent searches your uploads and free stock, composes the page, calls render_page to look at the result, and calls check_design, which measures overflow, contrast on the real pixels, cut-off text and tiny fonts. Then it fixes what failed and exports. The tools run on your own device, and the server is only a relay.

That loop is why it has eyes: the agent sees what it made and gets a measured critique before it hands anything back. The result is an ordinary .dcanvas file, not a flattened image.

What is not there yet

It is web only today. The next phase is a version you run locally from any folder, with no login and no Drive setup. After that come the tools people expect from a modern editor: Instagram-style edit animations, hooks, more mockups and many more templates.

The repo is Apache-2.0. If you try it, I'd like to know one thing: what is the first thing you tried to do that it could not?

Top comments (0)