iOS Simulator for Desktop

A professional, developer-centric iOS Simulator for testing web apps on your desktop.

This project solves the pain of testing mobile web experiences without needing a physical device or the heavy Xcode Simulator. It provides a lightweight, Electron-based environment that accurately mimics iOS behaviors, including safe areas, touch events, and virtual keyboards.

⚡ Key Features

• 📱 Accurate Device Emulation:

  • iPhone 13 Pro (Notch)
  • iPhone 14 Pro (Dynamic Island)
  • iPad Pro 11 (Tablet layout)
  • Matches accurate screen dimensions, pixel ratios, and user agents.

• 👆 True Touch Environment:

  • Force Touch Events: Automatically maps mouse interactions (mousedown/move/up) to native TouchEvents (touchstart/move/end).
  • Hover Disabled: Overrides matchMedia('(hover: hover)') to false to strictly enforce mobile behavior.
  • Max Touch Points: Polyfills navigator.maxTouchPoints to simulate a real touch screen.

• 📐 Safe Area & Notch Injection:

  • Automatically injects CSS variables into the simulated page:
    • --safe-area-inset-top
    • --safe-area-inset-bottom
  • Handles differences between Notch and Dynamic Island layouts.

• ⌨️ Virtual Keyboard Simulation:

  • Detects focus on inputs (text, password, email, etc.) and content-editable elements.
  • Slides up a glassmorphism keyboard overlay.
  • Adjusts the viewport and scrolls the focused element into view, mimicking iOS behavior.

• 🎨 Theme & UI Sync:

  • Light/Dark Mode: Toggles system-wide theme preferences, syncing with prefers-color-scheme.
  • Dynamic Theme Color: Observes meta[name="theme-color"] to update the simulator's frame and overscroll background.

• 🌐 Network & PWA Tools:

  • Network Throttling: Simulate slow connections (3G, 4G, Offline) via Electron's session API.
  • PWA Mode: Toggle between "Safari" (browser chrome) and "Standalone" (fullscreen) modes.

🛠️ How it Works (Under the Hood)

This simulator is built on Electron to leverage the <webview> tag, which provides a separate process for the simulated content.

1. Isolation: The simulated website runs in a sandboxed <webview> container, isolated from the simulator's UI.
2. Preload Scripts: We inject a preload.js script that bridges the gap between the host (Electron) and the guest (Webview).
3. Runtime Injection:
   • CSS: We inject CSS variables for safe areas directly into the :root of the loaded page.
   • Events: We intercept mouse events at the window level and re-dispatch them as TouchEvents to ensure your app reacts exactly as it would on a phone.
4. IPC Bridge: The main process communicates with the renderer to handle system-level tasks like network emulation and theme switching.

🚀 Installation & Usage

Prerequisites

• Node.js (v16 or higher)
• npm or yarn

Steps

1. Clone the repository

   git clone https://github.com/yourusername/ios-simulator-desktop.git
   cd ios-simulator-desktop

2. Install dependencies

   npm install

3. Run the Simulator

   npm start

   This command concurrently starts the Vite dev server for the UI and the Electron app.

4. Build for Production

   npm run build

📂 Project Structure

ios-simulator-desktop/
├── src/
│   ├── main/                 # Electron Main Process
│   │   ├── main.js           # Window creation & IPC handlers
│   │   └── preload.js        # Context bridge
│   ├── renderer/             # React UI (The Simulator Shell)
│   │   ├── components/
│   │   │   ├── Simulator.jsx # Core logic (Webview, Injection)
│   │   │   ├── Header.jsx    # Toolbar controls
│   │   │   └── ...
│   │   ├── App.jsx           # State management
│   │   └── constants.js      # Device definitions (sizes, UAs)
│   └── cli/                  # Helper modules
├── package.json
└── vite.config.js

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📄 License

Distributed under the MIT License. See LICENSE for more information.