Web Preview
The Web Preview component provides a flexible way to showcase the result of a generated UI component, along with its source code. It is designed for documentation and demo purposes, allowing users to interact with live examples and view the underlying implementation.
Installation
If you prefer using jsrepo, please install via the command below:
Usage
Usage with AI SDK
Build a simple v0-like clone that generates UI components and previews them in real-time using useChat and the v0-sdk.
First, install the v0-sdk package:
Add the following component to your frontend:
+page.svelte
Add the following route to your backend:
/api/chat/+server.ts
Features
- Live preview of UI components
- Composable architecture with dedicated sub-components
- Responsive design modes (Desktop, Tablet, Mobile)
- Navigation controls with back/forward functionality
- URL input and example selector
- Full screen mode support
- Console logging with timestamps
- Context-based state management
- Consistent styling with the design system
- Easy integration into documentation pages
Props
WebPreview
| Prop | Type | Default | Description |
|---|---|---|---|
defaultUrl | string | "" | Default URL to display in the preview |
onUrlChange | (url: string) => void | - | Callback function called when the URL changes |
class | string | - | Additional CSS classes to apply to the container |
children | Snippet | - | Child components (typically WebPreviewNavigation and WebPreviewBody) |
WebPreviewNavigation
| Prop | Type | Default | Description |
|---|---|---|---|
class | string | - | Additional CSS classes to apply to the navigation bar |
children | Snippet | - | Navigation content (typically WebPreviewUrl and WebPreviewNavigationButton) |
WebPreviewNavigationButton
| Prop | Type | Default | Description |
|---|---|---|---|
onclick | (event: MouseEvent) => void | - | Click handler for the button |
disabled | boolean | - | Whether the button is disabled |
tooltip | string | - | Tooltip text to display on hover |
children | Snippet | - | Button content (typically an icon) |
WebPreviewUrl
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | - | Current URL value (bindable) |
onchange | (event: Event) => void | - | Change event handler |
onkeydown | (event: KeyboardEvent) => void | - | Keydown event handler (Enter key updates the preview URL) |
class | string | - | Additional CSS classes to apply to the input |
WebPreviewBody
| Prop | Type | Default | Description |
|---|---|---|---|
src | string | - | URL to display in the iframe (overrides context URL) |
loading | Snippet | - | Loading state content to display |
class | string | - | Additional CSS classes to apply to the iframe |
WebPreviewConsole
| Prop | Type | Default | Description |
|---|---|---|---|
logs | LogEntry[] | - | Array of console log entries to display |
class | string | - | Additional CSS classes to apply to the console container |
children | Snippet | - | Additional console content |