Moonlight Help

Lightweight SVG Editor - Keyboard Shortcuts & Documentation

Keyboard Shortcuts

Tools (Shape Creation)

KeyAction
1Create Rectangle
2Create Circle
3Create Ellipse
4Create Line
5Create Arrow
6Create Text

Edit

KeyAction
Delete / BackspaceDelete selected element
EscapeCancel operation / Deselect / Close the fullscreen modal
Ctrl+ZUndo
Ctrl+Shift+Z / Ctrl+YRedo
Ctrl+DDuplicate selected element
Ctrl+CCopy selected element
Ctrl+VPaste element
Ctrl+ASelect all

Navigation

KeyAction
↑ ↓ ← →Move selected element (5px, 10px with grid snap)
Shift+ArrowResize selected element
Arrow with nothing selectedPan the canvas

Mode

KeyAction
VSwitch to Select mode
PToggle Free Draw mode
?Show this help page

Mouse Operations

ActionDescription
ClickSelect element
DragMove element / Box select
Right-clickContext menu
Double-click on TextEdit text
Shift+ClickAdd/remove from selection
Drag handleResize element

Examples

Embed Mode

Basic embedding in your web page with full editor functionality.

View Example →

Web Component

Use as a custom element <moonlight-editor>.

View Example →

Preview Mode

Read-only preview with modal editor popup.

View Example →

Free Draw

Experimental freehand drawing with bezier curve approximation.

View Example →

Viewer

Minimal SVG viewer component.

View Example →

Links