Components for building design tools like Framer, Canva, and more.
Infinite Canvas. Layers. Drag and Drop. Resize. Style. Composable. Performant. Developer-friendly.
Try the full editor on your desktop
Look, building a design tool from scratch is not easy. You need infinite canvas, layer management, selection tools, drag-and-drop, resize handles, apis to handle layer properties, styles and values...It's a lot of moving parts.
We've been there. We've built a few design tools ourselves. We've struggled with the same problems for years.
Existing libraries do too little, or too much. They are not customizable. They have a steep learning curve. You end up with a lot of custom code to make them work the way you want.
We've built the solution.
Here's what it looks like.
<Designer>
<DesignerContent>
<DesignerCanvas />
</DesignerContent>
</Designer>
Three components. Five lines of code. A fully interactive canvas with zoom, pan, and layer selection.
Primitives to help you build: Canvas, Frames, Panels, Panes, Headers, Toolbars, Actions, and more. You build by composing the components you need. Style with Tailwind CSS.
Here's the code for a pane that will only show for frame layers. It has an action to change layer fill color.
<DesignerPane showForLayerTypes={["frame"]}>
<ActionFill />
</DesignerPane>If you need an action to rotate the layer, you can add it to the pane like this:
<DesignerPane showForLayerTypes={["frame"]}>
<ActionFill />
<ActionRotate />
</DesignerPane>The API is dead simple. It's just hooks. useLayers, useZoom, useUndo, useDesignerAction...
Here's the code to unselect all layers and reset the zoom:
const designerAction = useDesignerAction()
designerAction("UNSELECT_ALL")
designerAction("ZOOM_RESET")You already know how this works.
Layers are simple objects styled with CSS variables. Here's how easy it is to add a custom action to change text color:
const fontColorAction = createLayerCssVarAction("--color", "#000")
const [fontColor, setFontColor] = useLayerCssVarAction(fontColorAction)
<button onClick={() => setFontColor("#fff")}>Click</button>
We have built actions for all types of layer manipulation including transforms, rotation, opacity, font browser, image filters, image cropping and more.
We've also made it really easy to bring in your own custom layer types. Build image editors, SVG tools, 3D interfaces, whatever you want.
What about performance? It's really fast. We test on the slowest machines with hundreds of layers. It runs smoothly. We handle re-renders, smart contextual updates and state management.
This is just scratching the surface. There's a lot more: multi-layer support, history management, pages, keyboard shortcuts, custom themes, and more.
We've been using this in production for years. It's now ready for you. One-time payment. Unlimited projects. No subscriptions. No limits.