Claude Artifacts UI: Sandbox, Diff & Code Block Demos

Claude-style React media components: 6-band voice waveform, image lightbox, split pane, sandboxed Artifacts iframe, diff viewer, code block. 6 live demos.

Media and artifacts covers the interface around voice, images, code and Artifacts: the microphone waveform, the image viewer, the artifact split pane, the sandboxed iframe, the diff viewer and code blocks. The 6 demos on this page correspond to Chapter 5 of the v1 handbook; the official notification sounds are official assets and are not included. This page is a translation of the Chinese demo page.

Key values

Item	Value	Source
Voice waveform	`6 bands, non-linear Gamma mapping`	v1/05 §5.1.3
Split pane collapse threshold	`collapses when dragged within 18% of the edge`	v1/05 §5.3
Code block shell	`12px radius, 36px header`	v1/05 §5.5.4
Copy success feedback	`green check fades out after 2.5 seconds`	v1/05 §5.5.4

Voice waveform

During voice input, 6 bars show the volume. The demo can use your local microphone; no audio is uploaded.

6 频段非线性 Gamma 波形。idle 静止、connecting 自动摆动；点“用麦克风”后按真实音量跳动（只在本地处理，不上传）。官方提示音未收录。出处：v1/05 §5.1.3 · code-examples/LiveMicActivityBars.tsx

Image viewer

The image viewer zooms around the cursor and supports dragging, arrow keys to switch images and Esc to close.

占位图 1 — 点击缩略图打开：滚轮 / 双击以光标为锚点缩放，拖动平移，← → 切换，Esc 关闭。图片是生成的渐变占位图。出处：v1/05 §5.2 · code-examples/MediaLightboxViewer.tsx

占位图 2 — 点击缩略图打开：滚轮 / 双击以光标为锚点缩放，拖动平移，← → 切换，Esc 关闭。图片是生成的渐变占位图。出处：v1/05 §5.2 · code-examples/MediaLightboxViewer.tsx

Split pane

When the conversation and an artifact sit side by side, the divider in the middle can be dragged; double-click it to return to a 50/50 split.

会话区
左侧最小宽度示例里调小到 160px。

产物预览区

拖动中间分隔条调整比例；双击回到 50/50；拖到边缘 18% 以内会折叠。拖动时给 iframe 加遮罩，避免丢失指针。出处：v1/05 §5.3 · code-examples/ArtifactsSplitPaneResizer.tsx

Artifact sandbox

Artifacts run in a sandboxed iframe and talk to the host page through postMessage.

产物在 sandbox iframe（无 allow-same-origin）里运行，通过 postMessage 通信。只有真实点击（userActivation）发出的消息才会被接收。收到消息：暂无出处：v1/05 §5.4 · code-examples/EpitaxyIframeBridge.tsx

Diff viewer

Code changes are marked with added/removed line backgrounds, and you can switch between unified and split views.

config.tsts

+2-1

1	1		export const config = {
2		-	port: 3000,
	2	+	port: Number(process.env.PORT ?? 3000),
	3	+	host: '0.0.0.0',
3	4		debug: false,
4	5		};

正在接收差异流...

增删行用 --diffs-addition / --diffs-deletion；行号列 tabular-nums；可切换统一 / 分栏视图。出处：v1/05 §5.5 · code-examples/StreamingDiffViewer.tsx

Code block

Code blocks have a dark shell with a file name and a copy button.

</>typescript•hello.ts

1	export function hello(name: string) {
2	return `你好，${name}`;
3	}
4
5	console.log(hello("世界"));

12px 圆角深色外壳、36px 头部；点复制后显示绿色勾 2.5 秒再淡出（saved-check-decay）。出处：v1/05 §5.5.4 · code-examples/CodeBlock.tsx

How do I use these components in a project?

Copy the matching file from code-examples/ and import cds-theme.css. For example:

import { CodeBlock } from './CodeBlock';

<CodeBlock filename="hello.ts" language="typescript" code={src} />

Note: some labels inside the demo components are still in Chinese (they come straight from the repository's components); the behavior and specs are the same.

Sources

The specs on this page come from Chapter 5 of the v1 handbook, the component code comes from the repository's code-examples/, and browser APIs follow the MDN documentation.

open-claude-ui · code-examples/: LiveMicActivityBars.tsx, MediaLightboxViewer.tsx, ArtifactsSplitPaneResizer.tsx, EpitaxyIframeBridge.tsx, StreamingDiffViewer.tsx, CodeBlock.tsx.
MDN: Web Audio API: the API the voice waveform uses to read microphone volume.
MDN: The <iframe> element: the sandbox attribute behind the artifact sandbox.
MDN: Window.postMessage(): how the sandbox and the host page communicate.
MDN: Pointer events: the pointer events used by the split pane divider and image dragging.

Claude Artifacts UI: Media & Artifacts