Embed

The shared preview vocabulary for messages and content: one switch that hands each piece of content to its owner.

CoreMedia & Previews@gaudi/design-system/core/EmbedView in Storybook Source

Links go to LinkPreview, code to CodeBlock, generated pages to WebPreview; images and videos default to a LinkPreview card until you pass a renderer.

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 Embed from '@gaudi/design-system/core/Embed';

Usage

import { Embed } from '@gaudi/design-system';
<><Embed url='https://github.com/ahmadassaf/design-system' /><Embed code={source} language='html' filename='index.html' /><Embed url='https://preview.example.dev/' html={generatedHtml} title='Generated page' /><Embed src='/images/diagram.png' alt='Architecture diagram' components={{ image: ImageWithLightbox }} /></>

Examples

Playground

Storybook

API

10 props

Accessibility

Embed adds no markup of its own beyond a wrapper; accessibility comes from the owner it renders. Give images alt text and generated pages a title.

Notes

resolveEmbedType(content) is pure, so a message parser can classify parts before rendering.

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.CodeBlockCodeBlock renders syntax-highlighted source with an optional header, copy button, line numbers, highlighted and focused lines, diffs, folding and line selection.10 examples WebPreviewA 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.LinkLink centralizes navigation semantics for internal, anchor, and external links.CodeArticle code rendered through the Core CodeBlock: CodeFence maps MDX pre, CodeGroup renders ::: code-group fences as tabs.