SuperPrint Application web professionnelle de PAO (Publication Assistée par Ordinateur) Professional web-based Desktop Publishing (DTP) application

42 692

Lignes de code

Lines of code

475+

Fonctions nommées

Named functions

Catégories

Architecture

Structure des fichiers

File Structure

SUPERPRINT12master/
├── index.html              ─ SPA principale (~3 000 lignes), modales, toolbar, sidebars
├── documentation.html      ─ Ce fichier / This file
├── ai-proxy.php            ─ Proxy serveur pour les APIs IA (CORS + clés)
├── service-worker.js       ─ PWA offline caching (network-first)
├── manifest.webmanifest    ─ PWA manifest
├── robots.txt / sitemap.xml
├── JS/
│   ├── main.js             ─ Logique applicative complète (81 481 lignes)
│   ├── simple-pen-tool.js  ─ Module outil plume standalone
│   ├── mobile-widgets.js   ─ Widgets mobiles
│   ├── fabric.min.js       ─ Fabric.js 5.3.0
│   ├── jspdf.umd.min.js   ─ Génération PDF
│   ├── jszip.min.js        ─ Gestion ZIP (IDML, ODT, Print-to-Web)
│   ├── pdf.min.js          ─ PDF.js (import PDF)
│   ├── paper-full.min.js   ─ Paper.js (opérations booléennes)
│   ├── mammoth.min.js      ─ Conversion DOCX → HTML
│   ├── hypher.js           ─ Moteur de césure
│   └── hyphenation-*.js    ─ Dictionnaires césure (fr, en, de, es, it)
├── CSS/
│   ├── main.css            ─ Feuille de styles principale
│   └── mobile-widgets.css  ─ Styles mobiles
├── SP/                     ─ Assets & templates
└── icons/                  ─ Icônes PWA

Stack technique

Technical Stack

Bibliothèque	Library	Version	Rôle
Fabric.js	5.3.0	Moteur de rendu canvas (objets, texte, images, événements)	Canvas rendering engine (objects, text, images, events)
jsPDF	2.x	Génération PDF multi-pages avec fond perdu	Multi-page PDF generation with bleed
JSZip	3.x	Gestion fichiers ZIP (import IDML/ODT, export Print-to-Web)	ZIP file handling (IDML/ODT import, Print-to-Web export)
PDF.js	3.x	Rendu PDF pour import page par page	PDF rendering for page-by-page import
Paper.js	0.12	Opérations booléennes de tracés (Pathfinder)	Boolean path operations (Pathfinder)
Mammoth.js	1.x	Conversion DOCX → HTML	DOCX to HTML conversion
Hypher	0.2	Moteur de césure (5 langues)	Hyphenation engine (5 languages)

Partie 1 — Catalogue des fonctions 475+

Part 1 — Function Catalog 475+

3.1 Gestion des pages 3.1 Page Management 16

#	Fonction	Function	Ligne	Type	Paramètres	Params
1	createNewPage	13339	decl	—	Crée une page vierge et l'ajoute au document	Creates a new blank page and appends it
2	renderAllPages	7255	decl	—	Détruit les canvas existants et recrée tous les conteneurs de pages	Destroys existing canvases and re-creates all page containers
3	createPageCanvas	7531	decl	container, index, width, height, position	Crée un canvas Fabric pour une page simple	Creates a Fabric canvas for a single page
4	goToPage	1623	decl	pageIndex	Fait défiler la vue vers une page spécifique	Scrolls viewport to a specific page
5	updatePage	36893	decl	—	Met à jour l'affichage de la page courante	Updates the current page display/indicator
6	changePage	36899	decl	delta	Navigue en avant/arrière de delta pages	Navigate forward/backward by delta pages
7	updatePageIndicator	20907	decl	—	Met à jour le badge de numéro de page dans l'UI	Updates the page number UI badge
8	getCurrentPageIndex	23049	decl	—	Retourne l'index de la page active	Returns the index of the currently active page
9	getActiveCanvas	13307	decl	—	Retourne le canvas Fabric actuellement actif	Returns the currently active Fabric canvas
10	drawMargins	13346	decl	canvas, pageWidth, pageHeight	Dessine les repères de marge et de fond perdu	Draws margin/bleed guide lines on a canvas
11	saveAllPages	11095	decl	—	Sérialise tous les canvas en JSON	Serializes all page canvases to JSON
12	applySelectionHighlightAfterRender	7517	decl	—	Surligne la page active en mode planche après le rendu	Highlights the active spread page after render
13	duplicateObject	20870	decl	—	Duplique l'objet sélectionné	Duplicates the currently selected object
14	calculateImposition	23064	decl	numPages	Calcule l'ordre d'imposition (cahier)	Calculates imposition (booklet) page order
15	closeImpositionModal	23172	decl	—	Ferme la modale d'imposition	Closes the imposition configuration modal
16	closeManualModal	23202	decl	—	Ferme la modale d'imposition manuelle	Closes the manual imposition modal

3.2 Canvas / Fabric.js Core 3.2 Canvas / Fabric.js Core 25

#	Fonction	Function	Ligne	Type	Params	Description FR
1	setupCanvasEvents	7862	decl	canvas, index	Attache tous les gestionnaires d'événements Fabric à un canvas	Attaches all Fabric event handlers to a canvas
2	setupCrossBlockDragSelection	9896	IIFE	—	Active la sélection de texte par glissement cross-textbox	Enables cross-textbox text drag selection
3	renderVerticalHandle	2214	decl	ctx, left, top, styleOverride, fabricObject	Rend une poignée de redimensionnement verticale	Renders a vertical resize control
4	renderHorizontalHandle	2239	decl	ctx, left, top, styleOverride, fabricObject	Rend une poignée de redimensionnement horizontale	Renders a horizontal resize control
5	renderCornerHandle	2263	decl	ctx, left, top, styleOverride, fabricObject	Rend une poignée de coin	Renders a corner resize control
6	getCanvasPoint	2287	decl	canvas, eventData	Convertit un événement souris/touch en coordonnées canvas	Converts mouse/touch event to canvas coordinates
7	createTextboxControls	2821	decl	—	Crée les contrôles de redimensionnement personnalisés des Textbox	Creates custom Fabric textbox resize controls
8	actionHandlerML/MR/MT/MB	1301–1450	decl	eventData, transformData, x, y	Gestionnaires de redimensionnement par poignée (gauche, droite, haut, bas)	Resize handle action handlers (left, right, top, bottom)
9	createCornerHandler	2737	decl	cornerType	Fabrique de gestionnaires de coin	Factory for corner resize handlers
10	commonMouseUpHandler	2767	decl	eventData, transformData	Gestionnaire commun après toute transformation	Common handler after any transform completes
11	getObjectBounds	2411	decl	obj	Retourne le bounding box d'un objet Fabric	Returns bounding box of a Fabric object
12	setObjectFromBounds	2470	decl	obj, bounds	Positionne/dimensionne un objet depuis un bounding box	Sets object position/size from bounding box
13	optimizedRender	6694	decl	canvas, delay=0	Rendu canvas avec debounce/pooling	Debounced/pooled canvas render
14	serializeObject	11114	decl	obj	Sérialise un objet Fabric en JSON	Serializes a single Fabric object to JSON
15	onCanvasLoaded	13842	decl	—	Initialisation post-chargement du canvas	Post-load canvas initialization
16	_postLoadCanvas	13858	decl	fabricCanvas, isSpread	Traitement des objets après chargement JSON	Processes objects after canvas JSON load
17	spApplySmartControls	3017	window	textbox	Applique les contrôles de redimensionnement précis à une Textbox	Applies precise resize controls to a textbox
18	deepCleanupCanvas	7146	decl	fabricCanvas	Nettoyage profond du canvas (GPU, mémoire, listeners)	Deep cleanup of canvas GPU/memory

3.3 Zoom 6

#	Function	Line	Type	Params	Description FR	Description EN
1	applyZoom	26042	decl	—	Applique le niveau de zoom via CSS transform + MàJ DPR	Applies zoom level via CSS transform + DPR update
2	setInitialZoom	26144	decl	—	Calcule et applique le zoom initial adapté au viewport	Calculates and sets zoom to fit viewport
3	normalizeZoomLevel	26036	decl	—	Clamp le zoom dans la plage valide	Clamps zoom to valid min/max range
4	_updateCanvasDPRForZoom	25981	decl	—	Ajuste le DPR des canvas selon le zoom pour un texte net	Adjusts canvas DPR based on zoom for sharp text
5	handleWheelZoom	26495	arrow	event	Gestionnaire zoom molette (Ctrl+scroll)	Mouse wheel zoom handler (Ctrl+scroll)
6	handleZoomShortcut	23293	decl	e	Raccourcis clavier de zoom (Ctrl+/Ctrl-)	Keyboard zoom shortcuts (Ctrl+/Ctrl-)

3.4 Historique / Undo-Redo 3.4 History / Undo-Redo 11

#	Function	Line	Type	Params	Description FR	Description EN
1	saveState	13559	decl	action	Sauvegarde l'état courant dans l'historique d'annulation	Saves current state to undo history
2	saveStateFromPages	13621	decl	action	Sauvegarde l'état directement depuis le tableau pages	Saves state from pages array directly
3	undo	13655	decl	—	Annule la dernière action	Undo last action
4	redo	13665	decl	—	Rétablit la dernière action annulée	Redo last undone action
5	restoreState	13683	decl	state	Restaure un état sauvegardé	Restores a saved history state
6	_doRestoreState	13719	decl	state	Logique interne de restauration d'état	Internal state restoration logic
7	_fastRestoreCanvases	13808	decl	—	Restauration rapide des canvas sans re-rendu complet	Fast canvas restoration without full re-render
8	updateHistoryPanel	14017	decl	—	Met à jour le panneau UI d'historique	Updates the undo/redo history UI panel
9	debouncedSaveState	1477	decl	action	Sauvegarde d'état avec debounce (évite les sauvegardes rapides)	Debounced state save (avoids rapid saves)
10	_spRestoreSaveHistory	7039	decl	—	Restaure l'historique de sauvegarde depuis IndexedDB	Restores save history from IndexedDB
11	_spRestoreSaveHistoryFallback	7091	decl	—	Restauration de secours en cas d'erreur	Fallback history restoration on error

3.5 Texte / Typographie 3.5 Text / Typography 48

#	Function	Line	Type	Params	Description FR	Description EN
1	forceTextRecalc	2294	decl	target	Force le recalcul de la mise en page du texte	Forces text layout recalculation
2	spLockTextboxDimensions	2346	decl	textObj	Verrouille les dimensions d'une textbox	Locks textbox width/height to prevent resize
3	spGraphemeSplit	3165	decl	str	Découpe une chaîne par clusters de graphèmes	Splits string by grapheme clusters
4	getFontDecl	3174	decl	obj	Retourne la déclaration CSS de police	Gets CSS font declaration string
5	getMaxFontSizeFromStyles	3185	decl	obj	Retourne la taille de police max depuis les styles inline	Gets max font size from inline styles
6	measureRawWithFont	3308	decl	obj, text, fontSize, fontWeight, fontFamily	Mesure la largeur du texte avec une police explicite	Measures text width with explicit font params
7	fallbackHyphenate	3472	decl	word	Césure basique par syllabes (fallback)	Basic syllable-based hyphenation fallback
8	spForceInlineStyleRewrap	5521	decl	textbox	Force le ré-enveloppement avec styles inline	Forces rewrap respecting inline styles
9	spForceTextboxRewrap	5633	decl	textbox	Force un ré-enveloppement complet de la textbox	Forces complete textbox rewrap
10	addSpecialTextObjectsToCanvas	5849	decl	fabricCanvas, pageIndex, position	Ajoute les numéros de page automatiques	Adds auto page numbers to canvas
11	restoreTextboxAfterLoad	6276	decl	obj	Restaure les propriétés SP d'une textbox après chargement JSON	Restores textbox SP properties after JSON load
12	applyTextboxClipPath	6361	decl	textbox	Applique un clip path pour masquer le débordement	Applies clip path to hide overflow
13	applyTextStyleToSelection	47828	decl	style, value	Applique un style de texte à la sélection	Applies a text style to current selection
14	toggleButton	47892	decl	style	Bascule gras/italique/souligné	Toggles bold/italic/underline
15	applyHyphenation	29205	decl	mode	Définit le mode de césure (auto/manuel/aucun)	Sets hyphenation mode (auto/manual/none)
16	toggleScript	29500	decl	type	Bascule exposant/indice	Toggles superscript/subscript
17	transformCase	29524	decl	mode	Transforme la casse (MAJ/min/Titre)	Transforms text case (upper/lower/title)
18	addText	16172	decl	—	Active l'outil de création de texte (dessiner-pour-créer)	Activates text creation tool (draw-to-create)
19	createSimpleTextBox	16409	decl	canvas, left, top, width, height	Crée une zone de texte à la position/taille donnée	Creates a text box at given position/size
20	applyFixedHeightProtection	16368	decl	textbox	Empêche la textbox de grandir automatiquement en hauteur	Prevents textbox from auto-growing height
21	applyCrossBlockStyle	21918	decl	styleProps	Applique un style à la sélection cross-block	Applies style to cross-block text selection
22	ensureCrispText	17578	decl	tb	Assure un rendu texte net au sous-pixel	Ensures crisp subpixel text rendering
23	softHyphenateWord	30732	decl	word	Insère des césures optionnelles dans un mot	Soft-hyphenates a single word
24	forceFontRefresh	25010	decl	obj, canvas	Force le rechargement de la police d'un objet	Forces font refresh for an object

3.6 Système de chaînage de texte 3.6 Text Chaining System 60+

Système de chaînage de texte de type PAO professionnelle : le texte débordant d'un bloc est automatiquement distribué dans les blocs liés suivants, y compris sur d'autres pages. Les styles inline sont préservés à travers la chaîne.

Professional DTP-style text chaining system: overflow text is automatically distributed to linked blocks, including across pages. Inline styles are preserved through the chain.

#	Function	Line	Type	Params	Description FR	Description EN
1	checkTextOverflow	16818	decl	canvas	Vérifie le débordement de toutes les textbox du canvas	Checks all textboxes on canvas for overflow
2	updateOverflowIndicator	16957	decl	textbox, canvas	Affiche/masque l'indicateur de débordement	Shows/hides overflow indicator on textbox
3	propagateBaseStyleToChain	17087	decl	obj, styleProps	Propage le style de base à toute la chaîne	Propagates base style to all chain blocks
4	cleanupChainOnBlockDelete	17162	decl	obj	Nettoie les liens de chaîne lors de la suppression d'un bloc	Cleans chain links when a block is deleted
5	_redistributeWithStyles	17332	decl	chain, fullText, allStyles	Redistribue le texte+styles à travers la chaîne	Redistributes text+styles across chain
6	redistributeLinkedTextChain	17448	decl	obj	Redistribue le texte dans tous les blocs liés	Reflows text across all linked blocks
7	getFittingTextIndex	17591	decl	textbox, fullText	Trouve combien de texte tient dans une textbox	Finds how much text fits in a textbox
8	flowTailAcrossPages	17763	async	tailText, sourceObj, sourceCanvas, pageIndex	Distribue le texte excédentaire sur les pages suivantes	Flows overflow text to new pages
9	autoFlowTextToNextPage	17838	decl	textObj, canvas, pageIndex	Auto-flow du débordement vers la page suivante	Auto-flows overflow to next page
10	createLinkedTextBlock	17863	decl	sourceObj, sourceCanvas, targetCanvas, targetPageIdx	Crée un nouveau bloc lié sur la page cible	Creates a new linked block on target page
11	findFirstBlockInChain	21132	decl	textObj	Remonte au premier bloc d'une chaîne	Walks backward to first block in chain
12	buildLinkedChain	21187	decl	firstBlock	Construit le tableau ordonné de tous les blocs d'une chaîne	Builds ordered array of all chain blocks
13	findBlockById	21219	decl	textLinkId	Trouve une textbox par son textLinkId	Finds a textbox by its textLinkId
14	addOrUpdateChainBadge	21231	decl	tb, color	Ajoute/met à jour le badge d'index de chaîne	Adds/updates chain index badge on textbox
15	updateLinkArrowsForChain	21295	decl	startObj	Redessine les flèches de liaison pour toute la chaîne	Redraws link arrows for entire chain
16	drawCrossBlockHighlight	21569	decl	tb, fromChar, toChar	Dessine la surbrillance sur une plage de texte cross-bloc	Draws highlight overlay on a block range
17	getCrossBlockSelectedText	21798	decl	—	Retourne le texte sélectionné à travers les blocs	Returns selected text across blocks
18	breakTextLink	22167	decl	—	Rompt un lien entre deux blocs connectés	Breaks a link between two connected blocks
19	autoLinkTextBlocks	22359	decl	—	Lie automatiquement les textbox sélectionnées dans l'ordre	Auto-links selected textboxes in order
20	createThreeColumnLinkedText	22671	decl	—	Crée une mise en page à 3 colonnes liées	Creates a 3-column linked text layout

3.7 Import / Export 3.7 Import / Export 35

#	Function	Line	Type	Params	Description FR	Description EN
1	importSVG	15406	decl	—	Importe un fichier SVG via sélecteur de fichier	Imports SVG file via file picker
2	flowHtmlIntoPages	30600	async	html, startPageIndex	Importe du contenu HTML dans les pages	Imports HTML content into pages
3	importWordDocument	70173	async	file, startPageIndex	Importe un document Word .docx	Imports Word .docx document
4	extractOdtHtml	31080	decl	arrayBuffer	Extrait le HTML d'un fichier ODT	Extracts HTML from ODT file
5	importScribusFile	31546	decl	xmlStr	Importe un fichier .sla (format PAO XML open source)	Imports a .sla file (open-source DTP XML format)
6	processIdmlZip	31949	async	file	Traite un fichier IDML (archive ZIP)	Processes an IDML file (ZIP archive)
7	parseIdmlAndBuild	32193	async	zip, fontsMap, imagesMap	Parse la structure IDML et construit les pages	Parses IDML structure and builds pages
8	importPDFPages	70277	async	pageNumbers, recadrageMode	Importe des pages PDF sélectionnées	Imports selected pages from a PDF
9	showPDFImportModal	69788	async	file	Affiche la modale d'import PDF avec aperçus	Shows the PDF import dialog with previews
10	renderPageToImageWithBleed	42741	async	pageIndex, position, quality, bleed, ...	Rend une page en image pour l'export (avec fond perdu)	Renders a page to image for export (with bleed)
11	confirmExport	37208	async	—	Confirme et exécute l'export PDF	Confirms and executes standard PDF export
12	exportImposedPDF	38846	async	—	Exporte un PDF imposé (cahier/livret)	Exports imposed/booklet PDF
13	confirmD4Export	36741	async	—	Export D4/Print-to-Web (mini-site HTML en ZIP)	D4/Print-to-Web export (HTML mini-site in ZIP)
14	saveProjectLocal	77028	window	—	Sauvegarde le projet en JSON local	Saves project to local JSON file
15	saveProjectWeb3	77086	async	—	Sauvegarde le projet sur Web3/IPFS	Saves project to Web3/IPFS
16	saveProjectSP	77319	window	—	Sauvegarde au format .sp (JSON)	Saves project in .sp format (JSON)
17	loadProjectSP	77522	window	fileContent	Charge un fichier projet .sp	Loads a .sp project file

3.8 Interface / Panneaux 3.8 UI / Panels 35

#	Function	Line	Type	Params	Description FR	Description EN
1	toggleSidebar	314	decl	side	Bascule la barre latérale gauche/droite	Toggles left/right sidebar collapse
2	showPageLoader	1522	decl	message	Affiche l'overlay de chargement	Shows loading overlay with message
3	hidePageLoader	1545	decl	—	Masque l'overlay de chargement	Hides loading overlay
4	updateLayersPanel	20774	decl	—	Met à jour le panneau couches/objets	Updates the layers/objects panel UI
5	updateTransformPanel	14068	decl	—	Met à jour le panneau de propriétés de transformation	Updates the transform properties panel
6	applyTransform	14503	decl	—	Applique les valeurs de transformation depuis les inputs	Applies transform values from panel inputs
7	applyColors	14595	decl	—	Applique les couleurs fond/contour depuis le panneau	Applies fill/stroke colors from panel
8	rgbToCMYK	26951	decl	hex	Convertit une couleur hex RGB en valeurs CMYK	Converts hex RGB to CMYK values
9	setupShapesDropdown	14891	decl	—	Initialise le menu déroulant des formes	Initializes shapes dropdown menu
10	setupImportDropdown	15007	decl	—	Initialise le menu déroulant d'import	Initializes import dropdown menu
11	initNumberSpinners	895	decl	root	Initialise les inputs numériques avec boutons +/-	Initializes numeric spinner inputs
12	showTooltipAt	18668	decl	x, y, text	Affiche un tooltip à une position écran	Shows tooltip at screen position
13	enablePerformanceMode	25006	decl	enabled	Active/désactive le mode haute performance	Toggle performance mode UI

3.9 Pages maîtresses 3.9 Master Pages 3

#	Function	Line	Type	Params	Description FR	Description EN
1	applyMasterToPage	46918	decl	pageIndex, masterId	Applique un gabarit à une page	Applies a master page template to a page
2	openMasterEditor	46988	decl	masterId	Ouvre l'éditeur de page maîtresse	Opens the master page editor
3	closeMasterEditor	47103	decl	—	Ferme l'éditeur de page maîtresse	Closes the master page editor

3.10 Mode planche (Spread) 3.10 Spread Mode 22

#	Function	Line	Type	Params	Description FR	Description EN
1	createSpreadCanvas	11336	decl	container, leftIdx, rightIdx, w, h	Crée un canvas double-page (planche)	Creates a double-page spread canvas
2	loadSpreadContent	11553	decl	fabricCanvas, leftIdx, rightIdx	Charge le contenu des pages dans la planche	Loads page content into spread
3	setupSpreadEventHandlers	11700	decl	fabricCanvas, leftIdx, rightIdx	Attache les gestionnaires d'événements spécifiques au spread	Attaches spread-specific event handlers
4	saveSpreadContent	11951	decl	fabricCanvas, leftIdx, rightIdx	Sauvegarde le contenu du spread dans le tableau pages	Saves spread content back to pages array
5	addSpreadGuides	12192	decl	fabricCanvas, w, h, bleedPx, forceRecreate	Ajoute les repères de marge/gouttière au spread	Adds margin/gutter guides to spread
6	convertSpreadToSingle	12465	decl	—	Convertit la vue planche en pages simples	Converts spread view back to single pages
7	handleSpreadPageOverflow	12551	decl	canvas, pageIdx, obj	Gère le débordement d'objets au-delà de la limite du spread	Handles object crossing spread boundary
8	createSpreadMirrorObject	12688	decl	sourceObj, sourceCanvas, ...	Crée un miroir d'objet sur la page adjacente	Creates mirror of object on adjacent page
9	syncMirrorWithSource	13066	decl	sourceObj	Synchronise l'objet miroir avec sa source	Syncs mirror object with its source
10	checkAllObjectsForSpreadOverflow	13209	decl	—	Re-vérifie tous les objets pour le débordement de spread	Re-checks all objects for spread overflow

3.11 Outils (Dessin, Formes, Images, Masques, Recadrage, Booléens) 3.11 Tools (Drawing, Shapes, Images, Masks, Crop, Booleans) 80+

Dessin & Outil plume

Drawing & Pen Tool

#	Function	Line	Params	Description FR	Description EN
1	activateFreeformDrawing	15321	—	Active le mode dessin libre (pinceau)	Activates freeform brush drawing mode
2	activatePenTool	15426	—	Active l'outil plume Bézier	Activates the Bézier pen tool
3	penMouseDown / penMouseMove / penMouseUp	10365–10500	e	Gestionnaires souris de l'outil plume	Pen tool mouse handlers
4	buildSVGPath	15787	points, closePath	Construit une chaîne SVG path à partir de points	Builds SVG path string from points
5	finalizePenPath	15834	closePath	Finalise le tracé plume en objet Fabric	Finalizes pen path into Fabric object
6	editExistingPenPath	15912	pathObject	Entre en mode édition d'un tracé existant	Enters edit mode for existing path

Formes

Shapes

#	Function	Line	Params	Description FR	Description EN
1	addRect	14759	—	Ajoute un rectangle	Adds a rectangle
2	addCircle	14793	—	Ajoute un cercle/ellipse	Adds a circle/ellipse
3	addStar	14837	—	Ajoute une étoile	Adds a star shape

Images & Masquage

Images & Masking

#	Function	Line	Params	Description FR	Description EN
1	addImage	18054	—	Ouvre le sélecteur de fichier pour ajouter une image	Opens file picker to add an image
2	importImageIntoShape	17968	shapePath, canvas	Importe une image dans un masque de forme	Imports image into a shape mask
3	applyImageMaskToShape	18987	shapeObj, imageObj, canvas, url	Applique une image comme remplissage masqué	Applies image as fill to shape mask
4	fitImageToShape	19328	shapeObj, canvas, mode, options	Adapte l'image à la forme (cover/contain)	Fits image to shape (cover/contain)
5	openCropModal	19795	imageObjOverride	Ouvre la modale de recadrage	Opens the crop modal
6	applyCrop	20555	—	Applique le recadrage en cours	Applies current crop to image
7	replaceImageForObject	18452	imageObj, opts	Remplace la source d'image d'un objet	Replaces image source for an object
8	restoreImageMasksAfterLoad	18698	canvas	Restaure les masques d'image après chargement JSON	Restores image masks after JSON load

Opérations booléennes (Pathfinder)

Boolean Operations (Pathfinder)

#	Function	Line	Params	Description FR	Description EN
1	uniteShapes	70676	objects	Union booléenne de formes	Boolean unite (union) of shapes
2	subtractShapes	70680	objects	Soustraction booléenne	Boolean subtract of shapes
3	intersectShapes	70684	objects	Intersection booléenne	Boolean intersect of shapes
4	excludeShapes	70688	objects	Exclusion booléenne (XOR)	Boolean exclude (XOR) of shapes
5	applyPathfinderOperation	70365	operation	Applique l'opération Pathfinder sélectionnée	Applies selected pathfinder boolean op

Épreuvage écran (Soft Proofing)

Soft Proofing

#	Function	Line	Params	Description FR	Description EN
1	applySoftProof	15246	proof	Applique un profil ICC d'épreuvage aux canvas	Applies ICC soft proof to canvases
2	updateActiveSoftProof	15283	—	Met à jour le profil d'épreuvage actif	Updates which soft proof is active

3.12 Sélection / Alignement 3.12 Selection / Alignment 8

#	Function	Line	Params	Description FR	Description EN
1	alignSelectedObjects	48405	direction	Aligne plusieurs objets sélectionnés	Aligns multiple selected objects
2	alignObject	20714	align	Aligne un objet sur le plan de travail	Aligns single object on artboard
3	centerObjectOnArtboard	60557	axis	Centre l'objet sur le plan de travail (H/V/les deux)	Centers object on artboard (H/V/both)
4	altDuplicateSingle	10266	canvas, target	Duplication Alt+glisser (objet unique)	Alt+drag duplicate single object
5	handleCrossPageDrag	10475	e, sourceCanvas	Gère le glisser d'objets entre pages	Handles drag of object across page boundaries
6	moveObjectToPage	10991	obj, sourceCanvas, sourceIdx, targetIdx	Déplace un objet vers une autre page	Moves object to another page

3.13 i18n / Localization 5

#	Function	Line	Params	Description FR	Description EN
1	_t	56815	sel, key	Traduit le contenu texte d'un élément	Translates text content of element
2	_tt	56820	sel, key	Traduit le tooltip d'un élément	Translates tooltip of element
3	_th	56825	sel, key	Traduit le innerHTML d'un élément	Translates innerHTML of element
4	_npUpdateLabels	56975	—	Met à jour les labels de la modale Nouveau projet	Updates new project modal labels
5	filterAssetsByLang	63002	lang	Filtre les assets par langue	Filters assets panel by language

3.14 IndexedDB / Stockage 3.14 IndexedDB / Storage 21

#	Function	Line	Params	Description FR	Description EN
1	openDB	71142	—	Ouvre/crée la base IndexedDB (SuperPrintDB V2)	Opens/creates IndexedDB database
2	autoSaveProject	71162	—	Sauvegarde automatique dans IndexedDB	Auto-saves project to IndexedDB
3	loadAutoSavedProject	71253	—	Charge le projet auto-sauvegardé	Loads auto-saved project from IndexedDB
4	clearAutoSave	71271	—	Supprime la sauvegarde automatique	Clears auto-save data
5	pushSaveHistory	71307	type	Ajoute une entrée dans l'historique de sauvegarde	Pushes save entry to history
6	saveSessionHistory	71406	—	Sauvegarde l'historique undo/redo de session	Saves undo/redo session history
7	loadSessionHistory	71469	—	Charge l'historique undo/redo de session	Loads undo/redo session history
8	startAutoSave	71487	—	Démarre le timer de sauvegarde automatique	Starts auto-save interval timer
9	uploadToIPFS	70824	apiKey, jsonData	Upload le projet sur IPFS via Pinata	Uploads project to IPFS via Pinata
10	loadWeb3Save	70851	hash	Charge un projet depuis IPFS par hash	Loads project from IPFS by hash

3.15 Nouveau projet 3.15 New Project 12

#	Function	Line	Params	Description FR	Description EN
1	newProject	71552	—	Propose de sauvegarder puis lance un nouveau projet	Prompts to save then starts new project
2	openNewProjectModal	71567	—	Ouvre la modale de nouveau projet	Opens the new project modal
3	createNewProjectFromModal	76541	—	Crée le projet avec les paramètres de la modale	Creates project with modal settings
4	npSelectFormat	76485	btn	Sélectionne un format de page prédéfini	Selects a page format preset
5	npUpdatePreview	76504	—	Met à jour l'aperçu de format	Updates the format preview thumbnail
6	npSetViewMode	76534	mode	Définit le mode de vue (simple/planche)	Sets view mode (single/spread)

3.16 Performance / Cleanup 11

#	Function	Line	Params	Description FR	Description EN
1	enableHighPerformance	6796	—	Active le mode rendu haute performance	Enables high-performance rendering mode
2	deepCleanupCanvas	7146	fabricCanvas	Nettoyage profond du canvas (GPU/mémoire/listeners)	Deep cleanup of canvas GPU/memory/listeners
3	preloadFonts	6815	—	Précharge toutes les polices disponibles	Preloads all available fonts
4	optimizeForTypography	6864	—	Désactive temporairement les animations pour les opérations texte	Temporarily disables animations for text ops
5	_spReleaseMemoryPressure	581	aggressive	Libère la pression mémoire GPU/RAM	Releases GPU/memory pressure
6	init	6883	—	Initialisation principale de l'application	Main application initialization

3.17 Utilitaires 3.17 Utilities 27

#	Function	Line	Params	Description FR	Description EN
1	mmToPx	6706	mm	Conversion millimètres → pixels (72 DPI)	Millimeters to pixels (72 DPI)
2	pxToMm	6707	px	Conversion pixels → millimètres	Pixels to millimeters
3	pxToCm / cmToPx	3284–3303	val	Conversion pixels ↔ centimètres	Pixels ↔ centimeters conversion
4	inToPx / pxToIn	3304–3305	val	Conversion pixels ↔ pouces	Pixels ↔ inches conversion
5	getPxToUnitFn	6757	—	Retourne la fonction de conversion pour l'unité en cours	Returns conversion fn for current unit
6	getPageCenter	1579	canvas	Retourne le centre de la page active	Gets center point of active page
7	toNumber	52861	v, defVal	Convertit en nombre avec fallback	Converts value to number with fallback
8	clamp	52865	n, min, max	Borne un nombre dans un intervalle	Clamps number to range
9	sanitizeColor	52867	c, def	Assainit une chaîne couleur	Sanitizes color string
10	setupEventListeners	25210	—	Configuration maître de tous les écouteurs clavier/souris	Master keyboard/mouse event listener setup
11	startSystemMonitoring	515	—	Démarre le monitoring des ressources système	Starts system resource monitoring

3.18 Grilles / Repères 3.18 Grids / Guides 9

#	Function	Line	Params	Description FR	Description EN
1	setSnapToGuidesEnabled	33538	next	Active/désactive l'aimantation aux repères	Toggles snap-to-guides
2	getGridSettings	33551	—	Retourne les paramètres de grille actuels	Returns current grid settings
3	buildLayoutGridForArea	33604	canvas, area, settings	Construit la grille de colonnes/rangées	Builds column/row layout grid
4	buildBaselineGridForArea	33645	canvas, area, settings	Construit la grille de ligne de base typographique	Builds typographic baseline grid
5	applyGridToCanvas	33663	canvas, settings	Applique les paramètres de grille à un canvas	Applies grid settings to a canvas
6	rebuildGridAll	33725	—	Reconstruit la grille sur toutes les pages	Rebuilds grid on all pages

3.19 Caractères spéciaux / Glyphes 3.19 Special Characters / Glyphs 8

#	Function	Line	Params	Description FR	Description EN
1	spInsertSpecialChar	59488	charToInsert	Insère un caractère spécial au curseur	Inserts a special character at cursor
2	openGlyphsModal	59603	—	Ouvre la modale de glyphes/caractères spéciaux	Opens the glyphs/special chars modal
3	populateGlyphsGrid	59659	—	Remplit la grille de glyphes pour la police active	Populates the glyph grid for current font
4	glyphsInsertChar	59762	—	Insère le glyphe sélectionné dans le texte	Inserts selected glyph into text

3.21 Mobile Helpers 12

#	Function	Line	Params	Description FR	Description EN
1	initMobileBurgerMenu	78617	—	Initialise le menu hamburger mobile	Initializes mobile hamburger menu
2	initMobileTouchContextMenu	78738	—	Initialise le menu contextuel tactile	Initializes mobile touch context menu
3	spMobileSelectAll	~42479	—	Tout sélectionner (mobile)	Select all objects (mobile)
4	spMobileCopy / Paste / Delete	~42501–42583	—	Copier / Coller / Supprimer (mobile)	Copy / Paste / Delete (mobile)

3.22 ⚡ GPU Acceleration 3

#	Fonction	Ligne	Type	Paramètres	Description	Description
1	detectGPU	~953	decl	—	Interroge WebGL (`WEBGL_debug_renderer_info`) et retourne `{supported, vendor, renderer, name}`. Libère le contexte via `WEBGL_lose_context`.	Queries WebGL (`WEBGL_debug_renderer_info`) and returns `{supported, vendor, renderer, name}`. Frees context via `WEBGL_lose_context`.
2	applyGpuAcceleration	~988	decl	enabled (bool)	Active/désactive la promotion de couche CSS (`will-change`, `translateZ`) sur tous les canvas et bascule `objectCaching` Fabric.js par type d'objet. Persiste en `localStorage` et déclenche un re-rendu immédiat.	Enables/disables CSS layer promotion (`will-change`, `translateZ`) on all canvases and toggles Fabric.js `objectCaching` per object type. Persists to `localStorage` and triggers an immediate re-render.
3	initOnboarding	~42538	IIFE	—	Wizard de premier lancement (4 étapes). Gardé par `sp_onboarding_done`. L'étape GPU appelle `detectGPU()` et connecte `applyGpuAcceleration()` en direct sur la case à cocher.	First-launch wizard (4 steps). Guarded by `sp_onboarding_done`. The GPU step calls `detectGPU()` and wires `applyGpuAcceleration()` live to the checkbox.

Partie 2 — Patches Fabric.js Part 2 — Fabric.js Prototype Patches 19

Ces overrides étendent ou remplacent les méthodes cœur de Fabric.js pour le comportement spécifique de SuperPrint (typographie avancée, contrôles personnalisés, sérialisation).

These overrides extend or replace Fabric.js core methods for SuperPrint-specific behavior (advanced typography, custom controls, serialization).

#	Méthode prototype	Prototype Method	Ligne	Description FR
1	`fabric.Text.prototype._spDrawInvisibleMarkers`	879	Dessine les marqueurs de caractères invisibles (espaces, tabs, retours)	Draws invisible character markers (spaces, tabs, returns)
2	`fabric.Text.prototype._renderText`	917	Rendu texte overridé avec support des invisibles	Overridden text render with invisibles support
3	`fabric.Canvas.prototype.renderTop`	938	Rendu de la couche supérieure (curseur, sélection)	Overridden top-layer render
4	`fabric.Object.prototype.drawControls`	962	Dessin des contrôles personnalisés	Custom control drawing (precise handles)
5	`fabric.IText.prototype._renderSelection`	1791	Rendu personnalisé de la sélection texte	Custom text selection rendering
6	`fabric.Textbox.prototype.toObject`	1860	Sérialisation personnalisée avec SP_CUSTOM_PROPS	Custom serialization with SP_CUSTOM_PROPS
7	`fabric.Textbox.prototype.initDimensions`	2110	Init des dimensions avec support styles inline	Dimension init with inline style support
8	`fabric.Textbox.prototype._splitTextIntoLines`	2125	Découpage en lignes overridé	Line splitting override
9	`fabric.Textbox.prototype.enlargeSpaces`	2195	Justification avancée des espaces (word/letter spacing, glyph scaling)	Advanced space justification (word/letter spacing, glyph scaling)
10	`fabric.Textbox.prototype._renderTextLine`	2316	Rendu par ligne avec tracking et justification	Per-line rendering with tracking and justification
11	`fabric.Textbox.prototype._wrapLine`	2409	Enveloppement de ligne avec césure (5 langues)	Line wrapping with hyphenation (5 languages)
12	`fabric.IText.prototype.renderCursor`	2702	Rendu du curseur personnalisé	Custom cursor rendering
13	`fabric.Image.prototype.toObject`	3293	Sérialisation d'image avec propriétés SP	Custom image serialization with SP props
14	`fabric.IText.prototype.setSelectionStyles`	42094	Override des styles de sélection	Selection styles override
15	`fabric.Textbox.prototype.set`	42109	set() patché pour ré-enveloppement intelligent	Patched set() for smart rewrap
16	`fabric.Textbox.prototype.initialize`	42152	initialize() patché avec défauts SP	Patched initialize with SP defaults

Variables globales & Constantes Global Variables & Constants

État du document (Lignes 664–740)

Document State (Lines 664–740)

Variable	Type	Défaut	Default	Description FR
`canvases`	Array	`[]`	Tableau de toutes les instances Fabric.Canvas	Array of all Fabric.js canvas instances
`pages`	Array	`[]`	Tableau des données de pages sérialisées (JSON)	Array of serialized page data (JSON)
`currentPageIndex`	Number	`0`	Index de la page actuellement active	Index of the currently active page
`pageFormat`	Object	`{width:210, height:297}`	Dimensions de la page en mm	Page dimensions in mm
`margin`	Number	`20`	Marge de la page en mm	Page margin in mm
`bleed`	Number	`3`	Zone de fond perdu en mm	Bleed area in mm
`history`	Array	`[]`	Pile d'historique undo/redo	Undo/redo state history stack
`historyStep`	Number	`-1`	Position courante dans l'historique	Current position in history
`viewMode`	String	`'single'`	Mode de vue : 'single' ou 'spread'	View mode: 'single' or 'spread'
`textLinks`	Object	`{}`	Carte des connexions de chaînage texte	Map of text link connections
`masterPages`	Object	`{}`	Gabarits de pages maîtresses {id: {name, objects}}	Master page templates {id: {name, objects}}
`pageMasterAssignments`	Object	`{}`	Assignations page→gabarit {pageIdx: masterId}	Page-to-master assignments {pageIdx: masterId}

Constantes

Constants

Constante	Ligne	Valeur / Description	Value / Description
`DEBUG_MODE`	678	`false` — Active le logging console	`false` — Enables console logging
`ENABLE_LINKED_TEXT`	681	`true` — Active le chaînage de texte style PAO pro	`true` — Enables professional DTP-style text chaining
`PASTEBOARD_PX`	804	Calculé — Taille du table de montage horizontal (réduit en mode planche)	Computed — Horizontal pasteboard size (reduced in spread mode)
`PASTEBOARD_V_PX`	805	`200` — Taille du table de montage vertical en px	`200` — Vertical pasteboard size in px
`SP_CUSTOM_PROPS`	688	20+ propriétés personnalisées sauvegardées avec chaque objet Fabric	20+ custom properties saved with each Fabric object

Fonctionnalités Features

📄 Document

Formats A4, A5, Letter, personnalisé
A4, A5, Letter, Custom formats
Dimensions, marges, fond perdu personnalisés (mm)
Custom dimensions, margins, bleed (mm)
Modes page simple + planche (spread)
Single page + Spread view modes
Table de montage (pasteboard)
Pasteboard (work area around pages)
Réorganisation drag-and-drop des pages
Drag-and-drop page reordering

🔤 Typographie

9 polices intégrées + chargement .ttf/.otf
9 built-in fonts + custom .ttf/.otf loading
Césure en 5 langues (FR, EN, DE, ES, IT)
Hyphenation in 5 languages (FR, EN, DE, ES, IT)
Justification avancée (word/letter spacing, glyph scaling)
Advanced justification (word/letter spacing, glyph scaling)
Chaînage de texte cross-page (style PAO pro)
Text chaining across pages (professional DTP-style)
Exposant, indice, capitales, petites capitales, barré
Superscript, subscript, all caps, small caps, strikethrough

✏️ Dessin

Rectangle, Cercle/Ellipse, Étoile, Pinceau libre
Rectangle, Circle/Ellipse, Star, Freeform brush
Outil plume Bézier professionnel avec édition de poignées
Professional Bézier pen tool with curve handle editing
Import SVG
SVG import
Opérations booléennes (Union, Soustraction, Intersection, Exclusion)
Boolean operations (Unite, Subtract, Intersect, Exclude)

🖼️ Images

Import, drag-and-drop, collage presse-papiers
Import, drag-and-drop, clipboard paste
Masquage d'image dans forme avec ajustement position/échelle
Image-in-shape masking with position/scale adjustment
Modale de recadrage complète avec poignées et préréglages
Full crop modal with handles and presets
9 filtres style Instagram
9 Instagram-style filters

🎨 Couleur

Sélecteurs couleur fond/contour, transparence
Fill/stroke color pickers, transparency
Mode RGB/CMYK
RGB/CMYK mode toggle
30+ couleurs Pantone
30+ Pantone spot colors
Nuancier avec dégradés (linéaire/radial)
Swatch system with gradients
Épreuvage écran CMYK (couché, mat, simulation papier)
CMYK soft proofing (coated, matte, paper simulation)

📤 Export / Import

PDF multi-pages (72/150/300 DPI, fond perdu, repères, barres couleur)
PDF multi-page (72/150/300 DPI, bleed, trim marks, color bars)
PDF imposé (cahier/livret)
Imposed PDF (booklet imposition)
Import : JSON, PDF, TXT, DOCX, ODT, IDML, .sla, SVG
Import: JSON, PDF, TXT, DOCX, ODT, IDML, .sla, SVG
Print-to-Web (mini-site HTML en ZIP)
Print-to-Web (HTML mini-site in ZIP)
Format .sp (JSON propriétaire)
.sp format (proprietary JSON)

🤖 IA & Moderne

OpenAI (GPT-6 Astra / Sol / Luna), Anthropic (Claude Opus 5.5 / Sonnet 5 / Fable 5.1), DeepSeek V4.1 Flash
OpenAI (GPT-6 Astra / Sol / Luna), Anthropic (Claude Opus 5.5 / Sonnet 5 / Fable 5.1), DeepSeek V4.1 Flash
14 prompts de template + entrée libre
14 template prompts + free-form
PWA (offline, installable)
PWA (offline, installable)
Sauvegarde Web3/IPFS via Pinata
Web3/IPFS save via Pinata
3 langues UI : FR, EN, JA
3 UI languages: FR, EN, JA

Plug-ins — en créer un Plug-ins — write one

Un plug-in SuperPrint est un fichier .plugin.js que l'utilisateur installe depuis le bouton Plug-ins, en bas de la barre de droite. Il reçoit une API hôte, décrit ses réglages, et peut ajouter des objets au document. Deux plug-ins sont livrés : Global Refactor, qui règle d'un coup les styles, tailles, marges et couleurs du document entier, et Motif, qui habille une page ou un bloc d'un motif répété, d'une rosace, d'un kaléidoscope ou d'un chaos réglable — à partir de formes géométriques ou d'un mélange d'images. Depuis la 1.7.687, chaque plug-in allumé affiche de nouveau son icône dans la barre du haut, et un clic ouvre directement son panneau : la bibliothèque n'est plus qu'un détour pour découvrir et installer.

A SuperPrint plug-in is a .plugin.js file the user installs from the Plug-ins button, at the bottom of the right bar. It receives a host API, declares its settings, and can add objects to the document. Two plug-ins ship with the app: Global Refactor, which sets the styles, sizes, margins and colours of the whole document in one pass, and Vector Pattern, which fills a page or a block with a repeated pattern, a rosette, a kaleidoscope or an adjustable chaos — from geometric shapes or a mix of images. From 1.7.687, every enabled plug-in shows its icon in the top bar again, and one click opens its panel directly: the library is now only a place to discover and install.

Deux surfaces : la bibliothèque et la trappe

Two surfaces: the library and the trap

Le bouton Plug-ins ouvre la bibliothèque : une pop-in qui liste ce qui est installé — avec la date d'installation de chaque fichier — une zone de dépôt et une corbeille par plug-in venu de l'extérieur. Aucun filtre : la liste tient à l'écran, et un tri qui ne trie presque rien ne fait qu'ajouter une décision avant chaque coup d'œil. Le bouton Utiliser ouvre ensuite la trappe du plug-in — le panneau latéral qui pousse l'interface au lieu de la recouvrir, donc la page reste visible pendant qu'on la règle. Appliquer laisse la trappe ouverte pour enchaîner les essais ; Bibliothèque y revient. Une seule trappe est ouverte à la fois : lancer Global Refactor referme celle d'un plug-in, et l'inverse est vrai aussi.

The Plug-ins button opens the library: a pop-in listing what is installed — with each file's installation date — a drop zone and a bin for every plug-in from outside. No filters: the list fits on screen, and a sort that barely sorts only adds a decision before every glance. Use then opens the plug-in's trap — the side panel that pushes the interface instead of covering it, so the page stays visible while you set it. Apply keeps the trap open so you can iterate; Library goes back. Only one trap is open at a time: launching Global Refactor closes a plug-in's trap, and the reverse holds too.

Activer, désactiver, désinstaller

Enable, disable, uninstall

Chaque plug-in porte un interrupteur à côté de Utiliser. Un plug-in désactivé reste installé — il est simplement mis en sommeil : son nom s'affiche en gris, la pastille désactivé apparaît, et Utiliser s'éteint. C'est le bon geste pour un outil qu'on ne veut pas voir sans pour autant jeter le fichier. Le registre refuse de toute façon l'exécution d'un plug-in éteint, même appelé autrement que par l'interface. Désactiver referme aussi la trappe du plug-in si elle était ouverte : laisser à l'écran un outil que la bibliothèque déclare hors service serait trompeur.

Every plug-in carries a switch next to Use. A disabled plug-in stays installed — it is simply put to sleep: its name is greyed out, a disabled badge appears, and Use is switched off. That is the right gesture for a tool you do not want to see without throwing the file away. The registry refuses to run a disabled plug-in in any case, even when called from somewhere other than the interface. Disabling also closes the plug-in's trap if it was open: leaving on screen a tool the library declares out of service would be misleading.

La corbeille, elle, n'apparaît que sur les plug-ins venus de l'extérieur : un plug-in intégré fait partie du produit, le retirer supprimerait une fonction et non une extension. C'est pour cela que l'interrupteur existe pour tous, et la corbeille seulement pour les fichiers que vous avez déposés. Désinstaller efface aussi la préférence d'activation, sinon une réinstallation ramènerait le plug-in éteint sans que personne ne l'ait demandé.

The bin, by contrast, only appears on plug-ins from outside: a built-in plug-in is part of the product, removing it would delete a feature rather than an extension. That is why the switch exists for all, and the bin only for the files you dropped in. Uninstalling also clears the activation preference — otherwise reinstalling would bring the plug-in back switched off with nobody having asked for it.

Installer, c'est déposer un fichier

Installing means dropping a file

Glissez un .plugin.js n'importe où : sur la bibliothèque ou directement sur le plan de travail — le fichier est reconnu et installé dans les deux cas. La zone de dépôt de la bibliothèque reste le chemin le plus explicite, et un clic dessus ouvre le sélecteur de fichiers. Tout fichier qui n'est pas un .plugin.js est refusé avec le message exact, jamais importé par erreur comme une image. La corbeille retire le plug-in de SuperPrint ; le fichier, lui, reste où il est.

Drag a .plugin.js anywhere: onto the library or straight onto the canvas — the file is recognised and installed either way. The library's drop zone remains the most explicit route, and clicking it opens the file picker. Anything that is not a .plugin.js is refused with the precise message, never mistakenly imported as an image. The bin removes the plug-in from SuperPrint; the file stays where it is.

Un plug-in peut apporter sa propre trappe

A plug-in can bring its own trap

La plupart des plug-ins décrivent des options et SuperPrint construit le formulaire. Mais un outil qui a déjà son panneau — c'est le cas de Global Refactor, avec son aperçu en direct, son Annuler et son Valider — n'a rien à gagner à être réécrit dans un formulaire générique. Son manifeste déclare alors trappe: 'maquettePanel', et son run() ouvre le panneau qu'il possède : la bibliothèque se contente de l'exécuter, sans construire de formulaire. Le champ n'est honoré que pour un plug-in intégré : un fichier déposé par l'utilisateur ne peut pas réclamer un panneau du produit.

Most plug-ins declare options and SuperPrint builds the form. But a tool that already has its own panel — Global Refactor, with its live preview, its Cancel and its Apply — gains nothing from being rewritten into a generic form. Its manifest therefore declares trappe: 'maquettePanel', and its run() opens the panel it owns: the library simply runs it, without building a form. The field is only honoured for a built-in plug-in: a file dropped by the user cannot claim a panel of the product.

La forme d'un plug-in

The shape of a plug-in

SPPluginAPI({
  id: 'mon-plug-in',            // minuscules, chiffres, point, tiret
  name: L('Mon plug-in', 'My plug-in', 'マイプラグイン'),
  version: '1.0.0',
  author: 'Votre nom',
  icon: '◆',                    // un caractère, affiché dans la liste
  icone: '',// facultatif : le dessin de la barre du haut (cf. plus bas)
  description: L(
    'Ce qu\'il fait, en une phrase.',
    'What it does, in one sentence.',
    '何をするのか、一文で。'
  ),
  options: [                    // les réglages — le panneau les rend
    { key: 'pas', label: L('Pas (mm)', 'Step (mm)', '間隔 (mm)'), type: 'number', defaut: 8, min: 1, max: 80 },
    { key: 'couleur', label: 'Couleur', type: 'color', defaut: '#1a1a1a' }
  ],
  // trappe: 'maquettePanel',   // intégrés seulement : le panneau que le run() ouvre
  run: function (api, o) {
    // o.pas, o.couleur : les valeurs saisies
    var r = new api.fabric.Rect({
      left: 0, top: 0,
      width: api.document.largeur,
      height: api.document.hauteur,
      fill: o.couleur
    });
    api.add(r, { libelle: 'Mon plug-in' });
  }
});

Le panneau construit lui-même le formulaire à partir de options. Un plug-in ne fabrique donc jamais son propre DOM : il ne peut pas casser l'interface, et il hérite automatiquement du thème clair et du thème sombre.

The panel builds the form from options itself. A plug-in therefore never creates its own DOM: it cannot break the interface, and it automatically inherits both the light and dark theme.

Écrire un plug-in en trois langues

Writing a plug-in in three languages

SuperPrint parle français, anglais et japonais. Un plug-in doit en faire autant, sinon ses réglages restent dans une langue au milieu d'une interface traduite. La fonction L(fr, en, ja) déclare un libellé dans les trois : elle est disponible telle quelle dans votre fichier, et aussi par api.L.

SuperPrint speaks French, English and Japanese. A plug-in must do the same, or its settings stay in one language in the middle of a translated interface. The L(fr, en, ja) function declares a label in all three: it is available as-is in your file, and through api.L.

name: L('Motif', 'Pattern', 'パターン'),

options: [{
  key: 'symetrie', label: L('Symétrie', 'Symmetry', '対称'), type: 'select',
  choix: [
    { value: 'aucune',  label: L('Aucune', 'None', 'なし') },
    { value: 'kaleido', label: L('Kaléidoscope 8', 'Kaleidoscope 8', '万華鏡 8') }
  ]
}],

run: function (api, o) {
  if (!api.selection().length) {
    throw new Error(api.t(L(
      'aucun bloc sélectionné', 'no block selected', 'ブロックが選択されていません'
    )));
  }
}

⚠️ La traduction se fait à la lecture, pas à l'enregistrement. Votre manifeste est enregistré une fois ; SuperPrint y relit la langue de l'interface à chaque ouverture de la bibliothèque ou du panneau. Changer de langue prend donc effet immédiatement, sans recharger la page. Corollaire : n'appelez pas api.t() au moment de déclarer vos réglages — écrivez L(…) et laissez le registre résoudre. api.t() sert aux messages d'exécution, ceux qui naissent dans run().

⚠️ Translation happens on read, not on registration. Your manifest is registered once; SuperPrint re-reads the interface language from it every time the library or panel opens. Changing language therefore takes effect immediately, without reloading the page. Corollary: do not call api.t() when declaring your settings — write L(…) and let the registry resolve. api.t() is for runtime messages, the ones born inside run().

💡 Les trois paramètres, et le repli. L(fr, en, ja) : le japonais manquant retombe sur l'anglais, l'anglais manquant sur le français. Vous pouvez donc traduire progressivement — un libellé non traduit ne laisse jamais un trou à l'écran. Une chaîne ordinaire reste acceptée partout : un plug-in monolingue continue de fonctionner tel quel.

💡 The three parameters, and the fallback. L(fr, en, ja): a missing Japanese falls back to English, a missing English to French. You can therefore translate gradually — an untranslated label never leaves a hole on screen. A plain string is still accepted everywhere: a monolingual plug-in keeps working as-is.

L'icône de la barre du haut

The top-bar icon

Un plug-in allumé apparaît dans la barre du haut, à côté des outils du document : un clic ouvre directement sa trappe, sans repasser par la bibliothèque. Éteignez-le, l'icône s'en va. Elle est dessinée par le champ facultatif icone, qui contient le contenu d'un <svg> — les formes seulement, sans la balise <svg> elle-même.

An enabled plug-in appears in the top bar, beside the document's own tools: one click opens its trap directly, without going back through the library. Turn it off and the icon goes away. It is drawn by the optional icone field, which holds the content of an <svg> — the shapes only, without the <svg> tag itself.

icone: '<line x1="3.5" y1="6.5" x2="20.5" y2="6.5"/><circle cx="9" cy="6.5" r="2.3"/>'

⚠️ Dessinez en contour, sur une grille de 24, et léger. Le conteneur impose fill="none" stroke="currentColor" stroke-width="1.8" et un viewBox="0 0 24 24" : une icône pleine aurait la même couleur mais beaucoup plus d'encre, et paraîtrait plus sombre que les icônes voisines. Peser le même poids se mesure : une icône de cette zone fait 410 à 430 pixels opaques sur un rendu 48 × 48 (loupe 421, étoile IA 411). Un dessin chargé — trois réglettes sur toute la largeur — pesait 732 et se lisait comme un carré noir. Comptez large : peu de traits, courts. Liste blanche de formes : path, circle, rect, line, polyline, polygon, ellipse, g. Tout le reste est refusé — script, image, use, href, style=, on…=, javascript:, url( — et le plug-in retombe alors sur son icon. Ce n'est pas une erreur : c'est un repli.

⚠️ Draw in outline, on a 24-unit grid, and keep it light. The container imposes fill="none" stroke="currentColor" stroke-width="1.8" and a viewBox="0 0 24 24": a solid icon would have the same colour but far more ink, and would look darker than its neighbours. Matching the weight is measurable: an icon in this zone carries 410 to 430 opaque pixels on a 48 × 48 render (magnifier 421, AI star 411). A heavy drawing — three full-width sliders — weighed 732 and read as a black square. Draw sparingly: few strokes, short. Shape whitelist: path, circle, rect, line, polyline, polygon, ellipse, g. Everything else is refused — script, image, use, href, style=, on…=, javascript:, url( — and the plug-in falls back to its icon. That is not an error: it is a fallback.

Types de réglage

Setting types

Type	Type	Rendu	Rendered as
`'text'`	champ texte	text field	`defaut`
`'number'`	champ numérique	number field	`min`, `max`, `pas`
`'range'`	curseur, avec sa valeur affichée à droite du libellé	slider, with its value shown right of the label	`min`, `max`, `pas`, `unite`
`'color'`	sélecteur de couleur	colour picker	`defaut` en `#rrggbb`
`'select'`	liste déroulante	dropdown	`choix` : tableau de valeurs ou de `{value,label}`
`'checkbox'`	case à cocher	checkbox	`defaut` booléen
`'image'`	import d'image (donne une dataURL)	image import (yields a dataURL)	—
`'images'`	mixeur : un tableau de dataURL, avec vignettes, ajout et retrait	mixer: an array of dataURLs, with thumbnails, add and remove	—
`'apercu'`	grande toile d'aperçu, dessinée par votre plug-in	large preview canvas, drawn by your plug-in	`ratio` (hauteur / largeur, 1 par défaut)

💡 unite et les tirettes. Un curseur rend un nombre nu : « 8 » ne dit pas s'il s'agit de millimètres, de degrés ou de pourcents. unite: ' mm' affiche 8 mm à droite du libellé, et la valeur suit le curseur en direct. Utilisez des pourcentages (0–100) plutôt que des fractions (0–1) quand le réglage est destiné à être tâtonné : un curseur se lit en entier, pas en décimales.

💡 unite and sliders. A slider yields a bare number: "8" does not say whether it means millimetres, degrees or percent. unite: ' mm' renders 8 mm right of the label, and the value follows the slider live. Prefer percentages (0–100) to fractions (0–1) when the setting is meant to be felt out: a slider is read in whole numbers, not decimals.

Afficher un grand aperçu

Showing a large preview

Déclarez un champ 'apercu', puis dessinez dedans avec api.toileApercu(). La toile est un rond de 210 px, centré et détaché de 15 px du haut ; sa résolution interne est le double, pour rester nette sur un écran à densité doublée. C'est à vous de la remplir — et de découper au cercle : un rond n'a pas de coin, donc un dessin carré s'arrête net sur la diagonale et paraît rogné. Un motif ne se juge pas sur une vignette : montrez la répétition, pas une seule forme.

Declare an 'apercu' field, then draw into it with api.toileApercu(). The canvas is a circle 210 px across, centred and set 15 px from the top; its internal resolution is doubled, to stay sharp on a double-density screen. Filling it is up to you — and so is clipping to the circle: a circle has no corner, so a square drawing stops dead on the diagonal and looks cropped. A pattern cannot be judged from a thumbnail: show the repetition, not a single shape.

options: [
  { key: 'apercu', label: 'Aperçu', type: 'apercu', ratio: 1 },   /* rond */
  { key: 'taille', label: 'Taille', type: 'range', defaut: 4, min: 0.4, max: 60, pas: 0.2, unite: ' mm' }
],
run: function (api, o) {
  var tuile = /* … votre canvas hors écran … */ null;
  var t = api.toileApercu();          /* null si aucun champ 'apercu' */
  if (t && tuile) {
    var W = t.largeur, H = t.hauteur;
    t.ctx.clearRect(0, 0, W, H);
    t.ctx.save();
    /* Le découpage au cercle : sans lui, le dessin s'arrête sur la
       diagonale du carré et le rond paraît rogné au lieu d'être rempli. */
    t.ctx.beginPath();
    t.ctx.arc(W / 2, H / 2, Math.min(W, H) / 2, 0, Math.PI * 2);
    t.ctx.clip();
    var pas = W / 3;                  /* trois répétitions : on voit le rythme */
    /* On part d'un pas AVANT le bord : le débord circulaire est couvert. */
    for (var y = -pas; y < H + pas; y += pas) {
      for (var x = -pas; x < W + pas; x += pas) {
        t.ctx.drawImage(tuile, x, y, pas, pas);
      }
    }
    t.ctx.restore();
  }
}

Mixer plusieurs images

Mixing several images

Le champ 'images' vous rend un tableau de dataURL — l'utilisateur en ajoute autant qu'il veut, chacune se retire par sa croix. C'est à vous de décider comment elles se composent : superposées avec un mode de fusion, découpées en bandes, alternées d'une cellule à l'autre. Le plug-in Motif les empile dans la tuile avec globalCompositeOperation.

The 'images' field yields an array of dataURLs — the user adds as many as they like, each removable through its cross. How they combine is up to you: stacked with a blend mode, sliced into bands, alternated from cell to cell. The Vector Pattern plug-in stacks them in the tile using globalCompositeOperation.

/* Charger une fois, dessiner souvent : `cellule()` peut être appelée
   des centaines de fois par tuile — un `new Image()` à chaque fois
   ferait un chargement par copie. */
var chargees = [];
function chargerImages(liste) {
  return Promise.all((liste || []).map(function (url) {
    return new Promise(function (res) {
      var im = new Image();
      im.onload = function () { res(im); };
      im.onerror = function () { res(null); };
      im.src = url;
    });
  })).then(function (l) { chargees = l.filter(Boolean); });
}

function dessinerImages(g, taillePx, melange, opacite) {
  if (!chargees.length) return false;
  chargees.forEach(function (im) {
    g.save();
    g.globalCompositeOperation = melange;      /* 'multiply', 'screen'… */
    g.globalAlpha = opacite;
    g.drawImage(im, -taillePx / 2, -taillePx / 2, taillePx, taillePx);
    g.restore();
  });
  return true;                                  /* des images ont été posées */
}

⚠️ Un aperçu doit rester bon marché. Il s'exécute à chaque mouvement de tirette. Ne relisez pas le document, n'appelez pas toDataURL() et ne redimensionnez pas d'image dans le chemin d'aperçu : construisez une petite tuile et répétez-la. C'est la différence entre un réglage qu'on tâtonne et une interface qui saccade.

⚠️ A preview must stay cheap. It runs on every slider movement. Do not re-read the document, do not call toDataURL(), and do not resize images on the preview path: build a small tile and repeat it. That is the difference between a setting you feel out and an interface that stutters.

L'API hôte

The host API

Appel	Call	Ce qu'il donne
`api.fabric`	le moteur graphique (Fabric 5.1)	the graphics engine (Fabric 5.1)
`api.mm(v)` / `api.px(v)`	millimètres ↔ points	millimetres ↔ points
`api.document`	largeur, hauteur, page, pages, fond perdu, marges	width, height, page, pages, bleed, margins
`api.selection()`	les objets sélectionnés	the selected objects
`api.canvases()`	tous les plans de travail (une page = un canvas) — pour retirer ses propres objets partout	every canvas (one page = one canvas) — to remove your own objects everywhere
`api.version`	la version de l'API hôte — à comparer si votre plug-in dépend d'un comportement précis	the host API version — compare it if your plug-in relies on a precise behaviour
`api.add(obj, opts)`	ajoute au plan de travail — annulable par Ctrl+Z. `opts` : `libelle`, `envoyerEnArriere`, `verrouille`	adds to the canvas — undoable with Ctrl+Z. `opts`: `libelle`, `envoyerEnArriere`, `verrouille`
`api.addMany(liste)`	ajoute plusieurs objets en une action	adds several objects as one action
`api.remove(obj)`	retire un objet, ou un tableau d'objets, du plan actif	removes an object, or an array of objects, from the active canvas
`api.apercu`	`true` quand la trappe vous exécute pour un aperçu — voir plus bas	`true` when the trap runs you for a preview — see below
`api.toileApercu()`	la grande toile d'aperçu de la trappe : `{ canvas, ctx, largeur, hauteur }`, ou `null`. Vous y dessinez vous-même le résultat — voir plus bas	the trap's large preview canvas: `{ canvas, ctx, largeur, hauteur }`, or `null`. You draw the result into it yourself — see below
`api.sync()`	synchronise `pages[]` sans écrire d'historique	syncs `pages[]` without a history entry
`api.commit(libelle)`	écrit l'entrée d'historique (sans effet en aperçu)	writes the history entry (no-op during preview)
`api.imageDataUrl()`	ouvre un sélecteur, rend une dataURL	opens a file picker, yields a dataURL
`api.t(v)`	résout un libellé `L(fr, en, ja)` dans la langue de l'interface — pour les messages d'exécution	resolves an `L(fr, en, ja)` label into the interface language — for runtime messages
`api.alert(msg)` / `api.prompt(q, def)`	dialogues de la DA SuperPrint	SuperPrint-styled dialogs
`api.store.get/set`	un stockage persistant, propre au plug-in	persistent storage, scoped to the plug-in
`api.log(msg)`	écrit dans la console du navigateur	writes to the browser console

⚠️ Un plug-in est un script que vous choisissez d'installer. Il s'exécute avec les droits de la page, comme une extension de navigateur ou un script Photoshop : il n'existe pas de bac à sable étanche en JavaScript. Ce que l'API apporte, c'est un contrat : le plug-in ne touche ni au DOM de l'application ni à ses variables internes, il passe par les fonctions ci-dessus. C'est ce qui le rend stable quand SuperPrint évolue. N'installez que des plug-ins dont vous connaissez la provenance.

⚠️ A plug-in is a script you choose to install. It runs with the page's privileges, like a browser extension or a Photoshop script: JavaScript provides no watertight sandbox. What the API provides is a contract: the plug-in touches neither the application DOM nor its internal variables, it goes through the calls above. That is what keeps it working as SuperPrint evolves. Only install plug-ins whose origin you trust.

L'aperçu en direct, et pourquoi `run()` est appelé plusieurs fois

Live preview, and why `run()` is called several times

La trappe n'attend pas que vous cliquiez : chaque mouvement de tirette relance votre run(), 140 ms après le dernier changement. C'est ce qui fait qu'un plug-in se règle en le regardant. Trois conséquences, et elles sont toutes à votre charge :

The trap does not wait for a click: every slider movement re-runs your run(), 140 ms after the last change. That is what lets a plug-in be adjusted by watching it. Three consequences, and all three are your responsibility:

Votre run() doit être rejouable. Il sera appelé dix, trente fois de suite avec des réglages différents. Retirez donc vos objets précédents avant d'en poser de nouveaux — c'est ce que fait le plug-in Motif avec api.canvases() et son marqueur _spMotifPlugin.
N'écrivez rien de lourd sans regarder api.apercu. En aperçu, l'historique n'est pas écrit par le registre : api.add() se contente de synchroniser. Vous pouvez donc tout faire, sauf ce qui coûte cher pour rien — un api.alert() à chaque mouvement serait insupportable.
Une seule entrée d'historique par session de réglage. C'est la validation (Enregistrer, ou la fermeture de la trappe) qui l'écrit. Mesuré : dix mouvements de tirette produisent zéro entrée, et le bouton Enregistrer exactement une.

Your run() must be replayable. It will be called ten, thirty times in a row with different settings. So remove your previous objects before placing new ones — that is what the Vector Pattern plug-in does with api.canvases() and its _spMotifPlugin marker.
Do nothing heavy without checking api.apercu. During preview the registry does not write history: api.add() only syncs. So you may do anything, except what costs a lot for nothing — an api.alert() on every movement would be unbearable.
One history entry per tuning session. Validation (Save, or closing the trap) writes it. Measured: ten slider movements produce zero entries, and the Save button exactly one.

run: function (api, o) {
  /* 1. Enlever ce que la fois précédente a posé — SURTOUT en aperçu. */
  api.canvases().forEach(function (cv) {
    cv.getObjects().slice().forEach(function (obj) {
      if (obj && obj._monPlugIn) cv.remove(obj);
    });
    if (cv.requestRenderAll) cv.requestRenderAll();
  });

  /* 2. Construire et poser. `api.add` gère l'aperçu tout seul :
        pas d'historique pendant le réglage, une entrée à la validation. */
  var r = new api.fabric.Rect({ left: 0, top: 0,
    width: api.document.largeur, height: api.document.hauteur, fill: o.couleur });
  r._monPlugIn = true;          // votre marque, pour l'étape 1
  api.add(r, { libelle: 'Mon plug-in', envoyerEnArriere: true });
}

Un plug-in complet, à copier dans un fichier

A complete plug-in, copy it into a file

Enregistrez ce texte sous cadre-photo.plugin.js, puis glissez le fichier sur la bibliothèque. Il dessine un cadre et y pose un titre, avec trois réglages et un aperçu en direct.

Save this text as cadre-photo.plugin.js, then drop the file onto the library. It draws a frame and places a title inside it, with three settings and a live preview.

SPPluginAPI({
  id: 'cadre-photo',
  name: 'Cadre photo',
  version: '1.0.0',
  author: 'Vous',
  icon: '❏',
  description: 'Un cadre, un titre, des marges : la base d\'une couverture.',

  options: [
    { key: 'marge', label: 'Marge (mm)', type: 'number', defaut: 12, min: 0, max: 60, pas: 1 },
    { key: 'epaisseur', label: 'Épaisseur du filet (mm)', type: 'range', defaut: 0.6, min: 0.1, max: 6, pas: 0.1 },
    { key: 'titre', label: 'Titre', type: 'text', defaut: 'Titre' },
    { key: 'couleur', label: 'Couleur', type: 'color', defaut: '#1a1a1a' }
  ],

  run: function (api, o) {
    var f = api.fabric;

    /* Rejouable : on retire ce que la fois précédente a posé. */
    api.canvases().forEach(function (cv) {
      cv.getObjects().slice().forEach(function (obj) {
        if (obj && obj._cadrePhoto) cv.remove(obj);
      });
      if (cv.requestRenderAll) cv.requestRenderAll();
    });

    var L = api.document.largeur, H = api.document.hauteur;
    var m = api.mm(Math.max(0, Number(o.marge) || 0));

    var cadre = new f.Rect({
      left: m, top: m, width: L - m * 2, height: H - m * 2,
      fill: 'transparent', stroke: o.couleur,
      strokeWidth: api.mm(Math.max(0.1, Number(o.epaisseur) || 0.6))
    });
    cadre._cadrePhoto = true;
    api.add(cadre, { libelle: 'Cadre photo' });

    var titre = new f.Textbox(String(o.titre || ''), {
      left: m, top: m + m * 0.5, width: L - m * 2,
      fontFamily: 'Montserrat', fontSize: H * 0.07, fontWeight: '700',
      fill: o.couleur, textAlign: 'center'
    });
    titre._cadrePhoto = true;
    api.add(titre, { libelle: 'Cadre photo' });
  }
});

Ce que le registre vérifie avant d'installer

What the registry checks before installing

Le fichier est évalué une première fois, à vide. S'il échoue, rien n'est installé et le message dit exactement ce qui manque :

The file is evaluated once, empty. If it fails, nothing is installed and the message says exactly what is missing:

Message	Message	Cause	Cause
« le plug-in n'appelle pas `SPPluginAPI({ … })` »	"the plug-in does not call `SPPluginAPI({ … })`"	le fichier s'exécute sans déclarer de manifeste	the file runs without declaring a manifest
« identifiant de plug-in invalide »	"invalid plug-in identifier"	`id` absent, ou hors de `[a-z0-9._-]`, 2 à 64 caractères	`id` missing, or outside `[a-z0-9._-]`, 2–64 characters
« nom du plug-in manquant »	"plug-in name missing"	`name` absent — attention, c'est `name`, pas `nom`	`name` missing — note it is `name`, not `nom`
« le plug-in a échoué au chargement : … »	"the plug-in failed to load: …"	une exception est levée pendant l'évaluation du fichier	an exception is thrown while the file is evaluated
« ce plug-in n'a pas de fonction run() »	"this plug-in has no run() function"	`run` absent — le plug-in s'installe mais ne peut rien faire	`run` absent — it installs but can do nothing

⚠️ Le manifeste est en anglais, les valeurs peuvent être en français. Les clés sont id, name, version, author, icon, description, options, run. Chaque option porte key, label, type, defaut, min, max, pas, choix, aide. Écrire nom ou label à la place de name est la première erreur de tout premier plug-in — et le message vous le dit.

⚠️ The manifest is in English, values may be in any language. The keys are id, name, version, author, icon, description, options, run. Each option carries key, label, type, defaut, min, max, pas, choix, aide. Writing nom or label instead of name is every first plug-in's first mistake — and the message tells you so.

Partager un plug-in

Sharing a plug-in

Un plug-in est un seul fichier. Il n'y a rien à compiler, rien à empaqueter : envoyez le .plugin.js, le destinataire le glisse sur sa bibliothèque. Pour qu'il soit repris par d'autres, donnez-lui un id stable et incrémentez version à chaque correction — c'est ce que la bibliothèque affiche, et c'est ce qui permet de reconnaître une ancienne copie à l'œil. Un plug-in intégré au produit, lui, peut déclarer trappe pour ouvrir un panneau existant ; ce champ est ignoré pour un fichier déposé, par sécurité.

A plug-in is a single file. Nothing to compile, nothing to package: send the .plugin.js, the recipient drops it onto their library. To make it reusable, give it a stable id and bump version with every fix — that is what the library displays, and what lets an old copy be recognised at a glance. A built-in plug-in may declare trappe to open an existing panel; that field is ignored for a dropped file, for safety.

Où les plug-ins sont rangés

Where plug-ins live

Clé `localStorage`	Contenu	Key
`sp_plugins_v1`	le code source de chaque plug-in installé (y compris les intégrés), avec sa date d'installation	the source of every installed plug-in (built-ins included), with its install date
`sp_plugins_actifs_v1`	l'état allumé/éteint, `{ "mon-plug-in": false }`	the on/off state, `{ "my-plugin": false }`
`sp_plugin_data_<id>`	ce que le plug-in écrit lui-même avec `api.store.set(…)` — un espace par plug-in, jamais partagé	what the plug-in writes itself with `api.store.set(…)` — one space per plug-in, never shared

Les deux sont propres au navigateur et au profil : un plug-in installé sur un poste ne l'est pas sur un autre. C'est voulu — un plug-in est du code exécutable, il ne doit pas voyager avec un document. Pour la même raison, aucun .sp ne contient de plug-in : ce qu'un plug-in a produit est enregistré comme des objets ordinaires, mais le plug-in lui-même reste chez vous.

Both are per-browser and per-profile: a plug-in installed on one machine is not installed on another. That is deliberate — a plug-in is executable code and must not travel inside a document. For the same reason no .sp contains a plug-in: what a plug-in produced is saved as ordinary objects, but the plug-in itself stays with you.

Le plug-in de référence : Motif

The reference plug-in: Vector Pattern

Livré avec SuperPrint, Motif est le plus gros plug-in du produit et sert de modèle : 29 réglages dont 13 tirettes, 15 formes, 7 symétries du groupe du carré (D4), un tirage pseudo-aléatoire à graine — donc reproductible —, une super-tuile de N×N cellules pour casser la répétition, un mode kaléidoscope de page qui reflète un quadrant sur les quatre, et un mode crazy qui tire forme, angle, échelle et couleur à chaque copie. Son mixeur empile jusqu'à huit images avec un mode de fusion. Ouvrez-le dans un éditeur : c'est le meilleur exemple de ce que l'API permet — le grand aperçu (api.toileApercu()), les champs 'apercu' et 'images', l'aperçu en direct et le retrait de ses propres objets d'un rendu à l'autre.

Shipped with SuperPrint, Vector Pattern is the product's largest plug-in and serves as the model: 29 settings including 13 sliders, 15 shapes, 7 symmetries of the square group (D4), a seeded pseudo-random draw — hence reproducible —, an N×N super-tile to break up repetition, a page kaleidoscope mode that mirrors one quadrant onto all four, and a crazy mode that draws shape, angle, scale and colour afresh for every copy. Its mixer stacks up to eight images with a blend mode. Open it in an editor: it is the best example of what the API allows — the large preview (api.toileApercu()), the 'apercu' and 'images' fields, live preview, and removing its own objects between renders.

Un mot sur les performances

A word on performance

Pour répéter une forme, ne créez pas des milliers d'objets : une page A4 à 8 mm de pas en demanderait ≈ 2 300, et la sélection comme l'export s'effondrent. Utilisez un fabric.Pattern — un seul objet, que le navigateur répète au rendu et que l'export PDF répète de la même façon. C'est ce que fait le plug-in Motif : 9 ms pour habiller une page entière, mesuré.

To repeat a shape, do not create thousands of objects: an A4 page at 8 mm spacing would need ≈ 2,300, and both selection and export collapse. Use a fabric.Pattern — a single object the browser repeats at render time and the PDF export repeats the same way. That is what the Vector Pattern plug-in does: 9 ms to fill an entire page, measured.

Serveur MCP MCP Server

Le dossier superprint/mcp-server/ contient un serveur Model Context Protocol. Il permet à un assistant — Claude Desktop, Claude Code, Cursor, ou tout autre client MCP — de lire, convertir, créer et motiver des documents SuperPrint. Le bouton MCP Server, en bas de la barre de droite, affiche la commande exacte et le JSON de configuration, prêts à copier.

The superprint/mcp-server/ folder contains a Model Context Protocol server. It lets an assistant — Claude Desktop, Claude Code, Cursor, or any other MCP client — read, convert, create and pattern SuperPrint documents. The MCP Server button, at the bottom of the right bar, shows the exact command and the configuration JSON, ready to copy.

Les outils exposés

Exposed tools

Outil	Tool	Ce qu'il fait
`superprint_formats`	liste les formats de page en millimètres	lists page formats in millimetres
`superprint_inspect`	résume un `.sp` ou `.json`	summarises a `.sp` or `.json`
`superprint_convert`	convertit `.sp → .json` et retour	converts `.sp → .json` and back
`superprint_create`	crée un document (format, pages, texte)	creates a document (format, pages, text)
`superprint_pattern`	crée un document habillé d'un motif	creates a document filled with a pattern

Les paramètres de chaque outil

Each tool's parameters

Outil	Paramètres (`*` = obligatoire)	Tool
`superprint_formats`	aucun	none
`superprint_inspect`	`chemin*`
`superprint_convert`	`chemin`, `vers` (`sp` \| `json`), `sortie`
`superprint_create`	`sortie*`, `titre`, `format` (`A4`, `A5`, `A3`, `Letter`, `perso`), `pages` (défaut 1), `texte`
`superprint_create`	`largeur`, `hauteur` (si `format: "perso"`), `fondPerdu` (défaut 3 mm), `marges` (défaut 20 mm)
`superprint_pattern`	`sortie*`, `titre`, `format`, `couleur`, `angle`
`superprint_pattern`	`forme` : `cercle`, `carre`, `losange`, `triangle`, `etoile`, `croix`, `vague`, `lignes` — `pas` (défaut 8 mm), `taille` (défaut 4 mm)

⚠️ Le serveur écrit des fichiers, il ne les modifie jamais sur place. sortie est obligatoire pour les deux outils qui fabriquent un document ; superprint_convert s'en passe et écrit à côté du fichier source en suffixant .converti — doc.sp devient doc.converti.json. Aucun outil n'écrase le fichier d'entrée. Par ailleurs un chemin relatif est résolu depuis le répertoire courant du client MCP — donc donnez des chemins absolus, sinon un client lancé depuis ailleurs écrira ailleurs.

⚠️ The server writes files, it never edits in place. sortie is required for the two tools that build a document; superprint_convert does without it and writes next to the source file with a .converti suffix — doc.sp becomes doc.converti.json. No tool overwrites its input. Also, a relative path is resolved from the MCP client's working directory — so give absolute paths, or a client started elsewhere will write elsewhere.

Ce qu'on peut demander à l'assistant

What you can ask the assistant

Une fois le serveur déclaré, l'assistant voit les cinq outils comme n'importe quel autre. Les demandes qui marchent le mieux sont celles qui nomment le format et le fichier de sortie :

Once the server is declared, the assistant sees the five tools like any other. The requests that work best are those naming the format and the output file:

« Crée une A5 de 8 pages avec le titre Rapport annuel et enregistre-la dans C:\tmp\rapport.sp. »
« Inspecte C:\tmp\rapport.sp et dis-moi combien de pages et d'objets il contient. »
« Convertis-le en .json à côté, puis compare les deux résumés. »
« Génère une couverture A4 avec un motif d'étoiles à 12 mm, encre #1a1a1a, dans C:\tmp\couverture.sp. »
"Create an 8-page A5 with the title Annual report and save it to C:\tmp\report.sp."
"Inspect C:\tmp\report.sp and tell me how many pages and objects it holds."
"Convert it to .json next to it, then compare the two summaries."
"Generate an A4 cover with a 12 mm star pattern, ink #1a1a1a, into C:\tmp\cover.sp."

Le fichier produit s'ouvre ensuite dans SuperPrint par Ouvrir un projet, comme n'importe quel .sp : le serveur et l'application partagent le même format, c'est tout l'intérêt.

The produced file then opens in SuperPrint through Open project, like any .sp: server and application share the same format, which is the whole point.

Installation

Aucune dépendance : le serveur n'utilise que Node ≥ 18. Il n'y a pas de npm install — le protocole MCP sur stdio est du JSON-RPC 2.0 délimité par des sauts de ligne, l'implémenter directement évite un registre inaccessible ou une coupure réseau au premier lancement.

No dependencies: the server only uses Node ≥ 18. There is no npm install — MCP over stdio is newline-delimited JSON-RPC 2.0, and implementing it directly avoids an unreachable registry or a network failure on first launch.

cd superprint/mcp-server
node server.mjs

# Claude Desktop : %APPDATA%\Claude\claude_desktop_config.json (Windows)
#                  ~/Library/Application Support/Claude/... (macOS)
{
  "mcpServers": {
    "superprint": {
      "command": "node",
      "args": ["/chemin/absolu/vers/superprint/mcp-server/server.mjs"]
    }
  }
}

Le serveur travaille sur des fichiers, jamais sur l'application ouverte : aucun état partagé avec une fenêtre, donc utilisable en terminal, en serveur ou en CI. Deux limites assumées : il n'y a pas d'export PDF (le moteur de rendu vit dans le navigateur), et superprint_pattern décrit le motif dans l'objet plutôt que de dessiner des milliers de formes.

The server works on files, never on the running application: no state shared with a window, so it works in a terminal, on a server or in CI. Two accepted limits: there is no PDF export (the rendering engine lives in the browser), and superprint_pattern describes the pattern inside the object rather than drawing thousands of shapes.

Le bouton « MCP Server »

The "MCP Server" button

En bas de la barre de droite, le bouton MCP Server n'installe rien : il affiche ce qu'il faut copier. La fenêtre montre quatre blocs — le dossier du serveur, la commande de lancement, l'emplacement du fichier de configuration du client selon le système, et le bloc mcpServers déjà rempli — chacun avec son bouton Copier. C'est le moyen le plus court de répondre à « où est le serveur, et qu'est-ce que je colle où ? ».

At the bottom of the right bar, the MCP Server button installs nothing: it shows what to copy. The window displays four blocks — the server folder, the launch command, the client configuration file location for your system, and the already-filled mcpServers block — each with its own Copy button. It is the shortest answer to "where is the server, and what do I paste where?".

⚠️ Le chemin affiché est absolu quand il peut l'être. Ouvert en file://, SuperPrint déduit le dossier du serveur de sa propre adresse et vous donne C:\…\superprint\mcp-server\ tout prêt. Ouvert depuis un serveur de développement ou la coquille Tauri, le chemin disque n'est pas lisible depuis la page : le bouton affiche alors le dossier relatif et le dit franchement, plutôt que d'inventer un chemin qui échouerait à l'installation. Le bloc mcpServers, lui, exige toujours un absolu — c'est la seule panne possible après la copie.

⚠️ The displayed path is absolute when it can be. Opened over file://, SuperPrint derives the server folder from its own address and hands you C:\…\superprint\mcp-server\ ready to paste. Opened from a dev server or the Tauri shell, the disk path is not readable from the page: the button then shows the relative folder and says so plainly, rather than inventing a path that would fail at launch. The mcpServers block itself always needs an absolute — that is the only failure left after copying.

Vérifier que le serveur parle

Checking that the server talks

Sur stdio, le serveur attend du JSON-RPC délimité par des sauts de ligne. On peut donc le tester sans client, en lui envoyant une poignée de main puis la liste des outils :

On stdio the server expects newline-delimited JSON-RPC. So it can be tested without a client, by sending a handshake then the tool list:

# PowerShell — deux lignes JSON-RPC dans l'entrée standard du serveur
@'
{"jsonrpc":"2.0","id":1,"method":"initialize","params":{"protocolVersion":"2024-11-05","capabilities":{},"clientInfo":{"name":"t","version":"1"}}}
{"jsonrpc":"2.0","id":2,"method":"tools/list"}
'@ | node server.mjs

Deux lignes de réponse, dont la seconde contient les cinq outils : si vous les voyez, la configuration du client ne peut plus échouer que sur le chemin de server.mjs. C'est la panne la plus fréquente, et la fenêtre du bouton donne ce chemin tout prêt. Sous macOS ou Linux, remplacez le @'…'@ par un printf '%s\n' '…' '…'.

Two response lines, the second holding the five tools: if you see them, the client configuration can then only fail on the path to server.mjs. That is the most common failure, and the button's window hands you that path ready to paste. On macOS or Linux, replace the @'…'@ here-string with a printf '%s\n' '…' '…'.

Raccourcis clavier Keyboard Shortcuts

Texte

Text

Raccourci	Shortcut	Action
`Ctrl`+`B`	Gras	Bold
`Ctrl`+`I`	Italique	Italic
`Ctrl`+`U`	Souligné	Underline
`Ctrl`+`Shift`+`H`	Surligner	Highlight
`Ctrl`+`A`	Tout sélectionner	Select all
`Tab`	Tabulation : insère une tabulation dans le bloc en édition (les taquets sont activés au besoin, pas par défaut 10 mm)	Tab: inserts a tab in the block being edited (tab stops enabled if needed — default step 10 mm)
`Option` + `Tab` `Maj` + `Tab`	Tab intégré : navigation vers le champ / contrôle suivant (comportement natif du navigateur ; sous Windows Alt+Tab est réservé au système, utilisez Maj+Tab).	Built-in Tab: move to the next field / control (native browser behaviour; on Windows Alt+Tab is reserved by the system — use Shift+Tab).

Édition

Editing

Raccourci	Shortcut	Action
`Ctrl`+`C` / `X` / `V`	Copier / Couper / Coller	Copy / Cut / Paste
`Ctrl`+`Z`	Annuler	Undo
`Ctrl`+`Y` / `Ctrl`+`Shift`+`Z`	Rétablir	Redo
`Suppr` / `Retour arrière`	Supprimer l'objet	Delete object
`Alt`+Glisser	Dupliquer l'objet	Duplicate object

Objets

Objects

Raccourci	Shortcut	Action
`Ctrl`+`Shift`+`G`	Grouper	Group
`Ctrl`+`Shift`+`U`	Dégrouper	Ungroup
`Ctrl`+`]`	Avancer d'un plan	Bring forward
`Ctrl`+`[`	Reculer d'un plan	Send backward
`Flèches`	Déplacer de 1px	Move 1px
`Shift`+`Flèches`	Déplacer de 10px	Move 10px

Outils rapides

Quick Tools

Raccourci	Shortcut	Action
`⌥`+`T`	Ajouter un texte	Add text
`⌥`+`I`	Ajouter une image	Add image
`⌥`+`R`	Ajouter un rectangle	Add rectangle
`⌥`+`C`	Ajouter un cercle	Add circle
`⌥`+`P`	Outil plume	Pen tool

Fichiers & Navigation

Files & Navigation

Raccourci	Shortcut	Action
`Ctrl`+`S`	Sauvegarder (JSON ou Web3)	Save (JSON or Web3)
`Ctrl`+`O`	Ouvrir un projet	Open project
`Ctrl`+`E`	Exporter PDF	Export PDF
`Ctrl`+`N`	Nouvelle page	New page
`Ctrl`+`←` / `→`	Page précédente / suivante	Previous / Next page
`Ctrl`+`L`	Lier les blocs texte	Link text blocks
`Ctrl`+`Shift`+`L`	Délier les blocs texte	Unlink text blocks

Zoom

Raccourci	Shortcut	Action
`Ctrl`+`=`	Zoom avant	Zoom in
`Ctrl`+`-`	Zoom arrière	Zoom out
`Ctrl`+`0`	Réinitialiser à 100%	Reset to 100%
`Ctrl`+Molette	Zoom libre	Free zoom

Formats de fichiers File Formats

Import (10 formats)

Format	Bibliothèque	Library	Description FR
JSON	Native	Restauration complète du projet	Full project restore
PDF	PDF.js	Page par page avec aperçu, sélection, recadrage	Page-by-page with preview, selection, crop
TXT / RTF	Native	Texte brut avec auto-pagination	Plain text with auto-pagination
DOCX	Mammoth.js	Documents Word (texte + images inline)	Word docs (text + inline images)
ODT	JSZip + XML	OpenDocument (texte, listes, tableaux, images)	OpenDocument (text, lists, tables, images)
IDML	JSZip + XML	Format d'échange PAO — ZIP avec polices + liens	Standard DTP interchange format — ZIP with fonts + links
.sla	XML parser	Texte + formes basiques (BETA)	Basic text + shapes (BETA)
SVG	Fabric.js	Graphiques vectoriels	Vector graphics
Images	Fabric.js	PNG, JPG, WebP (fichier ou presse-papiers)	PNG, JPG, WebP (file or clipboard)
.sp	JSON	Projet complet en JSON (images et polices embarquées)	Complete project as JSON (images and fonts embedded)

Export (4 formats)

Format	Bibliothèque	Library	Description FR
PDF	jsPDF	Multi-pages, 72/150/300 DPI, fond perdu, repères d'impression	Multi-page, 72/150/300 DPI, bleed, trim marks
PDF imposé	jsPDF	Imposition cahier pour impression	Booklet imposition for print
Print-to-Web	JSZip	Mini-site HTML en ZIP (D4Export)	HTML mini-site in ZIP (D4Export)
.sp	JSON	Projet complet en JSON (images intégrées)	Complete project as JSON (images embedded)

Bibliothèques Libraries

Bibliothèque	Library	Version	Fichier	File
Fabric.js	5.3.0	JS/fabric.min.js	Moteur de rendu canvas — objets, texte, images, événements, sélection	Canvas rendering engine — objects, text, images, events, selection
jsPDF	2.x	JS/jspdf.umd.min.js	Génération PDF multi-pages côté client	Client-side multi-page PDF generation
JSZip	3.x	JS/jszip.min.js	Lecture/écriture ZIP pour IDML, ODT et l'export Print-to-Web	ZIP read/write for IDML, ODT and Print-to-Web export
PDF.js	3.x	JS/pdf.min.js	Rendu PDF pour import page par page	PDF rendering for page-by-page import
Paper.js	0.12	JS/paper-full.min.js	Opérations booléennes de tracés vectoriels (Pathfinder)	Boolean path operations (Pathfinder)
Mammoth.js	1.x	JS/mammoth.min.js	Conversion DOCX → HTML structuré	DOCX to structured HTML conversion
Hypher	0.2	JS/hypher.js + hyphenation-*.js	Moteur de césure extensible (FR, EN, DE, ES, IT)	Extensible hyphenation engine (FR, EN, DE, ES, IT)
pdf-lib	1.17	JS/pdf-lib.min.js	Post-traitement PDF natif : export CMYK, imposition, typos vectorielles	Native PDF post-processing: CMYK export, imposition, vector typography
WebLLM (studio)	^0.2.84	node_modules/@mlc-ai/web-llm (npm)	Inférence LLM locale dans le navigateur (WebGPU) — studio SP213	In-browser local LLM inference (WebGPU) — SP213 studio
Vite (version locale)	^6.3.5	node_modules/vite (npm)	Serveur de dev + bundler de la version locale (sp213-local)	Dev server + bundler for the local version (sp213-local)

SuperPrint — simon@2points13.fr
Documentation générée le 4 octobre 2026 — v1.7.687 Documentation generated September 16, 2026 — v1.7.456

Manuel d'utilisation User Manual Guide complet pour créer vos documents avec SuperPrint Complete guide to creating documents with SuperPrint

SuperPrint est un éditeur de mise en page professionnel 100% navigateur. Aucune installation requise. Créez des flyers, affiches, brochures et documents multi-pages, puis exportez en PDF haute résolution prêt pour l'impression.

SuperPrint is a professional layout editor that runs entirely in your browser. No installation needed. Create flyers, posters, brochures and multi-page documents, then export as high-resolution print-ready PDFs.

Créer un nouveau projet

Create a New Project

Cliquez sur le bouton + dans la barre d'outils supérieure (toolbar) pour ouvrir la fenêtre « Nouveau projet ». Choisissez :

Click the + button in the top toolbar to open the "New Project" dialog. Choose:

Format — A4, A5, Letter ou dimensions personnalisées
Format — A4, A5, Letter or custom dimensions
Nombre de pages — Vous pouvez en ajouter/supprimer à tout moment
Number of pages — You can add/remove pages anytime
Marges & fond perdu — Définissez les zones de sécurité pour l'impression
Margins & bleed — Define safe zones for print

Raccourci : les boutons A4, A5, Letter dans la barre latérale gauche changent directement le format.

Tip: The A4, A5, Letter buttons in the left sidebar change the format directly.

Sommaire rapide

Quick contents

🚀 Démarrer

Installation locale (Vite) ou en ligne
Local install (Vite) or online
Préférences & interface
Preferences & interface

📄 Créer

Pages, texte, typographie
Pages, text, typography
Images, formes, outil plume
Images, shapes, pen tool

🗂️ Organiser

Calques, grilles, repères
Layers, grids, guides
Pages maîtresses, planches
Master pages, spreads

📦 Produire

Sauvegarder, importer, exporter
Save, import, export
PDF CMYK prêt pour l'impression
Print-ready CMYK PDF

⌨️ Référence

Raccourcis clavier, paramètres
Keyboard shortcuts, settings
Annuler/rétablir, zoom, GPU
Undo/redo, zoom, GPU

🤖 IA / Studio

Studio SP213 — maquettes par IA
SP213 Studio — AI layouts
Assistant IA intégré
Built-in AI assistant

Installation locale (Vite) Local install (Vite)

Deux façons d'utiliser SuperPrint

Two ways to use SuperPrint

En ligne (aucune installation) — ouvrez simplement superprint.cc dans votre navigateur. Tout fonctionne directement, sans rien installer.

Online (no install) — just open superprint.cc in your browser. Everything works directly, nothing to install.

En local (100% hors-ligne) — toute l'application PAO + le studio SP213 sont servis par un serveur Vite local. Le modèle IA (WebLLM) est téléchargé une fois puis mis en cache — plus aucune donnée ne quitte votre machine.

Locally (100% offline) — the entire DTP app + the SP213 studio are served by a local Vite server. The AI model (WebLLM) is downloaded once then cached — no data ever leaves your machine.

Prérequis

Prerequisites

Node.js ≥ 18 (inclut npm) — nodejs.org
Un navigateur récent avec WebGPU (Chrome/Edge) pour le modèle local
A recent browser with WebGPU (Chrome/Edge) for the local model

Installation (Windows)

Install (Windows)

Copiez-collez cette ligne dans PowerShell :

Copy-paste this line in PowerShell:

cd $HOME; irm https://superprint.cc/install.ps1 | iex

Cette commande télécharge sp213-local.zip, le décompresse dans $HOME/sp213-local, installe les dépendances puis lance le serveur.

This command downloads sp213-local.zip, unpacks it to $HOME/sp213-local, installs dependencies and starts the server.

Installation (macOS / Linux)

Install (macOS / Linux)

Copiez-collez cette ligne dans le Terminal :

Copy-paste this line in the Terminal:

curl -fsSL https://superprint.cc/install.sh | bash

Démarrage (déjà installé)

Launch (already installed)

Depuis le dossier sp213-local :

From the sp213-local folder:

npm.cmd install; npm.cmd run dev

Puis ouvrez http://localhost:5173 dans votre navigateur. La pré-home locale propose une ligne à copier simplifiée (npm run dev) et des boutons pour lancer l'app, le studio ou la documentation.

Then open http://localhost:5173 in your browser. The local pre-home offers a simplified copy line (npm run dev) and buttons to launch the app, the studio or the documentation.

Scripts npm

npm scripts

Commande	Rôle	Role
`npm run dev`	Lance Vite + bannière (scripts/start.mjs)	Starts Vite + banner (scripts/start.mjs)
`npm run dev:plain`	Lance Vite sans bannière	Starts Vite without banner
`npm run setup`	Assistant d'installation (téléchargement + décompression + npm install)	Install wizard (download + unzip + npm install)
`npm run build`	Build de production (dist/)	Production build (dist/)
`npm run preview`	Prévisualise le build de production	Preview the production build

Structure du projet local

Local project structure

sp213-local/
├── index.html          ← pré-home (lancer / ouvrir l'app, le studio, la doc)
├── src/main.js         ← logique du studio SP213
├── public/             ← assets servis à la racine par Vite
│   ├── favicon.png
│   └── superprint/     ← copie COMPLÈTE de l'app + du studio web
├── scripts/
│   ├── start.mjs       ← launcher dev (bannière SUPERPRINT)
│   └── setup.mjs       ← assistant d'installation
├── package.json        ← @mlc-ai/web-llm + vite
└── vite.config.js

⚙ Ouvrir les Préférences dès le départ

⚙ Open Preferences from the start

Before anything else, click the ⚙ icon at the very top of the left sidebar. The Preferences panel is the central control hub of SuperPrint and contains every option that shapes your editing experience: theme (light/dark), interface language (FR / EN / JA), automatic hyphenation, pasteboard, invisible characters, CMYK color picker, Pantone spot colors, soft proof simulation, save mode (browser, .sp, JSON, Web3), GPU acceleration, and the keyboard shortcut reference.

Avant toute chose, cliquez sur l'icône ⚙ tout en haut de la barre latérale gauche. Le panneau Préférences est le hub central de SuperPrint et regroupe toutes les options qui façonnent votre expérience d'édition : thème (clair/sombre), langue de l'interface (FR / EN / JA), césure automatique, table de montage (pasteboard), caractères invisibles, sélecteur CMYK, tons directs Pantone, simulation d'épreuve, mode de sauvegarde (navigateur, .sp, JSON, Web3), accélération GPU, et la référence des raccourcis clavier.

All preferences are saved automatically in localStorage and restored on every launch. You can change them at any time without losing your work.

Toutes les préférences sont enregistrées automatiquement dans localStorage et restaurées à chaque lancement. Vous pouvez les modifier à tout moment sans perdre votre travail.

A complete reference of every preference is available further down in the Settings section. Power users should also visit the ⚡ GPU Acceleration section.

Une référence complète de chaque préférence est disponible plus bas dans la section Paramètres. Les utilisateurs avancés consulteront également la section ⚡ Accélération GPU.

Interface Interface

L'écran de SuperPrint est divisé en 4 zones principales :

The SuperPrint screen is divided into 4 main areas:

① Barre latérale gauche

① Left Sidebar

Outils (texte, images, formes, plume, chaînage), mode d'affichage (simple / double page), format de page, marges, et panneau des calques.

Tools (text, images, shapes, pen, chaining), display mode (single / spread), page format, margins, and layers panel.

② Barre latérale ouverte (panneau actif)

② Open Sidebar (active panel)

Quand un outil est ouvert dans la barre latérale gauche, son panneau affiche : navigation pages (◀ ▶), ajout/suppression de page, grouper/dégrouper, annuler/rétablir, et les boutons Save, Import, Export et IA.

When a tool is opened in the left sidebar, its panel shows: page navigation (◀ ▶), add/delete page, group/ungroup, undo/redo, plus the Save, Import, Export and AI buttons.

③ Zone de travail (Canvas)

③ Work Area (Canvas)

La zone centrale avec les pages du document. Faites défiler pour naviguer entre les pages. Le fond gris est le « pasteboard » (zone de dépassement).

The center area with your document pages. Scroll to navigate between pages. The grey background is the "pasteboard" (overflow area).

④ Barre latérale droite

④ Right Sidebar

Propriétés de l'objet sélectionné : position, taille, rotation, couleurs, opacité, typographie.

Properties of the selected object: position, size, rotation, colors, opacity, typography.

Réduire / Agrandir la sidebar

Collapse / Expand the Sidebar

Cliquez sur le logo SUPER PRINT en haut de la barre latérale pour la réduire en mode icônes. Cliquez sur la flèche → pour l'agrandir.

Click the SUPER PRINT logo at the top of the sidebar to collapse it to icon mode. Click the → arrow to expand it.

Pages Pages

Ajouter une page

Add a Page

Cliquez sur Page + dans la toolbar, ou utilisez le raccourci clavier. La nouvelle page est ajoutée après la page courante.

Click Page + in the toolbar, or use the keyboard shortcut. The new page is added after the current page.

Supprimer une page

Delete a Page

Cliquez sur le bouton − à côté de « Page + ». La page courante est supprimée (minimum 1 page conservée).

Click the − button next to "Page +". The current page is deleted (minimum 1 page always kept).

Naviguer entre les pages

Navigate Between Pages

Utilisez les boutons ◀ ▶ dans la toolbar, ou faites simplement défiler verticalement dans la zone de travail pour passer d'une page à l'autre. L'indicateur P 1/5 affiche votre position.

Use the ◀ ▶ buttons in the toolbar, or simply scroll vertically in the work area to move between pages. The P 1/5 indicator shows your position.

Changer le format

Change Page Format

Dans la barre latérale gauche, section Format : cliquez sur A4, A5, Letter ou Perso. Pour des dimensions personnalisées, modifiez L (largeur) et H (hauteur) en mm.

In the left sidebar, Format section: click A4, A5, Letter or Custom. For custom dimensions, edit W (width) and H (height) in mm.

Texte & Typographie Text & Typography

Ajouter un bloc de texte

Add a Text Block

Cliquez sur l'outil Texte (icône T) dans la sidebar, puis cliquez-glissez sur le canvas pour dessiner un cadre. Double-cliquez sur le cadre pour entrer en mode édition.

Click the Text tool (T icon) in the sidebar, then click-drag on the canvas to draw a frame. Double-click the frame to enter editing mode.

Mise en forme du texte

Formatting Text

Sélectionnez un bloc texte puis utilisez les contrôles dans la barre latérale droite :

Select a text block then use the controls in the right sidebar:

Police — Sélecteur de police (Open Sans, Montserrat, Roboto, Lato, Poppins, Playfair Display, Bebas Neue, IBM Plex Mono, Fira Code, Space Mono, Noto Sans JP…)
Font — Font selector (Open Sans, Montserrat, Roboto, Lato, Poppins, Playfair Display, Bebas Neue, IBM Plex Mono, Fira Code, Space Mono, Noto Sans JP…)
Taille — En points (pt)
Size — In points (pt)
Style — Gras, italique, souligné, barré
Style — Bold, italic, underline, strikethrough
Alignement — Gauche, centré, droite, justifié
Alignment — Left, center, right, justified
Interligne — Espacement entre les lignes
Line height — Spacing between lines
Espacement — Espacement entre les lettres (tracking)
Letter spacing — Space between characters (tracking)
Couleur — Couleur du texte et de l'arrière-plan
Color — Text color and background fill

La césure automatique est disponible en 5 langues (FR, EN, DE, ES, IT). Elle s'active dans les paramètres.

Automatic hyphenation is available in 5 languages (FR, EN, DE, ES, IT). Enable it in settings.

Chaînage de texte Text Chaining

Principe

Concept

Le chaînage de texte (mise en page professionnelle) permet de relier plusieurs blocs de texte : quand le texte déborde d'un bloc, il continue automatiquement dans le bloc suivant. Cela fonctionne aussi entre différentes pages.

Professional text chaining links multiple text blocks: when text overflows one block, it automatically continues in the next. This works across different pages too.

Chaîner des blocs

Chain Blocks

Sélectionnez deux ou plusieurs blocs texte, puis cliquez sur l'outil Chaîner (icône chaîne) ou utilisez Ctrl+L. Les blocs sont liés dans l'ordre de sélection. Une flèche bleue relie visuellement les blocs chaînés.

Select two or more text blocks, then click the Chain tool (link icon) or use Ctrl+L. Blocks are linked in selection order. A blue arrow visually connects chained blocks.

Déchaîner

Unchain

Sélectionnez un bloc chaîné et cliquez sur Déchaîner ou utilisez Ctrl+Shift+L.

Select a chained block and click Unchain or use Ctrl+Shift+L.

Images Images

Importer une image

Import an Image

Cliquez sur l'outil Image dans la sidebar (sous-menu import), puis sélectionnez un fichier. Formats supportés : JPG, PNG, WebP, GIF. Vous pouvez aussi glisser-déposer une image directement sur le canvas, ou coller depuis le presse-papiers (Ctrl+V).

Click the Image tool in the sidebar (import sub-menu), then select a file. Supported formats: JPG, PNG, WebP, GIF. You can also drag-and-drop an image directly onto the canvas, or paste from clipboard (Ctrl+V).

Redimensionner & positionner

Resize & Position

Sélectionnez l'image, puis utilisez les poignées pour redimensionner. Maintenez Shift pour conserver les proportions. Utilisez les champs X, Y, W, H dans la barre latérale droite pour un positionnement précis.

Select the image, then use the handles to resize. Hold Shift to maintain proportions. Use the X, Y, W, H fields in the right sidebar for precise positioning.

SVG vectoriel

Vector SVG

Importez des fichiers SVG via l'outil SVG dans le sous-menu import. Les SVG sont importés comme objets vectoriels éditables (couleur, contour, déformation).

Import SVG files through the SVG tool in the import sub-menu. SVGs are imported as editable vector objects (color, stroke, deformation).

Formes & Dessin Shapes & Drawing

Ajouter des formes

Add Shapes

Ouvrez le sous-menu Formes dans la sidebar. Options disponibles :

Open the Shapes sub-menu in the sidebar. Available options:

Rectangle — Forme rectangulaire avec coins optionnellement arrondis
Rectangle — Rectangular shape with optional rounded corners
Cercle — Ellipse parfaite
Circle — Perfect ellipse
Étoile — Étoile polygonale
Star — Polygon star
Forme libre — Tracé à main levée
Freeform — Freehand drawing

Chaque forme peut être colorée (remplissage + contour), redimensionnée et tournée.

Each shape can be colored (fill + stroke), resized and rotated.

Outil Plume (Bézier) Pen Tool (Bézier)

Créer des tracés vectoriels

Create Vector Paths

Cliquez sur l'outil Plume (icône stylo) dans la sidebar. Cliquez pour poser des points d'ancrage. Cliquez-glissez pour créer des courbes de Bézier. Fermez le tracé en cliquant sur le premier point.

Click the Pen tool (pen icon) in the sidebar. Click to place anchor points. Click-drag to create Bézier curves. Close the path by clicking the first point.

Échap pour terminer un tracé ouvert
Escape to end an open path
Ctrl+Z pour annuler le dernier point
Ctrl+Z to undo the last point

Paper.js permet les opérations booléennes (union, soustraction, intersection) entre les tracés — comme le Pathfinder d'Illustrator.

Paper.js enables boolean operations (union, subtraction, intersection) between paths — like Illustrator's Pathfinder.

Calques Layers

Panneau des calques

Layers Panel

Le panneau calques (section « Calques » dans la sidebar) liste tous les objets de la page courante. Chaque objet est un calque qui peut être :

The layers panel ("Layers" section in the sidebar) lists all objects on the current page. Each object is a layer that can be:

Réordonné — Boutons ↑ / ↓ pour monter/descendre
Reordered — ↑ / ↓ buttons to move up/down
Supprimé — Bouton ✕
Deleted — ✕ button
Déplacé vers une autre page — « ◀ Page » / « Page ▶ »
Moved to another page — "◀ Page" / "Page ▶"

« Clear All » supprime tous les objets de la page (sauf la structure).

"Clear All" removes all objects from the page (except structure).

Grilles & Repères Grids & Guides

Grille de colonnes

Column Grid

Ouvrez le sous-menu Règles & Grilles → Grille. Configurez :

Open the Rulers & Grids sub-menu → Grid. Configure:

Colonnes — Nombre de colonnes (1-12)
Columns — Number of columns (1-12)
Gouttière — Espace entre colonnes en mm
Gutter — Space between columns in mm
Lignes — Nombre de rangées
Rows — Number of rows
Ligne de base — Grille typographique (pas et décalage en mm)
Baseline grid — Typographic grid (step and offset in mm)

Activez le magnétisme pour accrocher les objets à la grille.

Enable snapping to snap objects to the grid.

Repères manuels

Manual Guides

Dans la section « Repères manuels » de la sidebar, ajoutez des repères verticaux ou horizontaux. Glissez-les pour les repositionner. Activez le magnétisme des repères pour un alignement précis.

In the "Manual Guides" section of the sidebar, add vertical or horizontal guides. Drag them to reposition. Enable guide snapping for precise alignment.

Pages maîtresses Master Pages

Principe

Concept

Les pages maîtresses sont des modèles réutilisables. Les objets placés sur une page maîtresse (en-têtes, pieds de page, arrière-plans) apparaissent automatiquement sur toutes les pages qui l'utilisent.

Master pages are reusable templates. Objects placed on a master page (headers, footers, backgrounds) automatically appear on all pages that use it.

Créer & Appliquer

Create & Apply

Utilisez le panneau « Chemin de fer » (page thumbnails) pour gérer les pages maîtresses. Cliquez droit sur une page pour assigner une page maîtresse.

Use the "Page Thumbnails" panel to manage master pages. Right-click on a page to assign a master page.

Mode planche (Spread) Spread Mode

Activer le mode planche

Enable Spread Mode

Dans la sidebar, section « Mode d'affichage », cliquez sur Double page. Les pages sont affichées côte à côte comme un livre ouvert. La première page (couverture) reste en page simple.

In the sidebar, "Display Mode" section, click Spread. Pages are displayed side by side like an open book. The first page (cover) stays as a single page.

Le mode planche est idéal pour les brochures et magazines.

Spread mode is ideal for brochures and magazines.

Sauvegarder Save

Sauvegarde automatique

Auto-Save

SuperPrint sauvegarde automatiquement votre travail dans IndexedDB (stockage local du navigateur). Votre projet est restauré automatiquement lorsque vous rouvrez l'application.

SuperPrint automatically saves your work in IndexedDB (browser local storage). Your project is automatically restored when you reopen the app.

Sauvegarde manuelle (.sp)

Manual Save (.sp)

Cliquez sur SAVE dans la toolbar pour créer un fichier .sp — un fichier JSON contenant le projet complet, images et polices embarquées. Ce fichier peut être rechargé plus tard via Import.

Click SAVE in the toolbar to create an .sp file — a JSON file containing the complete project, with images and fonts embedded. This file can be reloaded later via Import.

Historique de sauvegardes

Save History

SuperPrint conserve jusqu'à 20 snapshots de votre projet. Accessible depuis le panneau Historique pour revenir à une version antérieure.

SuperPrint keeps up to 20 snapshots of your project. Access the History panel to roll back to a previous version.

Importer Import

Formats supportés

Supported Formats

Cliquez sur IMPORT dans la toolbar. Formats acceptés :

Click IMPORT in the toolbar. Accepted formats:

Format	Description	Description
PDF	Import page par page (rastérisé via PDF.js)	Page-by-page import (rasterized via PDF.js)
DOCX	Conversion du contenu texte via Mammoth.js	Text content conversion via Mammoth.js
IDML	Format d'échange PAO (texte + structure)	DTP interchange format (text + structure)
ODT	Format LibreOffice Writer	LibreOffice Writer format
.sla	Texte + formes basiques (BETA)	Basic text + shapes (BETA)
SVG	Graphiques vectoriels	Vector graphics
Images	PNG, JPG, WebP (fichier ou presse-papiers)	PNG, JPG, WebP (file or clipboard)
.sp	Projet SuperPrint (JSON)	SuperPrint project (JSON)
TXT / RTF	Texte brut ou enrichi	Plain or rich text
JSON	Données Fabric.js brutes	Raw Fabric.js data

Exporter / PDF Export / PDF

Export PDF

PDF Export

Cliquez sur Export dans la toolbar. Options :

Click Export in the toolbar. Options:

Résolution — 72 DPI (écran), 150 DPI (brouillon), 300 DPI (impression)
Resolution — 72 DPI (screen), 150 DPI (draft), 300 DPI (print)
Fond perdu — Zone de sécurité pour la coupe (3mm typique)
Bleed — Safety zone for trimming (typical 3mm)
Repères d'impression — Traits de coupe, croix de repérage
Trim marks — Cut marks, registration marks
PDF imposé — Imposition en cahier pour impression recto-verso
Imposed PDF — Booklet imposition for duplex printing

Géométrie des traits de coupe

Crop marks geometry

Quand l'option Traits de coupe est cochée, SuperPrint réserve une marge technique de 10 mm de chaque côté autour de la zone de fond perdu :

When the Crop marks option is enabled, SuperPrint reserves a 10 mm technical margin on each side around the bleed area:

Le format du PDF augmente de +20 mm en largeur et +20 mm en hauteur — ex. A4 sans fond perdu 210 × 297 mm ; avec 3 mm de fond perdu 216 × 303 mm ; avec traits de coupe 236 × 323 mm.
The PDF size increases by +20 mm width and +20 mm height — e.g. A4 without bleed 210 × 297 mm; with 3 mm bleed 216 × 303 mm; with crop marks 236 × 323 mm.
Les traits commencent à 2,5 mm du format fini (le trait de coupe) et mesurent 5 mm. Ces valeurs sont identiques dans tous les modes d'export : pages simples, doubles pages (spreads), planches imposées et format fini PDF/X.
Marks start 2.5 mm from the finished size (the trim line) and are 5 mm long. These values are identical in every export mode: single pages, spreads, imposed sheets and PDF/X finished format.
Le contenu se retrouve donc décalé de 10 mm à l'intérieur de la page PDF. C'est normal : le contenu ne bouge pas par rapport aux traits. Ce sont les repères qui font foi pour le façonnage, jamais le bord de la page PDF.
Content therefore appears shifted by 10 mm inside the PDF page. This is normal: content never moves relative to the marks. Only the marks are authoritative for finishing, never the PDF page edge.
Sans traits de coupe, la page PDF vaut exactement la zone de fond perdu (ex. 216 × 303 mm) et le contenu reste où il est : la seule différence entre un export avec et sans traits est cette marge technique.
Without crop marks, the PDF page is exactly the bleed area (e.g. 216 × 303 mm) and content stays where it is: the only difference between an export with and without marks is this technical margin.
Le repérage entre le raster (image de la page) et les tracés vectoriels (traits de coupe, typographie vectorielle) est exact au pixel : aucune surcote d'alignement n'est appliquée.
Registration between the raster (page image) and vector artwork (crop marks, vector typography) is pixel-exact: no alignment overscan is applied.

Export CMJN + tons directs (Pantone)

CMYK + spot colors (Pantone) export

Dès qu'un ton direct du nuancier Pantone est appliqué à un objet du document, la boîte d'export bascule automatiquement en mode « CMJN + Pantone », comme dans InDesign :

As soon as a Pantone spot color from the swatch library is applied to an object, the export dialog switches automatically to “CMYK + Pantone” mode, as in InDesign:

Résolution verrouillée à 300 DPI — les autres qualités (72 / 200 / 600 DPI) sont retirées
Resolution locked to 300 DPI — the other qualities (72 / 200 / 600 DPI) are removed
Mode couleur CMJN imposé — RVB et Noir & Blanc ne sont plus proposés
CMYK color mode enforced — RGB and Black & White are no longer offered
Une couche chromatique par Pantone — 1 Pantone = CMJN (4 canaux) + 1 canal ; 2 Pantones = CMJN + 2 canaux. Chaque canal est un espace Separation nommé d'après le Pantone (ex. PANTONE 214 C), donc séparable par le RIP / l'imprimeur.
One color channel per Pantone — 1 Pantone = CMYK (4 channels) + 1 channel; 2 Pantones = CMYK + 2 channels. Each channel is a Separation color space named after the Pantone (e.g. PANTONE 214 C), so the RIP / printer can separate it.
Fonds perdus toujours inclus et typographie vectorielle forcée (indispensable : un texte rasterisé ne peut pas être peint lettre à lettre dans la couche d'encre)
Bleed always included and vector typography forced (required: rasterized text cannot be painted letter by letter into the ink channel)
Repères colorimétriques étendus — patchs quadri + un patch par encre directe
Extended color bars — process patches + one patch per spot ink
Sans aucun Pantone dans le document, la boîte d'export classique reste strictement inchangée (RVB / CMJN / N&B, toutes qualités).
With no Pantone in the document, the classic export dialog stays strictly unchanged (RGB / CMYK / B&W, all qualities).

Autres exports

Other Exports

Print-to-Web (D4Export) — Génère un mini-site HTML dans un ZIP pour diffusion numérique
Print-to-Web (D4Export) — Generates an HTML mini-site in a ZIP for digital distribution
.sp — Projet complet en JSON (images et polices embarquées)
.sp — Complete project as JSON (images and fonts embedded)

Simulation CMYK CMYK Simulation

Soft Proofing

Outil Simulation CMYK dans la sidebar (icône cercles CMYK). Prévisualisez comment votre document apparaîtra à l'impression :

Use the CMYK Simulation tool in the sidebar (CMYK circles icon). Preview how your document will look when printed:

RGB — Affichage écran normal
RGB — Normal screen display
CMYK Couché — Simulation papier couché brillant
CMYK Coated — Glossy coated paper simulation
CMYK Mat — Simulation papier non couché
CMYK Uncoated — Matte uncoated paper simulation

Vous pouvez aussi simuler différents types de papier : blanc pur, ivoire, recyclé, journal.

You can also simulate different paper types: pure white, ivory, recycled, newsprint.

Annuler / Rétablir Undo / Redo

Historique des actions

Action History

Utilisez Ctrl+Z pour annuler et Ctrl+Y (ou Ctrl+Shift+Z) pour rétablir. Les boutons ↶ et ↷ dans la toolbar ont la même fonction.

Use Ctrl+Z to undo and Ctrl+Y (or Ctrl+Shift+Z) to redo. The ↶ and ↷ buttons in the toolbar have the same function.

L'historique est persisté dans IndexedDB : même après rechargement de la page, votre pile d'annulations est conservée.

The history is persisted in IndexedDB: even after reloading the page, your undo stack is preserved.

Zoom

Contrôles de zoom

Zoom Controls

Ctrl+Molette — Zoom avant/arrière libre
Ctrl+Scroll — Free zoom in/out
Ctrl+0 — Réinitialiser le zoom à 100 %
Ctrl+0 — Reset zoom to 100%
Ctrl+= / Ctrl+- — Zoom incrémental
Ctrl+= / Ctrl+- — Incremental zoom

Le rendu est optimisé pour rester net à tous les niveaux de zoom grâce à l'ajustement dynamique du DPR (Device Pixel Ratio).

Rendering is optimized to stay sharp at all zoom levels thanks to dynamic DPR (Device Pixel Ratio) adjustment.

Raccourcis clavier Keyboard Shortcuts

Action	Action	Raccourci
Annuler	Undo	`Ctrl`+`Z`
Rétablir	Redo	`Ctrl`+`Y`
Copier	Copy	`Ctrl`+`C`
Coller	Paste	`Ctrl`+`V`
Couper	Cut	`Ctrl`+`X`
Tout sélectionner	Select all	`Ctrl`+`A`
Tabulation : insère une tabulation dans le bloc en édition (les taquets sont activés au besoin, pas par défaut 10 mm)	Tab: inserts a tab in the block being edited (tab stops enabled if needed — default step 10 mm)	`Tab`
Tab intégré : navigation vers le champ / contrôle suivant (natif).	Built-in Tab: move to the next field / control (native).	`Option` + `Tab` `Maj` + `Tab`
Dupliquer (glisser)	Duplicate (drag)	`Alt`+Glisser
Supprimer	Delete	`Suppr` / `Backspace`
Grouper	Group	`Ctrl`+`Shift`+`G`
Dégrouper	Ungroup	`Ctrl`+`Shift`+`U`
Chaîner texte	Chain text	`Ctrl`+`L`
Déchaîner texte	Unchain text	`Ctrl`+`Shift`+`L`
Sauvegarder	Save	`Ctrl`+`S`
Zoom +	Zoom in	`Ctrl`+`=`
Zoom −	Zoom out	`Ctrl`+`-`
Zoom 100%	Zoom 100%	`Ctrl`+`0`
Gras	Bold	`Ctrl`+`B`
Italique	Italic	`Ctrl`+`I`
Souligné	Underline	`Ctrl`+`U`
Ajouter un texte	Add text	`⌥`+`T`
Ajouter une image	Add image	`⌥`+`I`
Ajouter un rectangle	Add rectangle	`⌥`+`R`
Ajouter un cercle	Add circle	`⌥`+`C`
Outil plume	Pen tool	`⌥`+`P`

Paramètres Settings

Accéder aux paramètres

Access Settings

Cliquez sur l'icône ⚙ en haut de la barre latérale. Options disponibles :

Click the ⚙ icon at the top of the sidebar. Available options:

Thème — Clair / Sombre
Theme — Light / Dark
Langue — Français, English, 日本語
Language — Français, English, 日本語
Césure — Activer/désactiver la césure automatique
Hyphenation — Enable/disable automatic hyphenation
Raccourcis clavier — Liste complète des raccourcis
Keyboard shortcuts — Complete shortcut list
Table de montage (Pasteboard) — Zone de travail étendue autour des pages
Pasteboard — Extended work area around pages
Caractères invisibles — Afficher/masquer les espaces, insécables et retours de ligne
Invisible characters — Show/hide spaces, non-breaking spaces and line breaks
Couleurs CMYK — Activer le sélecteur CMYK, tons directs Pantone et simulation d'épreuve
CMYK Colors — Enable CMYK picker, Pantone spot colors and proof simulation
Ctrl+S — Choisir le mode de sauvegarde : Navigateur (IndexedDB), .sp, JSON local, Web3 IPFS
Ctrl+S — Choose save mode: Browser (IndexedDB), .sp, local JSON, Web3 IPFS
⚡ Accélération GPU — Activer l'accélération matérielle (voir section dédiée ci-dessous)
⚡ GPU Acceleration — Enable hardware acceleration (see dedicated section below)

⚡ Accélération GPU ⚡ GPU Acceleration

Principe

How it works

SuperPrint peut déléguer le rendu des pages à la carte graphique (GPU) de l'ordinateur pour accélérer sensiblement l'affichage — en particulier sur des documents multi-pages avec de nombreuses images et formes complexes.

SuperPrint can delegate page rendering to the computer's GPU to significantly accelerate display — especially on multi-page documents with many images and complex shapes.

Détection automatique de la carte graphique

Automatic graphics card detection

À l'ouverture du panneau Réglages ⚙ (ou lors de l'écran de bienvenue au premier lancement), SuperPrint interroge WebGL via l'extension WEBGL_debug_renderer_info et affiche le nom exact du GPU détecté — par exemple NVIDIA GeForce RTX 4090, Apple M3 GPU ou Intel Iris Xe Graphics. Si le GPU n'est pas accessible (WebGL désactivé ou non disponible), un message ✗ s'affiche et l'option reste sans effet.

When opening the Settings panel ⚙ (or during the first-launch welcome wizard), SuperPrint queries WebGL via the WEBGL_debug_renderer_info extension and displays the exact detected GPU name — e.g. NVIDIA GeForce RTX 4090, Apple M3 GPU or Intel Iris Xe Graphics. If the GPU is not accessible (WebGL disabled or unavailable) a ✗ message appears and the option has no effect.

La détection n'est effectuée qu'au moment de l'ouverture du panneau Réglages ou de l'écran de bienvenue, pas en continu.

Detection only happens when the Settings panel or welcome wizard is opened, not continuously.

Activer / désactiver

Enable / disable

Dans Réglages ⚙ → section Accélération GPU : cochez la case pour activer, décochez pour désactiver. Le réglage est appliqué immédiatement (sans rechargement de page) et persisté dans localStorage sous la clé sp_gpu_enabled. Il est restauré automatiquement à chaque lancement.

In Settings ⚙ → GPU Acceleration section: check the box to enable, uncheck to disable. The setting is applied immediately (no page reload) and persisted in localStorage under key sp_gpu_enabled. It is automatically restored on every launch.

Ce que l'accélération GPU fait concrètement

What GPU acceleration actually does

Promotion en couche composite GPU — les conteneurs canvas Fabric.js (.canvas-container, .lower-canvas, .upper-canvas, #canvasScrollArea, .canvas-wrapper) reçoivent will-change: transform + transform: translateZ(0) + backface-visibility: hidden : le navigateur les délègue au compositeur de la carte graphique, libérant le fil principal CPU.
GPU compositor layer promotion — Fabric.js canvas containers (.canvas-container, .lower-canvas, .upper-canvas, #canvasScrollArea, .canvas-wrapper) receive will-change: transform + transform: translateZ(0) + backface-visibility: hidden: the browser delegates them to the GPU compositor, freeing the main CPU thread.
Cache objet Fabric.js — objectCaching = true activé sur formes (Rect, Circle, Ellipse), images (Image), chemins (Path) et groupes (Group) : chaque objet est bitmapé en mémoire et n'est repaint sur le GPU que s'il est modifié. Le texte (Text, Textbox) conserve toujours objectCaching = false pour un rendu typographique net à tous les niveaux de zoom.
Fabric.js object cache — objectCaching = true enabled on shapes (Rect, Circle, Ellipse), images (Image), paths (Path) and groups (Group): each object is bitmapped in memory and only repainted to the GPU when modified. Text (Text, Textbox) always keeps objectCaching = false for sharp typographic rendering at all zoom levels.
Re-rendu immédiat — requestRenderAll() est appelé sur tous les canvas actifs lors du basculement.
Immediate re-render — requestRenderAll() is called on all active canvases when toggling.

Les gains sont les plus visibles sur les documents comportant beaucoup d'images, de formes complexes ou lors du scroll entre les pages.

Gains are most visible on documents with many images, complex shapes, or when scrolling between pages.

Écran de bienvenue — onboarding (premier lancement)

Welcome wizard — onboarding (first launch)

Au tout premier lancement de SuperPrint (et uniquement ce premier lancement), un wizard en 4 étapes apparaît après le splash d'intro :

On the very first launch of SuperPrint (and only the first launch), a 4-step wizard appears after the intro splash:

Étape 1 — Message de bienvenue et présentation de l'application
Step 1 — Welcome message and application overview
Étape 2 — Présentation des 5 modes de sauvegarde (auto IndexedDB 12 s, Ctrl+S, .sp, JSON, PDF)
Step 2 — 5 save modes overview (auto IndexedDB every 12 s, Ctrl+S, .sp, JSON, PDF)
Étape 3 — Détection GPU en direct + case d'activation. La case prend effet immédiatement, sans attendre « Commencer »
Step 3 — Live GPU detection + activation checkbox. The toggle takes effect immediately, without waiting for "Start"
Étape 4 — Récapitulatif des raccourcis essentiels
Step 4 — Essential shortcuts summary

Le wizard ne s'affiche plus une fois terminé ou passé (localStorage clé sp_onboarding_done = 1).

The wizard no longer appears once completed or skipped (localStorage key sp_onboarding_done = 1).

Pour revoir l'onboarding en développement : tapez localStorage.removeItem('sp_onboarding_done') dans la console, puis rechargez la page.

To re-show the onboarding during development: type localStorage.removeItem('sp_onboarding_done') in the console, then reload the page.

dev tool — console de script & API dev tool — script console & API

C'est quoi ?

What is it?

Le dev tool est la console de script de SuperPrint : on y écrit du JavaScript qui pilote le document ouvert — ajouter des objets, poser une grille, numéroter les pages, inspecter un montage. C'est aussi la référence de l'API publique, avec les signatures et les options de chaque fonction.

The dev tool is SuperPrint's script console: you write JavaScript that drives the open document — add objects, lay out a grid, number pages, inspect a layout. It is also the reference for the public API, with each function's signature and options.

Rien à installer, rien à compiler : le script s'exécute dans la page, sur le document en cours.

Nothing to install, nothing to compile: the script runs in the page, against the current document.

Ouvrir le panneau

Opening the panel

Bouton « dev tool » — tout en bas de la barre latérale de droite.
“dev tool” button — at the very bottom of the right sidebar.
Touche F12 — ouvre le panneau depuis n'importe où dans l'application.
F12 key — opens the panel from anywhere in the application.
Échap — ferme le panneau.
Escape — closes the panel.

Trois onglets

Three tabs

Onglet	Tab	Ce qu'on y trouve	What it holds
Exemples	Six scripts prêts à l'emploi, avec un champ de filtre. Chacun s'exécute directement ou s'ouvre dans l'éditeur pour être adapté.	Six ready-made scripts, with a filter field. Each one runs directly or opens in the editor to be adapted.
Éditeur	Editor	Votre script, la console de sortie et l'aide-mémoire du bac à sable. `Ctrl` + `Entrée` exécute ; le script est mémorisé d'une session à l'autre.	Your script, the output console and the sandbox cheat-sheet. `Ctrl` + `Enter` runs it; the script is remembered between sessions.
Référence	Reference	Toutes les fonctions de l'API, groupées (Document, Objets, IA, Bac à sable) et filtrables.	Every API function, grouped (Document, Objects, AI, Sandbox) and filterable.

Le bac à sable : ce qui est disponible dans un script

The sandbox: what a script can use

Nom	Name	À quoi ça sert
`SuperPrint`	L'API publique : `addText`, `addRect`, `addCircle`, `addEllipse`, `addImage`, `getPages`, `setPage`, `exportPDF`, `saveProject`, `loadProject`, `aiGenerate`.	The public API: `addText`, `addRect`, `addCircle`, `addEllipse`, `addImage`, `getPages`, `setPage`, `exportPDF`, `saveProject`, `loadProject`, `aiGenerate`.
`canvas`	Le canvas Fabric.js de la page active : `getObjects()`, `add()`, `remove()`, `requestRenderAll()`…	The Fabric.js canvas of the active page: `getObjects()`, `add()`, `remove()`, `requestRenderAll()`…
`log()`	Écrit une ligne horodatée dans la console du panneau. `console.log` est également capturé.	Writes a timestamped line to the panel console. `console.log` is captured too.
`mm()` / `px()`	Conversion millimètres ↔ pixels. Le document travaille à 72 dpi : `pixels = millimètres × 72 ÷ 25,4`.	Millimetre ↔ pixel conversion. The document works at 72 dpi: `pixels = millimetres × 72 ÷ 25.4`.
`save()`	Force une entrée d'historique nommée (l'annulation redevient possible en un geste).	Forces a named history entry (so undo stays one keystroke away).
`getActiveCanvas()` `spToast()` `fabric`	Les fonctions globales de l'application, la notification discrète et la bibliothèque, pour fabriquer ce que l'API ne couvre pas.	The application's global helpers, the small notification, and the library itself, for anything the API does not cover.

Le script est enveloppé dans une fonction async : await est disponible, et la valeur retournée par un return s'affiche dans la console, suivie de la durée d'exécution.

The script is wrapped in an async function: await is available, and a return value is printed in the console, followed by the execution time.

Les six exemples fournis

The six built-in examples

Exemple	Example	Ce qu'il fait	What it does	Effet	Effect
Inventaire du document	Document inventory	Liste les objets de la page active : type, position et taille en millimètres, fond et trait.	Lists the objects of the active page: type, position and size in millimetres, fill and stroke.	Lecture seule	Read-only
Grille de 12 colonnes	12-column grid	Pose une grille typographique (marges, gouttières) calculée sur la taille réelle de la page.	Lays out a typographic grid (margins, gutters) computed from the real page size.	Modifie la page	Changes the page
Nuancier imprimé	Printed swatch strip	Six pastilles alignées en bas de page, chacune suivie de son code hexadécimal.	Six swatches aligned at the bottom of the page, each one followed by its hex code.	Modifie la page	Changes the page
Bloc éditorial	Editorial block	Surtitre, titre sur deux lignes, filet de séparation et chapô : un gabarit de début de page.	Kicker, two-line headline, rule and standfirst: a page-opening template.	Modifie la page	Changes the page
Pied de page sur toutes les pages	Footer on every page	Parcourt le document, pose un bandeau noir et la mention « Page n / total », puis revient en page 1.	Walks the document, adds a black band and “Page n / total”, then returns to page 1.	Modifie la page	Changes the page
Contrôle des débords	Overflow check	Signale les objets qui sortent de la page finie, avec la mesure du dépassement (tolérance 0,5 mm).	Reports objects running off the trimmed page, with the overflow measurement (0.5 mm tolerance).	Lecture seule	Read-only

Les repères de marge, de fond perdu et de fond de page ne sont jamais comptés par les exemples : ni dans l'inventaire, ni dans le contrôle des débords.

Margin, bleed and page-background guides are never counted by the examples: neither in the inventory nor in the overflow check.

Exemple de script commenté

An annotated script

Un filet de 0,6 mm sous un titre, avec la largeur utile calculée sur la page — la façon la plus courte de voir comment tout s'enchaîne :

A 0.6 mm rule under a headline, with the usable width computed from the page — the shortest way to see how everything connects:

// Tout est en millimètres, la page fait 210 × 297 (A4).
const c = getActiveCanvas();
const marge = 20;
const largeur = px(c.width) - 2 * marge;   // px() renvoie des mm

SuperPrint.addText(marge, marge, 'TITRE', { fontSize: 28, fontWeight: 'bold', width: largeur });
SuperPrint.addRect(marge, marge + 14, largeur, 0.6, { fill: '#111111', strokeWidth: 0 });

log('Filet posé sur ' + Math.round(largeur) + ' mm de large');

Précautions

Caveats

Un script agit sur le document : faites-le tourner sur un document de test la première fois, et gardez Ctrl + Z à portée de main.
A script acts on the document: run it on a test document the first time, and keep Ctrl + Z within reach.
Un script extérieur a les mêmes droits que l'application : n'exécutez que des scripts dont vous connaissez la provenance.
An outside script has the same rights as the application: only run scripts whose origin you trust.
Les erreurs s'affichent en rouge dans la console du panneau — le message suffit neuf fois sur dix pour corriger la ligne fautive.
Errors appear in red in the panel console — nine times out of ten the message is enough to fix the offending line.
Le script et le dernier onglet ouvert sont conservés (clés sp_devtool_code et sp_devtool_tab) ; la console, elle, repart vide à chaque ouverture de l'application.
The script and the last open tab are kept (keys sp_devtool_code and sp_devtool_tab); the console itself starts empty on each application launch.

Studio SP213 — maquettes par IA SP213 Studio — AI-generated layouts

C'est quoi ?

What is it?

Le studio SP213 est l'assistant de mise en page par IA de SuperPrint : vous décrivez la maquette en langage naturel (par texte ou par voix), et il génère un document complet — affiche, flyer, brochure, catalogue, magazine, rapport… — que vous pouvez ensuite ouvrir et retravailler dans l'éditeur SuperPrint.

SP213 Studio is SuperPrint's AI layout assistant: describe the layout in natural language (by text or by voice), and it generates a complete document — poster, flyer, brochure, catalog, magazine, report… — that you can then open and refine in the SuperPrint editor.

Moteurs d'exécution

Execution engines

DeepSeek (moteur par défaut) — DeepSeek V4 Flash (recommandé, rapide/économique), V4 Pro (puissant), V4 Flash Vision (images), V3.2 chat / R1 en repli. Excellent en raisonnement et JSON structuré. Clé sk-… sur platform.deepseek.com.
DeepSeek (default engine) — DeepSeek V4 Flash (recommended, fast/cheap), V4 Pro (powerful), V4 Flash Vision (images), V3.2 chat / R1 fallback. Excellent at reasoning and structured JSON. Key sk-… at platform.deepseek.com.
OpenRouter (100% gratuit) — modèles :free vérifiés (Nemotron 3 Super 120B ⭐, MiniMax M2.7, Gemma 4 26B, Nemotron 3 Ultra 550B, Inkling 975B). Clé sk-or-… sur openrouter.ai.
OpenRouter (100% free) — verified :free models (Nemotron 3 Super 120B ⭐, MiniMax M2.7, Gemma 4 26B, Nemotron 3 Ultra 550B, Inkling 975B). Key sk-or-… on openrouter.ai.
Groq (cloud, rapide) — inférence ultra-rapide (Qwen 3.8 27B recommandé, Qwen 3.6 27B, GPT-OSS 120B/20B, Groq Compound). Plafond 8 192 tokens en sortie. Clé gsk_… sur console.groq.com.
Groq (cloud, fast) — ultra-fast inference (Qwen 3.8 27B recommended, Qwen 3.6 27B, GPT-OSS 120B/20B, Groq Compound). 8 192 output token cap. Key gsk_… on console.groq.com.
SP213 WLLM (local) — modèle WebLLM exécuté dans votre navigateur via WebGPU : Qwen2.5 1.5B (recommandé, environ 1,63 Go de VRAM estimée), SmolLM2 1.7B, Llama 3.2 1B, Qwen2.5 0.5B et SmolLM2 360M. La VRAM estimée n'est pas la taille du téléchargement et la disponibilité dépend du matériel. Le prompt est traité localement; le téléchargement initial du modèle nécessite Internet.
SP213 WLLM (local) — WebLLM model running in your browser via WebGPU: Qwen2.5 1.5B (recommended, about 1.63 GB estimated VRAM), SmolLM2 1.7B, Llama 3.2 1B, Qwen2.5 0.5B and SmolLM2 360M. Estimated VRAM is not download size and availability depends on hardware. Prompts are processed locally; the initial model download requires internet access.

💡 Les moteurs DeepSeek, OpenRouter et Groq sont alignés entre le studio SP213 et l'app SuperPrint (mêmes modèles, mêmes clés partagées via localStorage). Une clé saisie dans un outil est réutilisée dans l'autre.

💡 DeepSeek, OpenRouter and Groq engines are aligned between the SP213 studio and the SuperPrint app (same models, shared keys via localStorage). A key entered in one tool is reused in the other.

Boîte de prompt

Prompt box

Pièce jointe (trombone) — joignez des images (jpg, png, webp…), du texte (.txt, .md…) ou des documents Word (.docx). SP213 les analyse et les intègre dans la maquette.
Attachment (paperclip) — attach images (jpg, png, webp…), text (.txt, .md…) or Word documents (.docx). SP213 analyzes them and integrates them into the layout.
Prompt vocal (micro) — dictez votre description à voix haute (Web Speech API, Chrome/Edge). La transcription s'insère dans la zone de saisie.
Voice prompt (microphone) — dictate your description out loud (Web Speech API, Chrome/Edge). The transcription is inserted into the input box.
Inviter (envoyer) — génère ou met à jour la maquette. Vous pouvez ensuite demander des ajustements dans la même conversation.
Send — generates or updates the layout. You can then request adjustments in the same conversation.

Conversations multiples

Multiple conversations

Les conversations sont organisées en onglets (bouton + pour créer, double-clic pour renommer, ✕ pour supprimer). Chaque conversation a sa propre maquette et son historique, sauvegardés automatiquement dans le navigateur.

Conversations are organized in tabs (+ button to create, double-click to rename, ✕ to delete). Each conversation has its own layout and history, auto-saved in the browser.

Ouvrir dans SuperPrint

Open in SuperPrint

Le bouton Ouvrir dans SuperPrint (en bas de l'aperçu) transfère la maquette vers l'éditeur complet : elle est écrite dans localStorage puis SuperPrint s'ouvre avec ?from=sp213 et la charge automatiquement. Vous pouvez aussi Exporter .sp et l'importer plus tard via Importer → Charger JSON / .sp.

The Open in SuperPrint button (bottom of the preview) transfers the layout to the full editor: it is written to localStorage then SuperPrint opens with ?from=sp213 and loads it automatically. You can also Export .sp and import it later via Import → Load JSON / .sp.

Retravailler une zone ciblée (sélection)

Refine a targeted area (selection)

Une fois une maquette générée, vous pouvez demander à l'IA de retravailler uniquement certains éléments plutôt que de tout régénérer :

Once a layout is generated, you can ask the AI to refine only specific elements instead of regenerating everything:

Dans l'aperçu (colonne de gauche), cliquez sur un élément (titre, image, bloc de texte…) ou glissez pour en sélectionner plusieurs (encadré vert).
In the preview (left column), click an element (title, image, text block…) or drag to select several (green frame).
Un bandeau vert apparaît : « N élément(s) sélectionné(s) — le prochain prompt ne retravaillera que ceux-ci ».
A green banner appears: "N element(s) selected — the next prompt will only refine these."
Tapez ensuite votre demande (ex. « agrandis le titre », « passe ce bloc en bleu ») : l'IA modifie uniquement les éléments sélectionnés et conserve tout le reste du document strictement identique.
Then type your request (e.g. "enlarge the title", "make this block blue"): the AI modifies only the selected elements and keeps the rest of the document strictly unchanged.
Pour désélectionner : cliquez sur Effacer dans le bandeau, ou cliquez sur un fond vide de la page. Si rien n'est sélectionné, le prochain prompt régénère une maquette complète (comportement par défaut).
To deselect: click Clear in the banner, or click on an empty area of the page. If nothing is selected, the next prompt regenerates a full layout (default behavior).

Assistant IA AI Assistant

Utiliser l'IA

Using AI

Cliquez sur le bouton IA dans la toolbar pour ouvrir l'assistant IA. Il peut vous aider à générer du contenu texte, suggérer des mises en page, et plus encore. Les requêtes passent par le proxy serveur (ai-proxy.php) pour sécuriser les clés API.

Click the AI button in the toolbar to open the AI assistant. It can help generate text content, suggest layouts, and more. Requests go through the server proxy (ai-proxy.php) to secure API keys.

SuperPrint — simon@2points13.fr
Manuel mis à jour le 4 octobre 2026 — v1.7.687 Manual updated September 16, 2026 — v1.7.456

SuperPrint Application web professionnelle de PAO (Publication Assistée par Ordinateur) Professional web-based Desktop Publishing (DTP) application

Architecture

Architecture

Structure des fichiers

File Structure

Stack technique

Technical Stack

Partie 1 — Catalogue des fonctions 475+

Part 1 — Function Catalog 475+

3.1 Gestion des pages 3.1 Page Management 16

3.2 Canvas / Fabric.js Core 3.2 Canvas / Fabric.js Core 25

3.3 Zoom 6

3.4 Historique / Undo-Redo 3.4 History / Undo-Redo 11

3.5 Texte / Typographie 3.5 Text / Typography 48

3.6 Système de chaînage de texte 3.6 Text Chaining System 60+

3.7 Import / Export 3.7 Import / Export 35

3.8 Interface / Panneaux 3.8 UI / Panels 35

3.9 Pages maîtresses 3.9 Master Pages 3

3.10 Mode planche (Spread) 3.10 Spread Mode 22

3.11 Outils (Dessin, Formes, Images, Masques, Recadrage, Booléens) 3.11 Tools (Drawing, Shapes, Images, Masks, Crop, Booleans) 80+

Dessin & Outil plume

Drawing & Pen Tool

Formes

Shapes

Images & Masquage

Images & Masking

Opérations booléennes (Pathfinder)

Boolean Operations (Pathfinder)

Épreuvage écran (Soft Proofing)

Soft Proofing

3.12 Sélection / Alignement 3.12 Selection / Alignment 8

3.13 i18n / Localization 5

3.14 IndexedDB / Stockage 3.14 IndexedDB / Storage 21

3.15 Nouveau projet 3.15 New Project 12

3.16 Performance / Cleanup 11

3.17 Utilitaires 3.17 Utilities 27

3.18 Grilles / Repères 3.18 Grids / Guides 9

3.19 Caractères spéciaux / Glyphes 3.19 Special Characters / Glyphs 8

3.21 Mobile Helpers 12

3.22 ⚡ GPU Acceleration 3

Partie 2 — Patches Fabric.js Part 2 — Fabric.js Prototype Patches 19

Variables globales & Constantes Global Variables & Constants

État du document (Lignes 664–740)

Document State (Lines 664–740)

Constantes

Constants

Fonctionnalités Features

📄 Document

🔤 Typographie

✏️ Dessin

🖼️ Images

🎨 Couleur

📤 Export / Import

🤖 IA & Moderne

Plug-ins — en créer un Plug-ins — write one

Deux surfaces : la bibliothèque et la trappe

Two surfaces: the library and the trap

Activer, désactiver, désinstaller

Enable, disable, uninstall

Installer, c'est déposer un fichier

Installing means dropping a file

Un plug-in peut apporter sa propre trappe

A plug-in can bring its own trap

La forme d'un plug-in

The shape of a plug-in

Écrire un plug-in en trois langues

Writing a plug-in in three languages

L'icône de la barre du haut

The top-bar icon

Types de réglage

Setting types

Afficher un grand aperçu

Showing a large preview

Mixer plusieurs images

Mixing several images

L'API hôte

The host API

L'aperçu en direct, et pourquoi run() est appelé plusieurs fois

Live preview, and why run() is called several times

Un plug-in complet, à copier dans un fichier

L'aperçu en direct, et pourquoi `run()` est appelé plusieurs fois

Live preview, and why `run()` is called several times