Web Browser Component Examples

Basic Browser

A simple browser displaying a website:

https://docusaurus.io

Interactive Browser

A fully interactive browser with navigation controls (try clicking the navigation buttons and changing the URL):

https://example.com

Mock Content Browser

Perfect for showing website previews without external dependencies:

http://localhost:3000

Custom Content Browser

Display custom React content inside the browser frame:

http://localhost:3000

Mobile Browser

Optimized for mobile viewing:

https://m.example.com

Minimal Browser

Clean browser without navigation controls:

https://example.com

Direct Component Usage

You can also use the component directly with custom props:

https://github.com

Installation & Setup

1. Component Files

Create these files in your Docusaurus project:

src/
└── components/
    ├── WebBrowser.js          # Main browser component
    ├── WebBrowser.module.css  # Browser styles
    └── BrowserExamples.js     # Example components (optional)

2. Usage in MDX

import WebBrowser from '@site/src/components/WebBrowser';
import { BasicBrowser, InteractiveBrowser } from '@site/src/components/BrowserExamples';

<WebBrowser url="https://example.com" height="500px" />
<BasicBrowser />
<InteractiveBrowser />

3. Props Reference

Prop	Type	Default	Description
url	String	"https://example.com"	Initial URL to display
title	String	"Web Browser"	Browser window title
height	String	"600px"	Browser height
showNavigation	Boolean	true	Show navigation buttons
showAddressBar	Boolean	true	Show address bar
interactive	Boolean	false	Enable navigation controls
content	React Element	null	Custom React content
mockData	Object	null	Mock website data

4. Mock Data Structure

const mockData = {
  title: "Page Title",
  subtitle: "Page subtitle",
  sections: [
    {
      title: "Section Title",
      content: "Section content...",
    },
  ],
};

Use Cases

• Documentation: Show website examples and previews
• Tutorials: Demonstrate web applications step-by-step
• Design Systems: Display component galleries and style guides
• API Docs: Show endpoint responses and UI examples
• Mobile Examples: Demonstrate responsive designs

Features

✅ Realistic Browser UI - Complete with window controls and navigation
✅ Interactive Navigation - Working back/forward/refresh buttons
✅ Custom Content Support - Display React components or mock data
✅ Responsive Design - Works on desktop and mobile
✅ Theme Support - Adapts to light/dark themes
✅ Iframe Support - Display external websites
✅ Loading States - Animated loading indicators
✅ Keyboard Navigation - Address bar with enter key support

Security Note

When using iframe mode with external URLs, the component includes sandbox attributes for security. Some websites may not display due to X-Frame-Options headers. Use mockData or content props for guaranteed display.