Skip to content

Artifact Panel

coder11125 edited this page May 1, 2026 · 1 revision

Artifact Panel

When an AI response contains code, Quasar AI renders it as an artifact card inline in the chat. Clicking the card opens the artifact panel — a resizable side panel for inspecting and interacting with code.

Opening the Artifact Panel

Click Open on any artifact card in the chat. The panel slides in from the right side of the screen.

You can resize the panel by dragging the divider between the chat and the panel.

Tabs

Code Tab

Shows the raw source code with syntax highlighting. Supported languages include HTML, CSS, JavaScript, TypeScript, Python, Rust, Go, SQL, Bash, JSON, YAML, and many more.

Preview Tab

Available for HTML and SVG files only. Renders the code in a sandboxed <iframe> so you can see the output live. The preview is isolated — it cannot access your data or make network requests.

Copying Code

Click the Copy button in the artifact panel toolbar to copy the full source to your clipboard.

Language Icons

Each artifact card shows a language icon (e.g. the Python logo for .py, the Docker whale for Dockerfiles). This makes it easy to scan responses that contain multiple code blocks.

Multiple Artifacts

If an AI response contains several code blocks, each becomes its own artifact card. Click any one to open it in the panel.

Clone this wiki locally