Welcome to CanvXML
CanvXML is a visual XML editor that displays your XML files as interactive flowcharts. It's designed for working with Apigee API proxy configurations but works with any XML file.
Quick Start
- Open a file: Use Ctrl+O or drag & drop XML files
- Open a folder: Use Ctrl+Shift+O or drag & drop a folder
- Select a node: Click on any node in the canvas
- Edit properties: Use the Properties panel on the right
- Save changes: Press Ctrl+S to save
Browser Compatibility
Chrome/Edge: Full support including direct file saving
Firefox/Safari: View & edit supported, files download instead of saving directly
Working with Files & Folders
Opening Files
- File menu → Open File or Ctrl+O: Select XML files
- Drag & Drop: Drop XML files anywhere on the app
Opening Folders
- File menu → Open Folder or Ctrl+Shift+O: Select a project folder
- Drag & Drop: Drop a folder to open it as a project
- Only folders containing XML files are displayed
- Click any file in the tree to open it
File Tree Features
- Search: Filter files by name using the search bar
- Changed filter: Show only modified files
- Orange dot: Indicates unsaved changes
- Refresh: Re-scan folder for new files
Saving Files
- Ctrl+S: Save current file
- Ctrl+Shift+S: Save As (new file)
- Ctrl+Alt+S: Save all modified files
Editing Nodes
Selecting Nodes
Click any node in the canvas to select it. The selected node is highlighted and its properties appear in the Properties panel.
Editing Properties
- Select a node
- Expand Element Details in the Properties panel
- Edit tag name, text content, or attributes
- Click Apply Changes
Adding Nodes
- Select a node, then press Insert or right-click → Add Node
- Choose position: As child, Before, or After
Deleting Nodes
- Select a node, then press Delete or right-click → Delete Node
- Confirm deletion if the node has children
Drag & Drop Reordering
- Click and hold a node
- Drag to a new position
- Drop zones: Top = before, Middle = as child, Bottom = after
Undo/Redo
- Ctrl+Z: Undo last change
- Ctrl+Y: Redo
- Each file maintains up to 50 history states
- Undoing all changes will unmark the file as modified
Shape & Color Visualization
Each XML tag is displayed with a shape and color based on its category:
| Shape | Category | Examples |
|---|
| Rectangle | Structure (Blue) | APIProxy, ProxyEndpoint |
| Diamond | Condition (Yellow) | Condition, Step |
| Rounded Rect | Policy (Purple) | AssignMessage, JavaScript |
| Hexagon | Security (Orange) | VerifyAPIKey, OAuthV2 |
| Ellipse | Data (Teal) | Variable, Payload |
| Cylinder | Cache | ResponseCache, LookupCache |
| Circle | Metadata (Gray) | DisplayName, Description |
Customizing Appearance
- Select a node in the canvas
- Expand Shape & Color in the Properties panel
- Choose a shape from the grid
- Pick a color from swatches or use custom picker
- Click Reset to Default to restore original
Customizations are saved per tag name and persist across sessions.
XML Preview Panel
View live XML code with syntax highlighting.
Enabling Preview
Go to View menu → Show XML Preview
Position Options
- Bottom: Horizontal panel below canvas
- Right: Vertical panel next to Properties
Resize by dragging the panel border.
View Modes
- Full: Complete XML document
- Selected: Only selected node and children
- Changes: Diff view showing modifications (green = added, red = removed)
Features
- Syntax highlighting for tags, attributes, values
- Line numbers
- Selected node highlighting
- Copy to clipboard button
- Diff view with addition/deletion counts
Canvas Navigation
Panning
Click and drag on empty canvas area to pan the view.
Zooming
- Mouse wheel: Scroll to zoom in/out
- + or =: Zoom in
- -: Zoom out
- 0: Fit to view
Collapsing Nodes
- Click the − button on a node to collapse its children
- Click the + button to expand
- View menu → Collapse All / Expand All for bulk operations
Themes
Switch between Light and Dark modes via View menu → Theme.
Keyboard Shortcuts
| Shortcut | Action |
|---|
| F1 | User's Manual |
| Ctrl+N | New file |
| Ctrl+O | Open file(s) |
| Ctrl+Shift+O | Open folder |
| Ctrl+S | Save |
| Ctrl+Shift+S | Save As |
| Ctrl+Alt+S | Save All |
| Ctrl+Z | Undo |
| Ctrl+Y | Redo |
| Insert | Add node |
| Delete | Delete node |
| + | Zoom in |
| - | Zoom out |
| 0 | Fit to view |
| Escape | Cancel operation |
