BrowserWindow Component

A React component that wraps content in a styled browser window frame. Useful for displaying components, demos, or code examples in a browser-like container.

http://localhost:3000

Example Content

This content is displayed inside a browser window frame.

Overview

The BrowserWindow component creates a visual browser frame with:

• Traffic light buttons (red, yellow, green)
• Address bar with customizable URL
• Hamburger menu icon
• Styled border and rounded corners

Basic Usage

import BrowserWindow from '@site/src/components/browserWindow';

<BrowserWindow>
  <YourContent />
</BrowserWindow>

Props

Prop	Type	Default	Description
children	ReactNode	-	Content to display inside the browser window
url	string	'http://localhost:3000'	URL displayed in the address bar

Examples

Default URL

<BrowserWindow>
  <div>Your content here</div>
</BrowserWindow>

Custom URL

<BrowserWindow url="https://example.com">
  <div>Your content here</div>
</BrowserWindow>

With Component

import BrowserWindow from '@site/src/components/browserWindow';
import PhotoCollage from '@site/src/components/photoCollage/photoCollage';

<BrowserWindow>
  <PhotoCollage />
</BrowserWindow>

Styling

The component uses CSS variables for theming:

• Border color: var(--ifm-color-emphasis-200)
• Background color: var(--ifm-background-color)
• Header background: var(--ifm-color-emphasis-200)

These automatically adapt to your theme's color scheme.

Use Cases

• Displaying component demos
• Showing code examples in context
• Creating visual documentation
• Presenting interactive examples