Svelte AI Elements

Web Preview

The Web Preview component provides a flexible way to showcase the result of a generated UI component, along with its source code.

Installation

pnpm dlx shadcn-svelte@latest add https://svelte-ai-elements.vercel.app/r/web-preview.json

If you prefer using jsrepo, please install via the command below:

pnpm dlx jsrepo add @ai/elements/ai-elements/web-preview

Props

WebPreview

Name	Type	Default
`defaultUrl`	`string`	`""`
`onUrlChange`	`(url: string) => void`
`class`	`string`
`children`	`Snippet`

WebPreviewNavigation

Name	Type	Default
`class`	`string`
`children`	`Snippet`

WebPreviewNavigationButton

Name	Type	Default
`onclick`	`(event: MouseEvent) => void`
`disabled`	`boolean`
`tooltip`	`string`
`children`	`Snippet`

WebPreviewUrl

Name	Type	Default
`value`	`string`
`onchange`	`(event: Event) => void`
`onkeydown`	`(event: KeyboardEvent) => void`
`class`	`string`

WebPreviewBody

Name	Type	Default
`src`	`string`
`loading`	`Snippet`
`class`	`string`

WebPreviewConsole

Name	Type	Default
`logs`	`LogEntry[]`
`class`	`string`
`children`	`Snippet`