Navigate a local page preview
Loading preview…
Console (1)
- info ·
Calendar example loaded. No external calendar is connected.
Web preview
Provides URL navigation, a sandboxed iframe and a collapsible console of supplied log messages.
Preview
Loading preview…
Console (1)
- info ·
In action
When to use
Use it for
- Preview a supplied http/https URL, local path or about:blank.
- Use url/onUrlChange for controlled navigation. Optional onBack/onForward callbacks and canGoBack/canGoForward flags let the host own history.
- Pass frameProps for explicit iframe permissions and native load/error events; the default does not grant same-origin access.
- Supply logs from a trusted application channel. maxLogEntries bounds the visible console tail.
Avoid
- Evaluating JavaScript URLs or embedding executable data URLs in the address field.
- Claiming automatic console capture from a cross-origin iframe.
- Treating iframe load as proof that a provider page accepted framing or successfully ran its application.
Install
React package
npm install @noorddev/vlak-react
Load the stylesheet once at your app root, then import the components you use.
import "@noorddev/vlak-react/css";
import { WebPreview } from "@noorddev/vlak-react";Per-component imports are available at @noorddev/vlak-react/components/web-preview.
Copy the source
npx @noorddev/vlak-cli add web-preview
Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.
shadcn registry
npx shadcn add https://vlak.dev/r/web-preview.json
Installs the same source through the shadcn CLI.
React
import { WebPreview } from "@noorddev/vlak-react";
<WebPreview title="Generated page" defaultUrl="about:blank" frameProps={{ height: 320 }} logs={[{ level: "info", message: "Preview ready" }]} />See the integration example to compose these components with your application's model and data.
Props
isPreviewUrl (function)
WebPreview
URL navigation and a sandboxed iframe with host-supplied console messages.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Web preview" | |
url | string | ||
defaultUrl | string | "about:blank" | |
onUrlChange | (url: string) => void | ||
onBack | () => void | ||
onForward | () => void | ||
canGoBack | boolean | false | |
canGoForward | boolean | false | |
onReload | () => void | ||
logs | WebPreviewLog[] | [] | |
maxLogEntries | number | 200 | |
frameProps | Omit<DetailedHTMLProps<IframeHTMLAttributes<HTMLIFrameElement>, HTMLIFrameElement>, "title" | "children" | "src" | "srcDoc"> | iframe permissions remain application-controlled; scripts and forms are allowed without same-origin access by default. |
Also accepts Omit<HTMLAttributes<HTMLElement>, "title">.
The ref reaches HTMLElement.
Keyboard
| Keys | Does |
|---|---|
| Tab | Tab reaches enabled navigation controls, the address, iframe and console disclosure. |
| Enter, Space | Enter in the address field requests navigation; Enter or Space activates the focused button. |
Accessibility
- The iframe, address, navigation form and console list have accessible names.
- URL validation is visible and invalid protocols never reach iframe src.
- Controlled navigation leaves the previous source in place until the host supplies a new url.
- Log levels use text and messages are escaped; history and external application behavior remain host-owned.
Markup
The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.
npm install @noorddev/vlak
import "@noorddev/vlak/css";
<section class="rs-web-preview" aria-label="Calendar preview"><div class="rs-web-preview-body"><iframe class="rs-widget-embed" title="Calendar preview" src="about:blank" sandbox="allow-scripts allow-forms" loading="lazy" referrerpolicy="no-referrer"></iframe></div><p class="rs-web-preview-status" role="status">Preview loaded.</p></section>
Classes
.rs-web-preview.rs-web-preview-navigation.rs-web-preview-address.rs-web-preview-body.rs-web-preview-status.rs-web-preview-console.rs-web-preview-logs.rs-web-preview-log.rs-web-preview-level.rs-web-preview-message
Depends on
Use elsewhere
More in AI
ChatConversationResponseResponse markdownMessage composerResponse actionsResponse branchResponse editorConversation exportAttachmentsSuggestionsModel selectorContext usageCheckpointReasoningThought stepsPlanTaskWork queueTool callConfirmationInline citationSourcesShimmerWidgetGenerated imageOpen in chatWidget patternsHighlighted codeAgentFile treeArtifactSnippetCommitEnvironment variablesPackage infoSchema displayTest resultsStack traceTerminalSandboxJsx previewAudio playerMic selectorSpeech inputTranscriptionVoice selectorPersonaWorkflow canvas