Démarrage

À l'ouverture, l'éditeur affiche un premier document blanc (document_1) au centre de la surface sombre. Le menu est en haut, le panneau Propriétés à droite et la barre d'état en bas (document, calque, taille, outil, zoom, sélection, langue).

1. Choisissez un outil dans le menu Outils (ou une touche, voir Raccourcis).
2. Faites glisser sur la surface pour dessiner.
3. Sélectionnez avec l'outil Sélection (S), puis modifiez l'élément dans le panneau Propriétés.
4. Votre travail est sauvegardé automatiquement dans le navigateur.

Getting started

On opening, the editor shows a first white document (document_1) in the middle of the dark surface. The menu is at the top, the Properties panel on the right and the status bar at the bottom (document, layer, size, tool, zoom, selection, language).

1. Pick a tool in the Tools menu (or press its key, see Shortcuts).
2. Drag on the surface to draw.
3. Select with the Selection tool (S), then edit the element in the Properties panel.
4. Your work is saved automatically in the browser.

Aan de slag

Bij het openen toont de editor een eerste wit document (document_1) midden op het donkere werkblad. Het menu staat bovenaan, het paneel Eigenschappen rechts en de statusbalk onderaan (document, laag, grootte, gereedschap, zoom, selectie, taal).

1. Kies een gereedschap in het menu Gereedschap (of druk op de toets, zie Sneltoetsen).
2. Sleep over het werkblad om te tekenen.
3. Selecteer met het gereedschap Selectie (S) en pas het element aan in het paneel Eigenschappen.
4. Je werk wordt automatisch in de browser bewaard.

L'interface

Menu	Contenu
Fichier	Nouveau, ouvrir, enregistrer, ajouter un document, nouvelle page web, importer, exporter (PNG, SVG, HTML, CSS, XML...)
Édition	Annuler / rétablir, copier / coller, dupliquer, supprimer, ordre (premier plan, arrière-plan), groupes, clip et masque
Afficher	Couleurs, fenêtre des propriétés, règles, grille de colonnes, accrochage, zoom
Outils	Sélection, ligne, rectangle, cercle, bézier, plume, arc, courbe, étoile, texte, hotspot, pipette...
Options	Paramètres : thème, langue, raccourcis, plugins
Fenêtre	Calques, propriétés
Document	Nouveau, supprimer, lier à..., supprimer les liens, présenter
Calque	Ajouter, supprimer, visibilité, fusion et opacité
Aide	À propos, Wiki (cette page)

Sur un petit écran, le menu devient un tiroir (icône hamburger). Les entrées affichent leur raccourci clavier.

The interface

Menu	Content
File	New, open, save, add a document, new web page, import, export (PNG, SVG, HTML, CSS, XML...)
Edit	Undo / redo, copy / paste, duplicate, delete, order (bring to front, send to back), groups, clip and mask
View	Colors, properties window, rulers, column grid, snapping, zoom
Tools	Selection, line, rectangle, circle, bezier, plume, arc, curve, star, text, hotspot, eyedropper...
Options	Settings: theme, language, shortcuts, plugins
Window	Layers, properties
Document	New, delete, link to..., remove links, present
Layer	Add, delete, visibility, blending and opacity
Help	About, Wiki (this page)

On a small screen the menu becomes a drawer (hamburger icon). Entries show their keyboard shortcut.

De interface

Menu	Inhoud
Bestand	Nieuw, openen, opslaan, document toevoegen, nieuwe webpagina, importeren, exporteren (PNG, SVG, HTML, CSS, XML...)
Bewerken	Ongedaan maken / opnieuw, kopiëren / plakken, dupliceren, verwijderen, volgorde (naar voren, naar achteren), groepen, clip en masker
Weergave	Kleuren, eigenschappenvenster, linialen, kolomraster, magnetisme, zoom
Gereedschap	Selectie, lijn, rechthoek, cirkel, bézier, pen, boog, curve, ster, tekst, hotspot, pipet...
Opties	Instellingen: thema, taal, sneltoetsen, plug-ins
Venster	Lagen, eigenschappen
Document	Nieuw, verwijderen, koppelen aan..., koppelingen verwijderen, presenteren
Laag	Toevoegen, verwijderen, zichtbaarheid, overvloeien en dekking
Help	Over, Wiki (deze pagina)

Op een klein scherm wordt het menu een lade (hamburgerpictogram). De menu-items tonen hun sneltoets.

Dessiner

Chaque forme est créée en faisant glisser sur le document. Une fois dessinée, elle devient l'élément en cours d'édition : ses poignées apparaissent et le panneau Propriétés montre ses réglages.

• Ligne, rectangle, cercle : glissez d'un coin à l'autre.
• Bézier, plume, arc, courbe : cliquez pour poser les points de contrôle ; Shift+C ferme le tracé, Shift+R le réinitialise.
• Étoile, polygone : glissez, puis réglez le nombre de branches dans les propriétés.
• Texte : cliquez pour poser le texte, puis éditez police, taille et couleur.
• Image / HTML : importez via le menu Fichier ; un élément HTML s'édite en mode visuel ou en source.

Pour revenir à la sélection depuis n'importe quel outil, faites un clic droit.

Drawing

Each shape is created by dragging on the document. Once drawn, it becomes the element being edited: its handles show up and the Properties panel displays its settings.

• Line, rectangle, circle: drag from one corner to the other.
• Bezier, plume, arc, curve: click to place the control points; Shift+C closes the path, Shift+R resets it.
• Star, polygon: drag, then set the number of branches in the properties.
• Text: click to place the text, then edit font, size and color.
• Image / HTML: import from the File menu; an HTML element is edited visually or as source.

To go back to selection from any tool, right-click.

Tekenen

Elke vorm maak je door over het document te slepen. Na het tekenen wordt hij het element dat je bewerkt: de hendels verschijnen en het paneel Eigenschappen toont de instellingen.

• Lijn, rechthoek, cirkel: sleep van de ene hoek naar de andere.
• Bézier, pen, boog, curve: klik om de controlepunten te plaatsen; Shift+C sluit het pad, Shift+R zet het terug.
• Ster, veelhoek: sleep en stel daarna het aantal punten in bij de eigenschappen.
• Tekst: klik om de tekst te plaatsen en pas daarna lettertype, grootte en kleur aan.
• Afbeelding / HTML: importeer via het menu Bestand; een HTML-element bewerk je visueel of als bron.

Om vanuit elk gereedschap terug te keren naar selectie, klik je met de rechtermuisknop.

Documents et calques

Une scène contient un ou plusieurs documents, chacun contenant des calques qui contiennent les éléments.

Plusieurs documents

• Document > Nouveau (ou le bouton + de l'onglet Calques) ajoute un document à droite du dernier, nommé document_N où N est le plus grand numéro du projet plus un.
• Avec plusieurs documents, l'identifiant s'affiche au-dessus du coin supérieur gauche : faites-le glisser pour déplacer le document, cliquez pour le sélectionner.
• Survolez un document non sélectionné : il reçoit un halo violet. Un clic dedans le rend courant.
• Chaque document garde son zoom et son déplacement.
• L'identifiant est modifiable (inspecteur ou double-clic dans l'explorateur de calques) ; il doit être valide et unique.

Calques

L'onglet Calques montre l'arbre documents > calques > éléments. Œil pour la visibilité, glisser-déposer pour l'ordre, clic droit pour premier plan / arrière-plan, double-clic pour renommer.

Grille de colonnes

Chaque document peut afficher 1 à 12 colonnes égales avec gouttière (Afficher > Grille colonnes). Les éléments s'accrochent aux bords des colonnes.

Documents and layers

A scene holds one or more documents, each holding layers that hold the elements.

Several documents

• Document > New (or the + button of the Layers tab) adds a document to the right of the last one, named document_N where N is the highest number of the project plus one.
• With several documents, the id is shown above the top-left corner: drag it to move the document, click it to select it.
• Hover an unselected document: it gets a purple glow. A click inside makes it current.
• Each document keeps its own zoom and pan.
• The id is editable (inspector or double-click in the layer explorer); it must be valid and unique.

Layers

The Layers tab shows the documents > layers > elements tree. Eye for visibility, drag-drop for order, right-click for bring to front / send to back, double-click to rename.

Column grid

Each document can show 1 to 12 equal columns with a gutter (View > Column grid). Elements snap to the column edges.

Documenten en lagen

Een scène bevat een of meer documenten, elk met lagen die de elementen bevatten.

Meerdere documenten

• Document > Nieuw (of de knop + op het tabblad Lagen) voegt een document toe rechts van het laatste, met de naam document_N, waarbij N het hoogste nummer van het project plus één is.
• Bij meerdere documenten staat de id boven de linkerbovenhoek: sleep hem om het document te verplaatsen, klik om het te selecteren.
• Beweeg over een niet-geselecteerd document: het krijgt een paarse gloed. Een klik erin maakt het actief.
• Elk document onthoudt zijn eigen zoom en positie.
• De id is aanpasbaar (inspecteur of dubbelklik in de laagverkenner); hij moet geldig en uniek zijn.

Lagen

Het tabblad Lagen toont de boom documenten > lagen > elementen. Oog voor zichtbaarheid, slepen voor de volgorde, rechtsklik voor naar voren / naar achteren, dubbelklik om te hernoemen.

Kolomraster

Elk document kan 1 tot 12 gelijke kolommen met tussenruimte tonen (Weergave > Kolomraster). Elementen springen naar de kolomranden.

Propriétés et styles

Le panneau Propriétés (à droite) est le « mode design » : il change selon la sélection.

• Géométrie : position X / Y, largeur, hauteur, rotation, alignement, verrouillage du ratio, ajustement au document.
• Apparence : opacité, flou, luminosité, contraste, niveaux de gris, rotation de teinte, inversion, saturation.
• Couleurs : remplissage et contour avec transparence (alpha) ; pipette pour prélever une couleur.
• Ombres : plusieurs ombres par élément (décalage, flou, couleur) ; le marqueur d'une ombre se déplace à la souris.
• Brosses : remplissages composites, dégradés linéaires et radiaux (poignées de départ, de fin, de rayon et arrêts de couleur), textures.
• Transformation : poignées d'échelle, de rotation et d'inclinaison sur l'élément sélectionné.

Sans sélection, le panneau montre les réglages du document : identifiant, titre, taille, fond, colonnes.

Properties and styles

The Properties panel (right) is the "design mode": it changes with the selection.

• Geometry: X / Y position, width, height, rotation, alignment, ratio lock, fit to document.
• Appearance: opacity, blur, brightness, contrast, grayscale, hue rotation, invert, saturation.
• Colors: fill and stroke with transparency (alpha); eyedropper to pick a color.
• Shadows: several shadows per element (offset, blur, color); a shadow marker can be dragged with the mouse.
• Brushes: composite fills, linear and radial gradients (start, end, radius handles and color stops), textures.
• Transform: scale, rotate and skew handles on the selected element.

With no selection, the panel shows the document settings: id, title, size, background, columns.

Eigenschappen en stijlen

Het paneel Eigenschappen (rechts) is de "ontwerpmodus": het verandert met de selectie.

• Geometrie: X / Y-positie, breedte, hoogte, rotatie, uitlijning, verhouding vergrendelen, aanpassen aan het document.
• Uiterlijk: dekking, vervaging, helderheid, contrast, grijstinten, tintrotatie, omkeren, verzadiging.
• Kleuren: vulling en lijn met transparantie (alfa); pipet om een kleur op te nemen.
• Schaduwen: meerdere schaduwen per element (verschuiving, vervaging, kleur); de markering van een schaduw sleep je met de muis.
• Penselen: samengestelde vullingen, lineaire en radiale verlopen (hendels voor begin, einde, straal en kleurstops), texturen.
• Transformatie: hendels voor schalen, roteren en kantelen op het geselecteerde element.

Zonder selectie toont het paneel de documentinstellingen: id, titel, grootte, achtergrond, kolommen.

Prototype : liens, hotspots et présentation

• Lien entre documents : faites glisser la pastille ronde à droite de l'identifiant d'un document vers un autre, ou utilisez Document > Lier à... (cible, couleur, texte). Cliquez sur la flèche pour changer sa couleur ou son texte, ou la supprimer.
• Hotspot (Outils > Hotspot) : dessinez une zone cliquable, puis choisissez dans « Aller à » le document cible (le document en cours n'est pas proposé). Une flèche en pointillés courbe pointe vers l'identifiant du document cible.
• Présenter (Document > Présenter) : plein écran ; cliquez les hotspots ou les boutons de liens pour naviguer ; ← revient, → suit le premier lien, Échap ferme.

Prototype: links, hotspots and presenting

• Link between documents: drag the round handle at the right of a document id onto another one, or use Document > Link to... (target, color, label). Click the arrow to change its color or label, or delete it.
• Hotspot (Tools > Hotspot): draw a clickable area, then pick the target document in "Go to" (the document being edited is not listed). A curved dashed arrow points at the target document id.
• Present (Document > Present): fullscreen; click the hotspots or link buttons to navigate; ← goes back, → follows the first link, Esc closes.

Prototype: koppelingen, hotspots en presenteren

• Koppeling tussen documenten: sleep de ronde hendel rechts van de id van een document naar een ander, of gebruik Document > Koppelen aan... (doel, kleur, label). Klik op de pijl om kleur of label te wijzigen of de koppeling te verwijderen.
• Hotspot (Gereedschap > Hotspot): teken een klikbaar gebied en kies bij "Ga naar" het doeldocument (het document dat je bewerkt wordt niet aangeboden). Een gebogen, gestippelde pijl wijst naar de id van het doeldocument.
• Presenteren (Document > Presenteren): volledig scherm; klik op hotspots of koppelingsknoppen om te navigeren; ← gaat terug, → volgt de eerste koppeling, Esc sluit.

Raccourcis clavier

Les raccourcis ne fonctionnent que lorsque la surface a le focus (cliquez dessus). Un champ de saisie, une boîte de dialogue ou le panneau Propriétés gardent leurs propres touches. Sur Mac, Cmd remplace Ctrl.

Touche	Action
S L R C	Sélection, ligne, rectangle, cercle
B P A M K T	Bézier, plume, arc, courbe, étoile, texte
Suppr / Retour arrière	Supprimer la sélection
Ctrl+Z / Ctrl+Shift+Z / Ctrl+Y	Annuler, rétablir
Ctrl+C / V / A	Copier, coller, tout sélectionner
Ctrl+D	Dupliquer la sélection
Échap	Désélectionner ; ferme la boîte de dialogue au premier plan
↑ ↓ ← →	Dans un menu ouvert : naviguer ; Entrée active

Vous pouvez redéfinir chaque raccourci dans Options > Paramètres > Raccourcis ; une touche n'appartient qu'à une action.

Keyboard shortcuts

Shortcuts only work when the surface has focus (click on it). An input field, a dialog or the Properties panel keep their own keys. On Mac, Cmd replaces Ctrl.

Key	Action
S L R C	Selection, line, rectangle, circle
B P A M K T	Bezier, plume, arc, curve, star, text
Del / Backspace	Delete the selection
Ctrl+Z / Ctrl+Shift+Z / Ctrl+Y	Undo, redo
Ctrl+C / V / A	Copy, paste, select all
Ctrl+D	Duplicate the selection
Esc	Unselect; closes the topmost dialog
↑ ↓ ← →	In an open menu: navigate; Enter activates

You can redefine each shortcut in Options > Settings > Shortcuts; a key belongs to a single action.

Sneltoetsen

Sneltoetsen werken alleen als het werkblad focus heeft (klik erop). Een invoerveld, een dialoog of het paneel Eigenschappen behouden hun eigen toetsen. Op een Mac vervangt Cmd de toets Ctrl.

Toets	Actie
S L R C	Selectie, lijn, rechthoek, cirkel
B P A M K T	Bézier, pen, boog, curve, ster, tekst
Del / Backspace	Selectie verwijderen
Ctrl+Z / Ctrl+Shift+Z / Ctrl+Y	Ongedaan maken, opnieuw
Ctrl+C / V / A	Kopiëren, plakken, alles selecteren
Ctrl+D	Selectie dupliceren
Esc	Selectie opheffen; sluit de bovenste dialoog
↑ ↓ ← →	In een open menu: navigeren; Enter activeert

Je kunt elke sneltoets opnieuw instellen via Opties > Instellingen > Sneltoetsen; een toets hoort bij één actie.

Exporter et importer

• Fichier > Exporter... : une seule boîte de dialogue (nom du projet + format) pour PNG, JPEG, SVG, HTML, phtml, bview ou XML (format projet gkds).
• Export CSS : le style de l'élément sélectionné en règle CSS (cible HTML ou SVG), avec transition, survol et animation optionnels ; boutons Copier et Télécharger.
• Importer : fichiers SVG, images et HTML (scripts et attributs on* retirés).
• Page web : Fichier > Nouvelle page web crée un document formé d'éléments HTML5 (palette, arbre de structure, éditeur de balise) ; le type « email » limite la palette aux balises compatibles messagerie.

Export and import

• File > Export...: one dialog (project name + format) for PNG, JPEG, SVG, HTML, phtml, bview or XML (gkds project format).
• CSS export: the style of the selected element as a CSS rule (HTML or SVG target), with optional transition, hover and animation; Copy and Download buttons.
• Import: SVG files, images and HTML (scripts and on* attributes are removed).
• Web page: File > New web page creates a document made of HTML5 elements (palette, structure tree, tag editor); the "email" type limits the palette to mail-safe tags.

Exporteren en importeren

• Bestand > Exporteren...: één dialoog (projectnaam + formaat) voor PNG, JPEG, SVG, HTML, phtml, bview of XML (projectformaat gkds).
• CSS-export: de stijl van het geselecteerde element als CSS-regel (HTML- of SVG-doel), met optionele overgang, hover en animatie; knoppen Kopiëren en Downloaden.
• Importeren: SVG-bestanden, afbeeldingen en HTML (scripts en on*-attributen worden verwijderd).
• Webpagina: Bestand > Nieuwe webpagina maakt een document van HTML5-elementen (palet, structuurboom, tag-editor); het type "e-mail" beperkt het palet tot mailvriendelijke tags.

Sauvegarde

• Dans le navigateur : le document, l'historique, la vue et les préférences sont conservés automatiquement (localStorage) et restaurés à la réouverture.
• Compte connecté : vos options et plugins sont synchronisés avec le serveur ; Fichier > Enregistrer dans mon compte... et Ouvrir depuis mon compte... gèrent vos surfaces.
• Deux éléments ne peuvent pas porter le même identifiant : l'enregistrement est refusé avec un avertissement tant que le doublon n'est pas corrigé.

Saving

• In the browser: the document, history, view and preferences are kept automatically (localStorage) and restored on reopening.
• Signed-in account: your options and plugins are synchronized with the server; File > Save to my account... and Open from my account... manage your surfaces.
• Two elements cannot share an id: saving is refused with a warning until the duplicate is fixed.

Opslaan

• In de browser: het document, de geschiedenis, de weergave en de voorkeuren worden automatisch bewaard (localStorage) en bij heropenen hersteld.
• Ingelogd account: je opties en plug-ins worden met de server gesynchroniseerd; Bestand > Opslaan in mijn account... en Openen vanuit mijn account... beheren je werkbladen.
• Twee elementen mogen niet dezelfde id hebben: opslaan wordt geweigerd met een waarschuwing totdat het dubbele is aangepast.

Paramètres

Options > Paramètres : thème (sombre, clair, système), langue (français, anglais, néerlandais), raccourcis personnalisés, plugins et profil. Le thème s'applique aussi aux menus et à cette page.

Settings

Options > Settings: theme (dark, light, system), language (French, English, Dutch), custom shortcuts, plugins and profile. The theme also applies to the menus and to this page.

Instellingen

Opties > Instellingen: thema (donker, licht, systeem), taal (Frans, Engels, Nederlands), eigen sneltoetsen, plug-ins en profiel. Het thema geldt ook voor de menu's en deze pagina.

Limites connues

• Navigateurs : Chrome / Chromium et Firefox ; la pipette native n'existe que sur Chromium (repli sur le canvas).
• Une ombre est produite par le remplissage et le contour ; pas d'ombre de groupe pour un calque.
• Export CSS : un élément à la fois ; les dégradés et textures ne s'expriment pas en CSS pour la cible SVG.
• Import SVG : feDropShadow, dégradés et foreignObject non gérés.
• Partage de surfaces : lecture seule ; pas de fusion si deux sessions modifient la même surface.

Known limits

• Browsers: Chrome / Chromium and Firefox; the native eyedropper only exists on Chromium (canvas fallback).
• A shadow is cast by the fill and the stroke; no group shadow for a layer.
• CSS export: one element at a time; gradients and textures cannot be expressed in CSS for the SVG target.
• SVG import: feDropShadow, gradients and foreignObject are not handled.
• Surface sharing: read-only; no merge when two sessions edit the same surface.

Bekende beperkingen

• Browsers: Chrome / Chromium en Firefox; de ingebouwde pipet bestaat alleen in Chromium (terugval op het canvas).
• Een schaduw wordt veroorzaakt door de vulling en de lijn; geen groepsschaduw voor een laag.
• CSS-export: één element tegelijk; verlopen en texturen zijn niet in CSS uit te drukken voor het SVG-doel.
• SVG-import: feDropShadow, verlopen en foreignObject worden niet ondersteund.
• Werkbladen delen: alleen-lezen; geen samenvoeging als twee sessies hetzelfde werkblad bewerken.