Artifacts

View, edit, and preview AI-generated code and documents in a dedicated panel with live preview.

What Are Artifacts?

AI-generated outputs that appear in a special preview panel:

• Websites: Live HTML/CSS/JS previews
• Code: Syntax-highlighted editing
• Documents: Formatted content
• Interactive Elements: Dynamic, working previews

Features

View Modes:

• Code View: Edit source code with syntax highlighting
• Preview View: See rendered result and interact
• Split View: Code and preview side-by-side

Actions:

• Edit directly in panel with real-time updates
• Copy code to clipboard
• Download as file
• Share with link (viewable without login)

How to Use

Generate

Ask AI to create web content:

• "Create a landing page for a coffee shop"
• "Build a contact form with validation"
• "Design a pricing table"

Edit & Refine

1. Review in preview mode
2. Switch to code view to edit
3. Ask AI for modifications
4. See changes in real-time

Share & Export

• Generate shareable link for clients/team
• Download HTML file
• Copy code for external use

Common Use Cases

Landing Pages: Hero sections, features, pricing, forms Email Templates: Newsletters, marketing emails Website Mockups: Quick prototypes, client presentations UI Components: Navigation bars, cards, widgets Documentation: Formatted guides and references

Best Practices

1. Be specific when requesting: "Create a modern landing page for a SaaS product with hero, features, and pricing"
2. Use split view for development
3. Download or copy code regularly
4. Share early for feedback
5. Combine AI generation with manual tweaks

Best for HTML/web content. Preview runs in sandbox with some limitations.