1. Live Canvas Previews
Instead of presenting static code blocks, Accelerated Logic AI can render live, working web components inside isolated sandboxed iframes within the chat thread.
Test component state changes, button hover effects, and responsive layout scaling directly inside your message stream.
Toggle effortlessly between live visual execution (Preview Mode) and raw syntax-highlighted code (View Code).
2. How Canvas Previews Are Triggered
The AI automatically detects UI intent, but you can explicitly trigger or suppress previews using prompt keywords:
Force Preview Triggers: "Preview in canvas", "Show live preview", "Render as interactive preview", "Display as working UI".
Suppress Preview Triggers: "Only output code block, no preview", "Do not render preview, just show code".
3. The Interactive Preview Card Structure
Top Header Bar: Displays the AI-generated title (e.g. Kanban Board - Drag & Drop) and language badge (tsx / html).
Sandboxed Canvas Area: Isolated iframe environment pre-loaded with Tailwind CSS, Lucide icons, and React 18 runtimes.
Footer Controls: Click View Code to inspect raw source files, or click Open in Web Sandbox to transfer the component into the multi-file editing suite.
4. Ideal Code Patterns for Canvas Previews
Single-file components exported as export default function App() deliver instant, error-free visual previews.
Pre-wired for lucide-react icons, standard React state hooks (useState, useEffect), and utility classes.
5. Handoff to Web Sandbox Workspace
When a single-file preview requires multi-file modularization, backend API routing, or GitHub pushing:
- Click Open in Web Sandbox on the bottom bar of any preview card.
- The full Web Sandbox workspace opens instantly with file trees, responsive device viewports, and console debugging.
- Prompt the chat assistant to make surgical multi-file edits or export directly to GitHub.
6. Canvas Preview Troubleshooting
Blank White Preview Frame? Switch to View Code or open in Web Sandbox to inspect runtime syntax errors in the console.
Unstyled Elements? Confirm that the component utilizes standard Tailwind utility classes, which are automatically resolved by the preview runtime.
External Module Import Errors? For complex external packages, open the preview in Web Sandbox to resolve npm dependencies.