hub / github.com/dgmjs/dgmjs
github.com/dgmjs/dgmjs @v1.5.5
Chat with this repo
1,926 symbols
5,230 edges
294 files
701 documented · 36%
● updated 6mo agov1.5.5 · 2025-12-26★ 1,54720 open issues
What it actually does AI analysis from the code graph — generated when you open this
loading…
README
DGM.js
An infinite canvas with smart shapes. It supports:
- 💡 Smart shapes (scripting, constraints, extended properties)
- 🔧 Headless components (React)
- 🔥 Infinite canvas
- 📑 Multi-page support
- 👍 Hand-drawn styles
- 👥 Real-time collaboration
- 🎨 Dark mode (adaptive colors)
- 📸 Export to image (PNG, JPEG, WebP, SVG)
- 📕 Export to PDF
- 🔤 Rich text
- 🧑🏻💻 JSON export/import
Getting started
Showcase
- Frame0 - Sketch-style low-fi wireframing tool
- DGM App - Full-featured web-based sketchnotes app
- Nakso - A local-first whiteboard application.
- draw2app - Generate web app from low-fidelity sketch by OpenAI.
Contribution
Please note that this project is not open contribution, so we do not accept any pull requests.
Build
# clone repository
$ git clone https://github.com/dgmjs/dgmjs.git
$ cd dgmjs
# install all dependencies
$ npm install
# build all packages
$ npm run build --workspaces --if-present
# run demo app
$ npm run dev -w demo
License
DGM.js is distributed under the GPLv3 license. If you want non-GPL license, please see our licensing options.
Extension points exported contracts — how you extend this code
UserState (Interface)
(no doc) [2 implementers]
packages/dgmjs-plugin-yjs/src/yjs-user-presence-plugin.ts
SelectShapeDialogState (Interface)
(no doc) [1 implementers]
apps/demo/src/components/dialogs/select-shape-dialog.tsx
DGMFloatingToolbarHolderProps (Interface)
(no doc)
packages/react/src/DGMFloatingToolbarHolder.tsx
Constraint (Interface)
(no doc)
packages/core/src/shapes.ts
Window (Interface)
(no doc)
apps/docs/src/components/app/app.tsx
Postprocess (Interface)
(no doc)
packages/dgmjs-plugin-yjs/src/sync-to-store.ts
Window (Interface)
(no doc)
apps/demo/src/app.tsx
DGMFrameNameInplaceEditorProps (Interface)
(no doc)
packages/react/src/DGMFrameNameInplaceEditor.tsx
Core symbols most depended-on inside this repo
push
called by 258
packages/core/src/core/transform.ts
assign
called by 118
packages/core/src/core/transaction.ts
getCurrentPage
called by 96
packages/core/src/editor.ts
resolveColor
called by 96
packages/core/src/graphics/graphics.ts
onChange
called by 94
apps/demo/src/components/common/use-media-query.tsx
cn
called by 82
apps/demo/src/lib/utils.ts
setJson
called by 79
packages/core/src/core/obj.ts
get
called by 76
packages/core/src/mal/env.ts
Shape
Languages
TypeScript100%
Modules by API surface
packages/core/src/shapes.ts209 symbols
packages/core/src/editor.ts144 symbols
packages/core/src/mal/core.ts77 symbols
packages/core/src/mal/types.ts68 symbols
packages/core/src/graphics/memoization-canvas.ts65 symbols
packages/core/src/graphics/geometry.ts64 symbols
packages/core/src/core/transaction.ts62 symbols
packages/core/src/graphics/graphics.ts56 symbols
packages/core/src/manipulators/snapper.ts40 symbols
packages/core/src/macro.ts36 symbols
packages/pdf/src/jspdf-context2d.ts34 symbols
packages/core/src/actions.ts32 symbols
For agents
$ claude mcp add dgmjs \
-- python -m otcore.mcp_server <graph>