BrowserBar and DeviceFrame

A page preview: back, forward, reload or stop, the address and the preview size, over a frame that simulates a screen width. Pick it for previewing a site while working on it; the frame holds an iframe in an app.

BrowserBar
DeviceFrame

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, BrowserBar and DeviceFrame

Tablet, 820 px

localhost:5173/settings

Settings

A stand-in for the previewed page. Type an address with “offline” in it and press Enter to see the error.

Dark theme, BrowserBar and DeviceFrame

Tablet, 820 px

localhost:5173/settings

Settings

A stand-in for the previewed page. Type an address with “offline” in it and press Enter to see the error.

High contrast theme, BrowserBar and DeviceFrame

Tablet, 820 px

localhost:5173/settings

Settings

A stand-in for the previewed page. Type an address with “offline” in it and press Enter to see the error.

UsageLink to the section Usage

tsx

import { BrowserBar, DeviceFrame } from '@skribly/ui/code'

tsx

<BrowserBar label={t('preview.controls')} addressLabel={t('preview.address')}
  address={address} onAddressChange={setAddress} onNavigate={go}
  backLabel={t('nav.back')} forwardLabel={t('nav.forward')} reloadLabel={t('nav.reload')}
  onBack={back} onReload={reload} canGoBack={canGoBack} isLoading={loading} loadingLabel={t('preview.loading')}
  devices={devices} device={device} onDeviceChange={setDevice} deviceLabel={t('preview.size')} />
<DeviceFrame label={t('preview.page')} width={820} caption="Tablet · 820 px" isLoading={loading}
  loadingLabel={t('preview.loading')}>
  <iframe title={t('preview.page')} src={url} />
</DeviceFrame>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The bar is a named group of buttons with names and tooltips, an address form (Enter navigates, focus selects the text) and a radio group of sizes whose names are read and shown in words on wide bars.
Back and forward turn off when there is nowhere to go.
The frame is a named region; loading shows a named spinner, and an error replaces the page as an assertive alert with an icon and a word.
The frame never grows past its box and its width change stops under reduced motion.

This demo runs through axe in all three themes on every test run. See what the tests check.