Web Browser Component Examples

Basic Browser

A simple browser displaying a website:

Documentation Browser

⋯

🔒

Interactive Browser

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

Interactive Browser

⋯

🔒

Mock Content Browser

Perfect for showing website previews without external dependencies:

Sample Website

⋯

Welcome to Our Platform

Build amazing applications with our tools

Getting Started

Our platform provides everything you need to build modern web applications. Start with our comprehensive documentation and examples.

Features

Includes authentication, database integration, real-time updates, and deployment tools. Scale from prototype to production seamlessly.

Community

Join thousands of developers building with our platform. Get help, share ideas, and contribute to our open source projects.

Custom Content Browser

Display custom React content inside the browser frame:

API Documentation

⋯

API Reference

Authentication

POST /api/auth/login
Content-Type: application/json

{ "email": "user@example.com", "password": "securepassword" }

Response

{ "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...", "user": { "id": 1, "email": "user@example.com", "name": "John Doe" } }

Mobile Browser

Optimized for mobile viewing:

Mobile View

⋯

🔒

Minimal Browser

Clean browser without navigation controls:

Minimal Browser

⋯

Direct Component Usage

You can also use the component directly with custom props:

GitHub

⋯

🔒

GitHub Clone

Where developers collaborate

Repositories

Host and manage your code repositories with version control.

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/BrowserWindow/WebBrowser';
import { BasicBrowser, InteractiveBrowser } from '@site/src/components/BrowserWindow/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.