Browser Mockup

mac-style browser chrome with traffic lights, tabs (decorative or per-tab content), and URL bar. Render React children, liveUrl iframe, or static image - single-tab via props or multi-tab via tabs.

App preview

Live React UI inside the browser viewport.

Acme

Now in public beta

Launch pages that look ready on day one

A minimal landing preview inside browser chrome - nav, hero, and feature cards you can click through.

Ship faster

Pre-built sections and blocks you can paste into any app.

Stay on brand

Tokens and primitives that match your existing theme.

Preview anywhere

Drop mockups into docs, landings, and launch pages.

Live URL

Embed a remote page in the viewport. Many sites block iframes; try example.com or your own app.

Loading…

Live embed - many sites (e.g. Google) block iframes. Use your app or embed-friendly pages like example.com.

Browser variants

Chrome, Safari, Firefox, and Arc chrome styles with multi-tab chrome for landing-page mockups.

Chrome

Your landing page preview

Safari

Your landing page preview

Firefox

Your landing page preview

Arc

Your landing page preview

Interactive tabs

Per-tab children and URLs - switching tabs updates the viewport; each tab remembers its address bar value.

Home

Landing page preview - tab switches update the viewport and address bar.

Props

Name	Type	Default	Description
children	ReactNode	undefined	Screen content; overrides image when provided
image	string	undefined	Screen image when children are not provided
imageAlt	string	"Screen content"	Accessible alt text for the screen image
url	string	"app.example.com"	URL in the chrome bar; also used as iframe src when it starts with http(s)
liveUrl	string	undefined	Remote page to embed (iframe). Ignored when children are set. https only.
onNavigate	(url: string, liveSrc: string \| null) => void	undefined	Fired when the user commits the editable address bar (Enter)
showLiveEmbedHint	boolean	true	Show embed limitations hint below live iframe
sandbox	string	"allow-scripts allow-forms"	iframe sandbox tokens for liveUrl mode; tighten for demos or widen when you trust the embed
reloadOnUrlChange	boolean	true	Remount iframe on navigation; false updates src in place instead
variant	BrowserChromeVariant	"chrome"	Browser chrome styling; see BROWSER_MOCKUP_VARIANTS on the component
tabs	string[] \| BrowserMockupTab[]	derived from url + New Tab	Tab chrome (max 3). Label-only strings are decorative; tabs with children, image, url, or liveUrl switch viewport and address bar per tab
showTabs	boolean	true	Show variant-specific tab UI in the chrome bar
defaultActiveTab	number	0	Initial active tab index when uncontrolled
defaultActiveTabId	string	undefined	Initial active tab id when uncontrolled; overrides defaultActiveTab when matched
activeTabIndex	number	undefined	Controlled active tab index
activeTabId	string	undefined	Controlled active tab id
onTabChange	(tab: BrowserMockupTab, index: number) => void	undefined	Fired when the user selects a tab
viewportClassName	string	undefined	Extra classes on the scrollable screen viewport (children mode)
screenScrollable	boolean	true when children	Enable vertical scroll inside the screen when using children
className	string	undefined	Classes for the outer frame container