Using Canvas View in the Project Editor
Learn how to use Canvas View to navigate large projects, focus and edit specific pages faster, and keep page context while switching between Preview, Canvas, and Code tabs.
What Canvas View is for
Canvas View gives you a full visual map of your project pages in one place.
Instead of opening pages one by one, you can:
- scan many pages at once
- zoom and pan to any section quickly
- focus a single page for direct interaction
- select an element and send a targeted edit request to AI
It is built for larger sites where jumping between routes is the bottleneck.
Why teams use Canvas View
1) Faster page discovery
The minimap and zoom controls help you locate routes quickly without breaking flow.
2) Better change confidence
You can compare multiple page states in one session before committing edits.
3) More precise AI requests
When a page is focused, you can click specific elements and issue targeted prompts rather than broad global changes.
4) Smoother context switching
Your selected page path is preserved as you move between Preview, Canvas, and Code tabs, so you can continue from the same route context.
Opening and navigating Canvas View
- Open your project in the editor
- Click the Canvas tab in top navigation
- Use mouse wheel + modifier for zoom, then drag to pan around the map
- Click any page tile to focus and interact with that page
Focus and unfocus behavior
When you click a page tile, Canvas enters focus mode for that page.
In focus mode you can:
- inspect and select elements
- use targeted element editing
- fit the viewport to the focused page or selected element
To leave focus mode, use Back to Grid. This returns to the multi-page canvas layout.
Keyboard shortcuts and controls
Canvas View supports keyboard and pointer controls for speed:
- +: zoom in
- -: zoom out
- 0: reset zoom and pan
- F: fit to selected element, or focused page, or all pages
- Shift+1: fit all pages
- Shift+2: fit focused page
- Shift+3: fit selected element
- Hold Space + drag: pan canvas
- Middle mouse button + drag: pan canvas
Use the minimap for jump navigation if your project has many pages.
Selection and AI editing flow
- Focus a page
- Turn on element selection mode
- Click the exact element you want to change
- Enter a targeted prompt
- Run the edit and verify in Preview or Canvas
This keeps edits tight and reduces unintended side effects on unrelated sections.
Preview, Canvas, and Code context continuity
Route context remains aligned across tabs:
- If you select or focus a page in Canvas, that page path is retained when you move to Preview
- If you navigate in Preview, returning to Canvas keeps your latest page context
- Switching to Code does not clear the selected page context for your next visual tab
This helps you inspect visually, confirm in preview, then implement in code without re-finding the route each time.
Best practices
- Start with Fit All to orient yourself on large projects
- Use Focus before selecting elements so AI requests stay specific
- Use Shift+3 after selecting a small element for precise adjustments
- Keep Board tasks and Canvas checks aligned before approvals