Designful Editor SDK
Build a serious design editor without rebuilding the canvas stack.
Designful is an opensource figma-style, canvas-first SDK for teams who need snapping, history, layering, export, and precision tools out of the box, with the freedom to plug in custom workflows.
Everything you need to ship the editor, not just the canvas.
Designful wraps the hard parts: interaction tooling, state, and rendering. Build on top of a stable core and focus on your product.
Smart editing tools
Selection boxes, transform handles, multi-select, and precision nudges.
Layout systems
Auto layout, group management, frames, and constraints for responsive designs.
Asset pipeline
Images, SVG import, custom HTML nodes, and styled text handling.
Export and storage
Export PNG, JPG, SVG with accurate bounds and state persistence.
Performance control
On-demand render, culling, and level of detail management.
Extensible by design
Plugins, manager APIs, and events to support bespoke workflows.
See the SDK in action
Launch the editor to experience snapping, grouping, and live transforms.
Architecture that stays clean as your editor grows.
Managers handle focused responsibilities. Compose them for your use case without turning your editor into a monolith.
Composable core
- Selection, transform, history, and storage managers
- Alignment, snapping, and ruler managers
- Frames, groups, templates, and components
import { EditorCore } from '@designful/editor-core'
const editor = new EditorCore(container, {
width: 1280,
height: 720,
backgroundColor: '#ffffff'
})
editor.addShape('rect', {
x: 120,
y: 80,
width: 320,
height: 200
})Built for teams shipping design workflows.
Use Designful for UI builders, marketing tools, templates, or internal editors.
Template editors
Lock sections, expose variables, and keep brand rules intact.
Marketing content
Design banners, slides, and social graphics at scale.
Diagramming and flows
Connection tools, guides, and snapping for structured layouts.
FAQ
Quick answers to common questions.
Do I have to use the UI package?
No. The core SDK is UI-agnostic. Use the Vue UI package or build your own.
How do I extend behavior?
Use plugins and manager events to add tools, actions, or custom renderers.
Is it ready for production?
It is built with performance features like culling and cached rendering.
Start building your editor today.
Spin up a project, wire your workflow, and ship confidently.