Drawing the Infinite Canvas: Smart Shapes with Headless React
If you've ever tried to build a diagramming tool, a whiteboard, or any kind of visual editor that lives on an infinite canvas, you know the pain. Panning, zooming, hit detection, shape resizing, and keeping everything performant is a gnarly problem. Most of the time, you end up writing a custom engine from scratch or fighting a heavy library that dictates your UI.
That's why DGMJS caught my eye. It's a library that gives you the core logic for an infinite canvas with smart shapes, but it does it in a headless way. You bring the React components, and it handles the geometry, the interaction, and the state. It's a refreshing take on a problem that usually forces you into a monolithic solution.
What It Does
DGMJS is a framework for building diagramming applications. It provides the underlying "brain" for your canvas: the math for coordinate systems, the logic for shape manipulation (move, resize, rotate, connect), and the data structures to manage nodes and edges. The shapes are "smart" because they know their own geometry and how to behave when they're connected to other shapes.
The key distinction is that it's headless. It does not render a single pixel of UI for you. Instead, it uses React hooks to expose state and event handlers. You are responsible for rendering the shapes with SVG, HTML, Canvas, or whatever your heart desires. This is huge for developers who need full control over the visual styling and DOM structure.
Under the hood, it's built with TypeScript and uses a functional, immutable data model (via Immer) to keep the state predictable. The rendering itself is abstracted, so you can plug in your own renderer—whether that's a DOM-based view for accessibility or a WebGL view for heavy performance.
Why It's Cool
Here's where it gets interesting for a developer. DGMJS doesn't just give you a div and say "go". It gives you a philosophy and the tools to implement it.
First, the headless architecture is a win. You are not locked into a specific visual style. Want a minimalist, borderless UI like Figma? Easy. Want a skeuomorphic, paper-textured pad like a classic whiteboard? Easy. The logic is separate from the presentation, which makes your codebase cleaner and more testable.
Second, it handles the hard parts of an infinite canvas: viewport transforms (pan/zoom) and shape containment. The useCanvas and useViewport hooks give you the exact transform math you need, and they handle the subtlety of converting between screen coordinates and canvas coordinates. This is usually where you spend days debugging jittery interactions. Here, it's just done.
Third, the smart shape system is genuinely clever. Shapes like rectangles, diamonds, and arrows aren't just polygons. They carry semantic geometry. An arrow knows where its head and tail are on the bounding box, so when you connect two shapes, the routing looks natural. A rectangle knows its resize handles without you hardcoding the hit zones. It feels like building with LEGO blocks instead of sculpting raw clay.
The library is also built for extensibility. You can define your own custom shapes using the data model, and they'll integrate with the existing transformation and connection systems. This makes it a great fit for specialized tools like UML editors, network topology maps, or even game level designers.
How to Try It
Getting started is straightforward. The repo has a live demo you can poke at to see the capabilities in action. Head over to the GitHub repo to see the examples in the examples/ folder. They include a basic setup with a DOM-based canvas.
If you want to spin it up locally, just clone the repo and run the dev server:
git clone https://github.com/dgmjs/dgmjs.git
cd dgmjs
npm install
npm run dev
You'll see a working example that you can inspect. The API is exposed via hooks like useCanvas and useShape, and the docs in the README give you a clear starting point for building your own custom nodes and edges.
Final Thoughts
DGMJS feels like it's solving a real pain point without overpromising. It's not a "no-code" visual magic box; it's a library for developers who respect their craft and want control. If you're building a diagramming tool, a floor planner, or any kind of spatial UI, this is worth a look. It might not have the polish of a commercial offering, but the headless approach and smart shape logic give you a solid foundation to build something genuinely impressive.
Found this interesting? We share cool projects like this all the time. Follow us on Twitter @githubprojects for more dev-focused finds.