@synapxlab/draw — Éditeur SVG TypeScript zéro dépendance

Démo interactive

Cliquez Ouvrir l'éditeur pour dessiner. Cliquez Insérer dans la modal pour placer le SVG ci-dessous. Cliquez ensuite sur le dessin pour le ré-éditer.

📦 Installation

npm install @synapxlab/draw

yarn add @synapxlab/draw

pnpm add @synapxlab/draw

Importez aussi le CSS de l'éditeur :

import '@synapxlab/draw/style.css';

Ou via CDN (ESM, aucune installation) :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@synapxlab/draw/dist/draw.css">
<script type="module">
  import { DrawEditor } from 'https://cdn.jsdelivr.net/npm/@synapxlab/draw/dist/draw.es.js';

  const editor = new DrawEditor();
  editor.open('', (svg) => {
    document.getElementById('canvas').innerHTML = svg;
  });
</script>

⚡ Démarrage rapide

import { DrawEditor } from '@synapxlab/draw';
import '@synapxlab/draw/style.css';

const editor = new DrawEditor();

editor.open('', (svg) => {
  document.getElementById('canvas').innerHTML = svg;
});

const { DrawEditor } = require('@synapxlab/draw');

const editor = new DrawEditor();
editor.open('', (svg) => {
  document.getElementById('canvas').innerHTML = svg;
});

// Récupérer le SVG existant pour ré-édition
const existing = document.getElementById('canvas')
  .querySelector('svg')?.outerHTML ?? '';

editor.open(existing, (svg) => {
  document.getElementById('canvas').innerHTML = svg;
});

📖 API

new DrawEditor()

Instancie l'éditeur et injecte l'overlay dans document.body. L'overlay reste masqué jusqu'à l'appel de open().

Méthode	Signature	Description
`open`	`(existingSvg: string, onInsert: (svg: string) => void): void`	Ouvre la modal. Passer une chaîne SVG pour ré-éditer un dessin existant, ou `''` pour un nouveau.
`destroy`	`(): void`	Supprime l'overlay du DOM. Utile pour le nettoyage dans les SPA.

Types TypeScript

import type { DrawEditorInterface } from '@synapxlab/draw';

// Interface publique — utile pour typer une ref ou un mock
const editor: DrawEditorInterface = new DrawEditor();

Astuce : Une seule instance suffit pour toute l'application. Appelez open() autant de fois que nécessaire — l'overlay est réutilisé.

🛠️ Outils disponibles

Sélection

Cliquez pour sélectionner une forme. Déplacez-la par glisser-déposer. Suppr pour effacer.

Crayon libre

Dessinez des tracés libres en maintenant le bouton de la souris enfoncé.

Rectangle & Ellipse

Cliquez et glissez pour dessiner. Redimensionnement via 8 poignées, rotation via la poignée supérieure.

Ligne & Flèche

Tracez des segments. La flèche ajoute automatiquement une tête de flèche SVG native.

Texte multiligne

Cliquez sur le canvas, saisissez. Entrée = saut de ligne, Ctrl+Entrée valide. Double-clic pour ré-éditer.

Annuler / Refaire

Ctrl+Z annule la dernière action. Historique complet de la session.

🖊️ Intégration avec @synapxlab/wysiwyg

Injectez DrawEditor comme dépendance opt-in — zéro impact bundle si non utilisé.

import { WysiwygEditor } from '@synapxlab/wysiwyg';
import { DrawEditor } from '@synapxlab/draw';
import '@synapxlab/draw/style.css';

new WysiwygEditor({
  draw: DrawEditor,
  toolbar: { draw: true },
});

Bouton dessin SVG dans la toolbar — ouvre la modal DrawEditor
Cliquez un dessin existant dans l'éditeur pour le ré-éditer
Le SVG est inséré comme bloc contenteditable="false"
Sans draw: DrawEditor → le bouton n'apparaît pas, le JS n'est pas chargé

🔧 Compatibilité

Navigateurs

Chrome, Firefox, Safari, Edge. Utilise uniquement SVG DOM standard et getScreenCTM().

TypeScript 5 & 6

Types complets inclus. Compatible moduleResolution bundler, node16 et nodenext.

ESM + CJS

Deux formats livrés. Fonctionne avec Vite, Webpack, Next.js et un simple require().

Zéro dépendance

Aucune dépendance runtime. Pas de React, pas de canvas — SVG DOM natif du navigateur.