Artifacts

Code editor and live preview for websites, documents, and code generated in chat

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

Review in preview mode
Switch to code view to edit
Ask AI for modifications
See changes in real-time

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

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

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

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

Chat Artifact Formats

When you ask for one of these in chat, Kolbo automatically detects the format request and builds a self-contained artifact you can preview, edit in Canvas mode, download, and share.

Presentations

Ask for a slide deck and chat builds a viewport-locked HTML presentation - pitch decks, product demos, classroom lessons, conference talks, or internal reviews:

Every slide fits the screen with no scrolling, one idea per slide
Arrow-key navigation, on-screen prev/next buttons, a slide counter, and a progress bar
Fullscreen mode and number-key jumps to any slide
A distinct aesthetic and real content shaped to your topic, with right-to-left support for Hebrew and Arabic

Example: "Make a pitch deck for a coffee subscription startup."

Landing Pages

Ask for a landing page and chat builds a single-page marketing site - product pages, app launches, SaaS sign-up pages, or event pages:

Hero section, features or benefits, how-it-works, social proof, pricing, FAQ, and a final call to action
One clear goal and a primary call to action that every section pulls toward
A committed visual direction, distinctive typography, and responsive mobile layout
Right-to-left support for Hebrew and Arabic

Example: "Build a landing page for a meditation app with hero, features, and pricing."

Interactive HTML and Visual Code

Ask for anything else visual and interactive and chat builds it as a working artifact - dashboards, data visualizations, widgets, animated components, mini-games, UI mockups, charts, and tools:

KPI dashboards with cards, tables, and filterable views
Charts and data visualizations (bar, line, pie, network graphs, maps)
Interactive widgets like calculators, configurators, and color pickers
Mini-games such as snake, tetris, or memory match
Renders your real data verbatim when you provide it, with hover, focus, and keyboard states handled

Example: "Create an interactive sales dashboard with monthly revenue charts and a region filter."

Tip: Toggle Canvas mode in the chat input for a live preview with hot reload. Without Canvas, the chat still renders the artifact as a previewable card.