The design canvas allows you to explore and refine interface ideas with your coding agent on a visual canvas. You can compare multiple directions side by side, explore navigation flows, and even build wireframes.
You can ask your coding agent to create a design canvas at any moment, which is then done by invoking the create_design_canvas tool from Tidewave's MCP. The design canvas comes with a inspector and a zoom feature. You can also use drag and drop to navigate the canvas, or hold Cmd/Ctrl and use your scroll wheel to zoom in and out.
The canvas is a standalone HTML file, which you can check-in into version control or share with your colleagues on Slack. Here is a sample design canvas for a coffee shop website.
Design canvas vs UI variants
Tidewave also has a feature called UI variants. Use UI variants when you want to try out different variations of a component within an existing page. Use the design canvas when you need to step back and explore different versions at a macro level, explore alternative navigation flows, or when you need to share the artifact with colleagues.
Tidewave IDE
Design canvas is available by default within the Tidewave IDE. The Tidewave IDE can also render the canvas inline and reload it live, as the coding agent changes it on disk.