Installation

Prerequisites

  • Node.js >= 20
  • React >= 19 (only required for React integration)

Install via Package Manager

npmbash
# Core + React integration
npm install @design-on-web/react @design-on-web/core @design-on-web/shared @design-on-web/ui fabric

# Optional export plugins
npm install @design-on-web/export-psd @design-on-web/export-pdf @design-on-web/export-svg @design-on-web/export-image
pnpmbash
# Core + React integration
pnpm add @design-on-web/react @design-on-web/core @design-on-web/shared @design-on-web/ui fabric

# Optional export plugins
pnpm add @design-on-web/export-psd @design-on-web/export-pdf @design-on-web/export-svg @design-on-web/export-image
yarnbash
# Core + React integration
yarn add @design-on-web/react @design-on-web/core @design-on-web/shared @design-on-web/ui fabric

# Optional export plugins
yarn add @design-on-web/export-psd @design-on-web/export-pdf @design-on-web/export-svg @design-on-web/export-image
ℹ️
Peer dependency
fabric@^6.0.0 is required as a peer dependency. Make sure it is installed alongside the Design on Web packages. The SDK relies on Fabric.js v6 for canvas rendering and object manipulation.

CDN Usage (No npm Required)

If you are not using a bundler, you can load Design on Web directly from a CDN. This gives you the vanilla JS API in a single script tag:

CDN script taghtml
<script src="https://cdn.jsdelivr.net/npm/@design-on-web/vanilla/dist/design-on-web.min.js"></script>

The script exposes a global DesignOnWeb object. See the Quick Start guide for a complete vanilla JS example.

What to Install

Choose the packages you need based on your use case:

Use CasePackages
React app with full UI@design-on-web/react, @design-on-web/core, @design-on-web/shared, @design-on-web/ui, fabric
Vanilla JS / no framework@design-on-web/vanilla (or CDN)
Core engine only (custom UI)@design-on-web/core, @design-on-web/shared, fabric
PSD/PDF/SVG/TIFF exportAdd the corresponding @design-on-web/export-* plugin package

Next Steps