Trickle Magic Canvas, the visual, agentic canvas where you co-create apps and websites with AI. This guide walks you through the core concepts, features, and workflows that make Magic Canvas a powerful new way to build. Overview Pn

​
What Is Magic Canvas?

Magic Canvas is not just a layout editor or a prompt box. It is a contextual, multimodal space where AI understands your intent by combining:
  • Visual layout (components and positioning)
  • User inputs (prompts, instructions, edits)
  • System rules (notes, constraints, logic)
  • Assets and data (images, database, search references)
This allows Trickle’s AI to generate, modify, and extend fully functional pages in a collaborative loop with you, in real time.

​
How to Get Started with Magic Canvas

Follow these steps to kick off your project on Magic Canvas:
  1. Switch to Canvas Mode Head to your Home page, switch to Canvas mode, and enter your first prompt. The AI agent will generate an initial layout and copy directly on the canvas. Canvasmode Pn
  2. Upload Your Brand Assets Drag in your logo, images, and other brand assets. Give them clear names so the agent can recognize and reuse them correctly across your project. Asset Pn
  3. Add Rules and Notes Specify key instructions by adding rules or notes on the canvas. These help guide the AI’s behavior, or let the agent infer them for you. Rules Pn
  4. Provide Custom Knowledge Drop in any reference docs, FAQs, or internal context that can help the AI better understand your business and make smarter decisions. Knowledge Pn
  5. Enable Database if Needed If your project involves dynamic content or structured data, prompt the agent to trigger the built-in database and start defining collections and entries. Database Pn
  6. Publish to Go Live Once you’re happy with the result, just hit Publish to push your site live. No extra steps required.

​
How to Roll Back to a Previous Version

Navigate to the version you want to restore. Hover over its name, and you’ll see a Restore button appear. Click it to revert your project to that version. Restore Pn

​
How to Build a Multi-Page Project

If you’re starting a new project, simply prompt the AI and specify the pages you want included. For example, a homepage, about page, and contact page. If you’re working on an existing project, just prompt the AI to add any new pages you need. You can describe the content or purpose of the page, and the agent will generate it within your current canvas.

​
Directly Edit Any Frame on the Canvas

If you see any UI elements you want to adjust, go to the chatbox and click the “Select to Edit” icon. You can then modify spacing, text, alignment, color, and more in a visual way. Direct Edit Pn To change the layout or reorder specific elements on the page, click the “Move Element” icon in the chatbox. Drag the element to your desired position and drop it there. Draganddrop Pn These actions do not use any credits, and your changes will be automatically turned into clean, production-ready code.