Open the editor

Click "Open Editor" in the top-right corner. No signup or login needed — on first open, example pages load automatically (intro page / data dashboard / system architecture / collaboration mind map). Edit them directly or create a blank page. Everything autosaves and data lives in your browser — refreshes never lose work.

When you want AI generation and real-time collaboration, click the "Log in" button in the top-right corner to register or sign in — your local pages can then be imported into a collaboration project in one click.

2

Get to know the interface

The editor has four areas, clockwise from the top-left:

Top toolbar: project & account menus, undo / redo, design / pen / link tool switching, group, align, layers, center, guides, preview
Left panel: icon toolbar + content panel with the page list, component library, icon library, resources (images), templates, masters and layers (panel width is draggable; drag it fully closed to collapse into an icon-only bar)
Center canvas: the WYSIWYG editing area — drag on empty space to pan, zoom from the bottom-right
Right properties panel: with a component selected, adjust position, size, rotation, background, border, radius, shadow, animation, text and every other property

Hovering any button shows a tooltip, and "Settings" at the bottom of the right panel adjusts preferences (selection mode, move step, canvas draggable, etc.).

3

Create & switch pages

Open the "Pages" panel (the default one) to see every page in the current project. Each page has an independent name, size and background color — ideal for the multiple screens of a full design.

New page: click the "New" button at the bottom of the page list (or right-click the list area)
Switch pages: click the page name — edits autosave, no manual saving when switching
Duplicate / delete a page: hover a page row and use the action buttons that appear
Change size & background: select the page row, then edit in the right properties panel

4

Drag in components

Switch the left panel to the "Component Library" tab — all built-in components are listed by category (base common components, flow shapes, etc.). Click the icons in the left toolbar to switch panels.

Drag in: press and hold a component entry, drag it to the canvas and release to place it
30+ components ready to use: text, buttons, forms, charts, tables, images, icons…
"Icon Library" panel: built-in iconfont icons, drag-and-drop the same way
"Templates" / "Masters" panels: save frequently used components as templates or masters and reuse them as whole blocks (see sections 17 & 18)

5

Select, move, resize, rotate & double-click editing

Click a component to select it (the right panel shows its properties); press and drag to move — while dragging it snaps to guides automatically and shows spacing labels against neighbors.

Resize: drag the corner / edge handles; hold Shift for proportional scaling (on some components)
Rotate: drag the arc handle around the component
Edit content: double-click text / shapes / tables etc. to edit in place; press Esc to exit editing
Nudge: with a component selected, arrow keys move it 1px at a time (great for fine layout)
Hide / lock: Ctrl+H to hide, Ctrl+L to lock the selection

6

Copy, paste & delete

Copying components works several ways, with the same result:

Ctrl+C to copy → Ctrl+V to paste; Ctrl+D duplicates in place (most used); Ctrl+X cuts
Right-click a component — the menu has "Copy" and "Paste" too
Delete: select and press Delete, or right-click → delete
Selected connectors can also be removed precisely with Delete

7

Upload images

Two ways to upload a local image:

Direct drag: drag an image file into the canvas — it uploads automatically and becomes an image component (initial size follows the image aspect ratio)
Resource panel: click the upload button in the left "Resources" panel and pick a file (details in section 19, "Asset library")

Image components support cover / fit / stretch fill modes. When signed out, images stay local (data never leaves your browser); after logging in, images upload to the server and become visible to collaborators.

8

Rubber-band selection & batch operations

Press and drag on empty canvas space to draw a dashed box and select multiple components at once — then move, copy, delete, align or group them together.

Two selection modes: intersect (touch to select, default) and contain (fully inside the box) — toggle with Ctrl+Shift+O or from the settings panel
Matched components are highlighted live while dragging; release to commit the selection
Select all: Ctrl+A selects every component on the current page

9

Grouping & layers

To move or resize several components as one, group them: select multiple components, then click the "Group" button in the top toolbar (or Ctrl+G). After grouping, drag any member and the whole group moves; "Ungroup" (Ctrl+Shift+G) splits it back anytime. Grouping never changes the rendered result — it's purely a structural convenience.

Adjust component order with the "Layers" toolbar group (or the "Layers" panel on the left):

Bring to front / forward: Ctrl+Shift+↑ / Shift+↑
Send to back / backward: Ctrl+Shift+↓ / Shift+↓

10

Alignment & guides

With multiple components selected, the "Align" toolbar group offers six alignments and two distributions: align left, center horizontally, align right, align top, center vertically, align bottom, distribute horizontally, distribute vertically.

Alignment shortcuts: L left / C center horizontal / R right / T top / M center vertical / B bottom (select components first)
Guides appear automatically while dragging (snap reference lines + spacing labels against neighbors) — zero mental math
Show / hide guides: Ctrl+Shift+L, or the "Guides" toolbar button

11

Drawing connectors (flowcharts / mind maps / architecture)

Switch to the "Link" tool in the top toolbar — connector anchors (small arrows) appear on all four edges of every component. No selection needed to drag lines:

Connect: press an anchor and drag toward a target anchor — it highlights and snaps on hover; release to connect
Disconnect: tap a connected anchor to disconnect all its lines
Select & delete: click a line on the canvas to select it (turns red), press Delete; click empty space to deselect
Line type: in link mode a line-style button appears in the toolbar — switch between bezier curves and orthogonal polylines; orthogonal lines auto-route around every component, so arrows never cross content
Style: line colors (9 presets) and widths (1-5px) adjustable, saved with the project
Lines follow component moves and resizes automatically — no manual sync; one anchor can connect to many targets

Rubber-band selection on empty space still works in link mode; to exit, click the "Link" or "Design" tool again.

12

Pen tool (freehand drawing)

Switch to the "Pen" tool in the top toolbar (shortcut P) and click points on the canvas to draw polylines / polygons and other free shapes; double-click or press Enter to finish and return to "Design" mode automatically; press Esc to cancel. Great for irregular annotations and hand-drawn arrows.

13

Full shortcut list

All built-in shortcuts (on Mac, Ctrl maps to ⌘):

Action	Shortcut
Undo / redo	`Ctrl`+`Z` / `Ctrl`+`Shift`+`Z`
Copy / paste / cut	`Ctrl`+`C` / `Ctrl`+`V` / `Ctrl`+`X`
Duplicate in place	`Ctrl`+`D`
Delete selection	`Delete`
Select all	`Ctrl`+`A`
Save	`Ctrl`+`S`
Group / ungroup	`Ctrl`+`G` / `Ctrl`+`Shift`+`G`
Lock / unlock selection	`Ctrl`+`L`
Hide / show selection	`Ctrl`+`H`
Show / hide guides	`Ctrl`+`Shift`+`L`
Zoom canvas in / out	`Ctrl`+`+` / `Ctrl`+`-`
Center the view	`Ctrl`+`Shift`+`F`, or the "Center" toolbar button
Pan the canvas	Hold `Space` + drag the mouse
Pen tool	`P`
Toggle selection mode (intersect / contain)	`Ctrl`+`Shift`+`O`
Nudge (1px steps)	Arrow keys `←↑→↓`
Align left / center / right	`L` / `C` / `R`
Align top / middle / bottom	`T` / `M` / `B`
Forward / bring to front	`Shift`+`↑` / `Ctrl`+`Shift`+`↑`
Backward / send to back	`Shift`+`↓` / `Ctrl`+`Shift`+`↓`

Tip: shortcuts are automatically disabled while typing, so nothing misfires; press Esc to exit editing mode at any time.

14

AI-powered page generation (optional)

Once you're in the workspace after logging in, open the "AI Assistant" in the bottom-right corner of the canvas and describe your needs in natural language — "make a login page", "add a bar chart of the last six months of sales" — the assistant creates pages, adds components and edits properties.

Generated results are ordinary page data on the canvas — keep dragging, adjusting properties and connecting
Page data is pure JSON (component tree + properties + connectors); hand the AI_PAGE_GUIDE.md data-structure doc to any external AI tool and it can generate a page to import too

15

Image export & data backup

The "Export" button in the top-right corner:

Export the current page as PNG / JPEG (connectors, charts, radius and shadows fully preserved at 2x resolution)
Export the whole project as a ZIP archive

Data autosaves in your browser by default. Before switching browsers or clearing the cache, export a project JSON backup — or log in and import your local pages into a collaboration project in one click.

16

Collaboration & sharing

After logging in:

Create a project in the "Workspace", click "Invite members", enter the member's email (they must be registered) and assign one of owner / editor / read-only roles
Invited members open the same project and edit the same canvas in real time — only changed properties sync, so nothing is overwritten
Read-only members can view but not modify; the collaboration server is self-hostable — data stays on your own servers
Local data edited in guest mode can be imported into a collaboration project after login, to continue with your team

17

Component templates

Turn frequently used component combinations into templates and reuse them across projects:

Save: select components on the canvas (rubber-band multi-select works) → choose "Save as template" from the right-click menu — a preview is generated automatically and it appears in the "Templates" panel
Use: drag from the "Templates" panel onto the canvas to get a component copy — independent of the template, freely editable
Manage: hover a panel entry to rename or delete; templates are stored in the cloud and sync after login, so they follow you across devices
Saving a template while signed out prompts you to log in first

18

Master templates

Unlike regular templates (drag-out copies), masters are shared references inside a project — every place you drag out is the same instance: edit once, update everywhere:

Save: select components and choose "Save as master" from the right-click menu (project owners only — enforced server-side); it appears in the "Masters" panel
Use: drag from the "Masters" panel onto any project page — rendering reads the master content by id in real time
Update: click "Edit" on a master entry to open the editing page; after saving, every reference in the project updates — no per-instance editing
Multi-state: add multiple states in the editing page (e.g. each tab of a Tabs component, each frame of a carousel), switch states via the component's "Interaction" configuration for dynamic effects
Collaborators can use masters but not create them — references stay valid even if a member leaves the project

19

Asset library

The "Resources" panel on the left is your personal image library — upload once, drag anywhere:

Upload: click the panel's upload button to pick images, or drag local images into the canvas to upload and store them automatically
Compression & quota: images over 20KB are compressed automatically (visually lossless); the panel footer shows storage usage (Gold 200MB, Platinum 2GB)
Use: thumbnails load instantly (strong browser caching) — drag onto the canvas; canvas references are relative URLs, so page data is unaffected by the upload directory
Delete: hover an entry to delete the image — quota is reclaimed at the same time
Guest-mode images stay local; after login they upload to the cloud and are visible to collaborators in projects