Introduction

What is Design on Web?

Design on Web is an embeddable design editor SDK for building Canva-like editors directly in the browser. It gives you a full-featured visual editor — shapes, text, images, templates, and export — that you can drop into any web application with minimal setup.

Under the hood, the rendering engine is powered by Fabric.js v6, providing a performant HTML5 Canvas with object manipulation, grouping, and serialization built in.

Key Features

  • Shapes and objects — rectangles, circles, lines, polygons, and custom SVG paths
  • Text and typography — rich text editing with fonts, colors, effects, and alignment
  • Images — drag-and-drop upload, cropping, filters, and background removal
  • Icons — built-in icon library with search
  • Templates — load, save, and share reusable design templates
  • Export (8 formats) — PNG, JPEG, SVG, PDF, PSD, TIFF, JSON, and WebP
  • Plugins — extend the editor with custom tools, panels, and export formats
  • Multi-page — design documents with multiple pages/artboards
  • Version history — undo/redo with full state snapshots
  • i18n — internationalization with pluggable locale packs

Architecture Overview

Design on Web follows a 3-layer architecture that separates concerns and allows you to pick exactly the level of abstraction you need:

  1. Core Engine — the rendering engine, state management, command system, and plugin host. Framework-agnostic and usable from vanilla JavaScript.
  2. UI Components — pre-built React components for toolbar, panels, dialogs, and canvas viewport. Themeable and composable.
  3. Framework Bindings — thin wrappers for React (and vanilla JS) that wire the engine to the component tree with minimal boilerplate.
💡
Pick your level
You can use the high-level React component for a quick embed, or drop down to the Core Engine API for full control over every object on the canvas.

Packages

PackageDescription
@design-on-web/sharedTypes, constants, utilities, and i18n infrastructure shared across all packages.
@design-on-web/coreEditor engine powering the canvas — commands, store, events, and plugin system.
@design-on-web/uiReact UI components: toolbar, side panel, property panel, layer panel, and more.
@design-on-web/reactReact wrapper providing the DesignEditor component for quick integration.
@design-on-web/vanillaVanilla JS / CDN entry point — no framework required.
@design-on-web/export-psdPSD export plugin (Adobe Photoshop format).
@design-on-web/export-pdfPDF export plugin with multi-page support.
@design-on-web/export-svgEnhanced SVG export plugin with filter and effect support.
@design-on-web/export-imageTIFF export plugin for high-quality raster output.

Next Steps