# mydraft.cc: an open source wireframing tool in the browser > mydraft.cc is a browser based wireframing editor written in TypeScript with React and Redux, aimed at developers who need diagrams without a per seat licence fee. The README documents a simple npm workflow, and the repository has moved further than the README admits, from Webpack to Vite and from local files to collaborative editing. **mydraft-cc/ui** — Open source wireframing tool written in typescript, react and redux. - Repository: https://github.com/mydraft-cc/ui - Website: https://mydraft.cc - Stars: 862 · Forks: 127 - Language: TypeScript - License: MIT - Published: 2026-10-20 · Updated: 2026-10-20 · Language: en - Canonical page: https://hysenlabs.com/projects/mydraft-cc-ui ## The problem the author set out to solve The motivation is stated in the first person in the README, and it is a licensing complaint rather than a feature wish list. The author writes as a developer who has to create wireframes from time to time, notes that there are great commercial tools in the market, and observes that most of them cost more than a full Office suite per month. The conclusion drawn is that there is a need for a good and free solution. That framing decides the audience. This is a tool for developers and small teams who need a diagram quickly and resent paying per seat for it, not a replacement for a professional design suite with libraries, prototypes and handoff built in. The project is live at mydraft.cc, and the README invites you to test it there before installing anything. The milestones tell the history of the editor in a compact form. Version 0.7 delivered the first working editor, 0.9 a simple server that saves diagrams under a random id, 1.0 a finalised version with small improvements and bug fixes, 1.0.1 management of pages within a project using background pages, 1.0.2 a presentation mode, and 1.0.3 linking of UI elements to external sources or to other pages. Every milestone listed is marked done, which tells you the feature plan stopped there. Contribution is also described: issues that are easy to start with are marked, and the README points contributors to a shapes readme under src/wireframes/shapes to understand how new shapes are created. ## The stack, and where the README has fallen behind The README lists the technology stack as Ant design, React, React Hooks, Redux, Typescript and Webpack. Five of those six are still visible in the repository. package.json depends on antd, react, react-dom, redux with @reduxjs/toolkit, redux-thunk and reselect, react-redux and react-router, and the source is TypeScript with tsconfig.json and a separate tsconfig.node.json. Ant Design appears as the component library with its icon package. Webpack is the exception. The repository root contains vite.config.ts and vitest.config.ts, and the npm scripts call Vite directly, with the start script running vite --host and the build script running tsc followed by vite build. So the bundler in the README has been replaced by Vite, and the README has not been updated to say so. That mismatch is worth keeping in mind when you read the rest of the README, since it is the kind of drift that makes a quick start guide unreliable. The documented workflow still works, but the details around it, especially the port, have moved. Two more pieces of the toolchain are visible in package.json. Storybook is set up for component work, with a build-storybook script, and Chromatic is wired in for visual regression on those components. That combination tells you the editor interface is developed as a component library rather than as one large application file. ## Running the editor on your machine The README says the requirement is node.js and a terminal, and gives two commands. ```bash npm i npm start ``` After that it tells you to go to https://localhost:3002. There is a port discrepancy here that will cost you a minute if you are not careful. The start script in package.json runs vite --host without a port argument, and the Dockerfile in the repository exposes the default Vite port and starts the server with npm start. The compose file maps host port 8080 to the container port 5173. So depending on how you launch it, the editor appears on 3002 as the README claims, on 5173 as the container configuration assumes, or on 8080 through compose. The package.json also defines a start-local variant that runs vite with the local-server mode, and the repository carries a .env file plus a .env.local-server file. The milestone list explains why that mode exists: version 0.9 added a simple server that saves diagrams under a random id, so the local-server configuration is the one that points the editor at a backend that can persist what you draw. The browser mode matters too. The start script binds the host, which is how you reach the editor from another machine on your network rather than only from the machine running the process. ## Building for a web server and the container image Production builds follow the same shape. ```bash npm i npm run build ``` The README then says to copy the files from the dist folder to your webserver. The build script in package.json is tsc followed by vite build, so type checking runs before bundling and a type error stops the build rather than shipping a broken bundle. For containerised deployment the repository ships a Dockerfile and a compose.yaml. The compose file is short: The compose file is short: it defines a single service named mydraft that builds from the current directory and maps host port 8080 to container port 5173. The Dockerfile builds on node:22-alpine, copies the package manifests and the vendored packages first, runs npm install, and only then copies the rest of the source. It runs the test suite as a build step before the build itself, and finishes with the start command as the entry point. ```dockerfile # Test Frontend RUN npm run test:ci # Build Frontend RUN npm run build # Expose the default vite port. EXPOSE 5173 # Automatically start the server. ENTRYPOINT ["npm", "start"] ``` Running the tests inside the image build is a deliberate choice, and it means an image cannot be produced from a commit whose tests fail. It also means the container build takes longer than an application build, which is worth knowing before you wire it into a pipeline. ## The canvas, the shapes and the drawing model The repository topics list canvas and paperjs alongside react, redux, scss and typescript. The package dependencies tell a more current story: pixi.js for rendering, d3-selection and d3-zoom for interaction, and @svgdotjs/svg.js for SVG manipulation, with react-beautiful-dnd and react-dnd for drag and drop, and react-color for colour picking. The dividing line is that this editor works on a canvas rather than on a DOM tree of elements. A wireframe is a composition of shapes, and the shape system is the part of the codebase that matters most if you want to extend it. The README says to read src/wireframes/shapes/README.md to understand how to create new shapes, which tells you the shape model is documented in one place and that new shapes are a supported activity rather than an accident. Two consequences follow from a canvas based editor. Zoom and pan come from d3-zoom rather than from CSS transforms on individual elements, and drag and drop is used for reordering layers rather than for moving freehand shapes. Neither of these is a negative, but they do mean the code is not structured like a typical document editor. The other thing a canvas buys you is export. file-saver is a dependency, react-to-print is a dependency, and sharp is present for image processing, which together point to images and printable output rather than to a DOM you can inspect with a developer tool. ## Saving, sharing and editing together The persistence story in the repository is more capable than the milestone list suggests. Three dependencies point the same way: @hocuspocus/provider for the collaborative editing server protocol, yjs and y-protocols for the shared document model, and a vendored tarball of yjs-redux that is referenced from package.json through a file path and copied into the image by the Dockerfile. The vendored package is the detail that explains the rest. Because package.json points at a local tarball rather than the registry, a plain npm install would fail without the vendor directory, which is exactly why the Dockerfile copies vendor separately and why the README does not tell you to run a registry install. The milestones confirm the intent of the 0.9 release, a simple server that saves diagrams with a random id, and later milestones added pages within a project with background pages, a presentation mode, and linking of UI elements to external sources or to other pages. Combined with the collaborative editing dependencies, that suggests diagrams are meant to be shared and edited at the same time rather than passed around as files. The .env and .env.local-server files in the root are where the endpoint for that server is configured, and the project also exposes a start-local script for running against a local server rather than the hosted one. ## Testing, releases and the state of the repository The test story is a browser test story. The package.json test script runs vitest in browser mode, and test:ci runs vitest with coverage, with codecov.yml and a codecov badge in the README pointing at the coverage service. Storybook is available both as a development server on port 6006 and as a build, and Chromatic is wired to that project for visual comparison. Browser mode tests are slower than unit tests running in node, and they need a browser, which is why the Docker image carries the whole test run as a build step. The tradeoff buys confidence that the canvas and drag interactions behave, which is exactly where a wireframing editor breaks. The release situation is where the repository is least settled. There is one published release, version 1.1, dated 2024-10-19, while the last push was on 2026-10-13. So the branch is active and the published release is roughly two years behind it. The README's own milestone list stops at 1.0.3, and the package.json version field still reads 1.0.0, so even the internal version string does not line up with the published tag. That gap is not disqualifying for a self-hosted tool, but it does mean you should pin what you deploy rather than assume the latest tag contains the current code, and expect to read commits rather than release notes. The licence is MIT, in LICENSE.txt at the root, which is permissive enough for commercial and internal use with attribution. ## How mydraft.cc compares to Pencil and the commercial tools The README makes the comparison itself, which is unusual and useful. It names Pencil, an open source wireframing tool at pencil.evolus.vn, and lists four objections to it: it uses outdated technology and is therefore hard to contribute to, it is mainly maintained by a small company and few people, it is missing advanced features, and its user interface design is really oldschool. The first two points are about the health of a project rather than its features. An open source tool maintained by one small team has a bus factor problem, and a stack built on current React and TypeScript attracts contributors in a way an older one does not. The React, Redux and TypeScript stack listed in the README is the direct answer to the first objection. The third point, missing advanced features, is the honest weakness of a small open source project, and the milestone list shows mydraft.cc answering it piecemeal: background pages, presentation mode, links between elements and pages. Against the commercial tools the argument is purely economic. The README does not claim the editor does everything they do, it claims that most of them cost more per month than a full Office suite, and that for a developer who needs a diagram occasionally, that price is the deciding factor. So the choice is straightforward. If you need design system management, prototypes and developer handoff, you need a commercial suite. If you need to sketch a flow, an empty state or a rough layout and you want it free and self hosted, mydraft.cc is a reasonable candidate, and the way to check it is to open the hosted version at mydraft.cc and try one diagram before installing anything. ## Conclusion mydraft.cc suits developers who sketch interfaces occasionally and want an editor that runs from npm without a licence conversation, and for teams that want to host the tool themselves, since the repository ships a Dockerfile and a compose file. It is the wrong choice for a design team that needs a structured component library, a handoff pipeline to developers, or enterprise controls, and it is a poor fit if you need a maintained release cadence, because the only published release is 1.1 from 2024-10-19 while the branch has moved on since. Verify first that the canvas behaviour you need is covered by the shapes documented in src/wireframes/shapes/README.md, then run npm start and check the port, because the README says 3002 while the container configuration maps 5173. ## FAQ ### How do I run mydraft.cc locally? Install node.js, then run npm i and npm start, and open the editor in your browser. The README points at https://localhost:3002, while the compose configuration maps host port 8080 to the container port 5173. ### What framework is mydraft.cc built with? The README lists Ant design, React, React Hooks, Redux, Typescript and Webpack. The repository has since moved the bundler to Vite, with vite.config.ts and a build script that runs tsc and vite build. ### How do I add a new shape to the editor? The README says to read src/wireframes/shapes/README.md to understand how to create new shapes. ### Is mydraft.cc free to use? The project is MIT licensed and hosted at mydraft.cc. The README's argument is that commercial wireframing tools often cost more per month than a full Office suite, and it wants a free option for developers. ## Sources - [License: MIT](https://github.com/mydraft-cc/ui/blob/master/LICENSE) - [mydraft-cc/ui on GitHub](https://github.com/mydraft-cc/ui) - [Project website](https://mydraft.cc) - [README](https://github.com/mydraft-cc/ui/blob/master/README.md) - [Releases](https://github.com/mydraft-cc/ui/releases) --- Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/mydraft-cc-ui