Skip to content
GaudiGaudi Design System home

Search documentation

Search every page, heading and paragraph.

WebPreview

A framed browser for a live or generated page: back, forward and reload, an editable address bar, open in a new tab, device widths, a sandboxed iframe with a loading state, an optional console, and a link preview card when a site refuses framing.

CoreMedia & Previews@gaudi/design-system/core/WebPreviewView in StorybookSource

Installation

pnpm add github:ahmadassaf/design-system

Import from @gaudi/design-system. Load @gaudi/design-system/global.css once and add transpilePackages: ['@gaudi/design-system'] in Next.js.

import WebPreview from '@gaudi/design-system/core/WebPreview';

Usage

import { WebPreview } from '@gaudi/design-system';
<><WebPreview  defaultUrl='https://preview.example.dev/'  srcDoc={(url) => generatedPages[url]}  logs={logs}  title='Generated landing page'/>
{/* A site that refuses framing: the app knows from the headers. */}<WebPreview defaultUrl='https://github.com/vercel/next.js' embeddable={false} /></>

Examples

Playground

Storybook

AI message with web preview

Storybook

Blocked embed

Storybook

Controlled navigation

Storybook

API

16 props

Accessibility

The toolbar is a labelled toolbar of named buttons, the address bar is a labelled text field that flags unusable input in an alert, the width toggle is a radio group, the iframe has a title, the body is aria-busy while loading, and the console is a disclosure over a role="log" list.

Notes

  • Compose WebPreviewRoot, WebPreviewNavigation, WebPreviewHistoryButtons, WebPreviewUrl, WebPreviewOpenButton, WebPreviewDevices, WebPreviewBody and WebPreviewConsole for a different toolbar.
  • Browsers do not report blocked frames, so the app decides embeddable (for example from X-Frame-Options read by its preview endpoint).
LinkPreviewA link enriched with what the destination is. One normaliser, normalizeLinkPreview, turns the app's preview payload into a kind (repository, video, article, social post, docs, Wikipedia, package, image, file, internal post or website) and the rich fields that kind earns; three variants present it.EmbedThe shared preview vocabulary for messages and content: one switch that hands each piece of content to its owner. Links go to LinkPreview, code to CodeBlock, generated pages to WebPreview; images and videos default to a LinkPreview card until you pass a renderer.