Cursor Canvas Adds Design Mode for Faster Editing and Context Usage Reports

TL;DR

• Cursor's Canvas now includes Design Mode for direct annotation and faster UI element editing.
• A new context usage report visualizes token distribution across prompts, tools, and skills within a canvas.
• Users can interact with the context report and utilize a "Debug with Agent" button to optimize context usage.
• Enhanced shared canvases now support full-screen viewing, and agents can embed actionable buttons.

Cursor has rolled out significant updates to its Canvas feature, introducing Design Mode to streamline the editing process for interactive artifacts like dashboards and internal tools. This new mode allows users to directly select and annotate UI elements within a canvas, much like they would when inspecting elements in a web browser. This visual feedback mechanism enables faster iteration and more precise guidance for Cursor's agent edits, moving beyond purely descriptive text instructions.

Alongside Design Mode, Cursor has implemented a comprehensive context usage report directly within canvases. This interactive report provides a detailed breakdown of where tokens are being consumed, covering system prompts, tool definitions, rules, and various skills employed by the agent. This transparency is crucial for understanding agent behavior and optimizing performance.

Users can engage directly with this context usage report by asking the agent follow-up questions. The agent can then customize the report to address specific queries, offering deeper insights into token allocation. Furthermore, a convenient "Debug with Agent" button is now embedded within canvases. Clicking this button prompts Cursor to identify potential opportunities for reducing context usage in a new conversation, actively assisting users in efficiency improvements.

Beyond editing and analysis, the latest updates also enhance the collaborative aspects of Canvas. Shared canvases can now be opened in full-screen mode within a browser, making them more presentable and easier to share with teams. Agents also gain the ability to embed buttons directly into canvases. When these buttons are clicked, they can trigger specific prompts, allowing for interactive workflows and more dynamic canvas content.

Additional quality-of-life improvements include better agent handling of canvas type errors and enhancements to component styling and chart customization. These refinements contribute to a more robust and user-friendly experience when building and interacting with agent-generated artifacts. For those looking to dive deeper into these capabilities, the Canvas Documentation offers comprehensive guidance.

Summary

• Design Mode and context usage reports are now available in Cursor Canvas for enhanced editing and analysis.
• Users can interact with context reports and use the "Debug with Agent" feature to optimize token usage.
• Shared canvases offer full-screen viewing, and agents can embed interactive buttons.
• Updates also include improved styling and error handling for a more refined user experience.

Source: Canvas Design Mode and Context Usage Report · Cursor