react-uiframe

React UIFrame is a lightweight CLI-based emulator to preview and test your web projects across multiple devices—mobiles, tablets, laptops, watches, and TVs—directly in your browser. Quickly check responsiveness without resizing windows or opening multiple devices.

🚀 Features

• Preview your project on multiple devices:
  • Mobile: iPhone 14/15, Samsung S24 Ultra, Pixel 8 Pro
  • Tablet: iPad Pro 11"/12.9"
  • Laptops: MacBook Pro 14"/16", Surface Laptop Studio
  • Watches: Apple Watch Ultra 2
  • TVs & Monitors: Studio Display, 1080p & 4K TVs
• Portrait and Landscape modes (where applicable)
• Auto-detect running projects on common ports (3000, 5173, 8080, 4200)
• Simple CLI with customizable port and project URL
• Seamless switching between devices in a single UI
• Minimal setup, works with any frontend framework

📦 Installation

Global

npm install -g react-uiframe

Local (Dev Dependency)

npm install --save-dev react-uiframe

💻 Usage

Start the Emulator

npx uiframe start

• Automatically detects running projects.
• Opens a local UI for device previews.

Custom URL

npx uiframe start --url http://localhost:5000

Custom Port

npx uiframe start --port 4001

Example Output

🚀 uiframe emulator running!
   Previewing: http://localhost:5173
   Emulator UI: http://localhost:4000

🖥 Supported Devices

| Device | Category | Modes | | --------------------- | -------- | -------------------- | | iPhone 14 Pro | Mobile | Portrait & Landscape | | iPhone 15 | Mobile | Portrait & Landscape | | Samsung S24 Ultra | Mobile | Portrait & Landscape | | Google Pixel 8 Pro | Mobile | Portrait & Landscape | | iPad Pro 12.9" | Tablet | Portrait & Landscape | | iPad Pro 11" | Tablet | Portrait & Landscape | | MacBook Pro 14" | Laptop | Landscape only | | MacBook Pro 16" | Laptop | Landscape only | | Surface Laptop Studio | Laptop | Landscape only | | Apple Watch Ultra 2 | Watch | Portrait only | | Studio Display 1440p | TV | Landscape only | | TV 1080p | TV | Landscape only | | 4K TV Display | TV | Landscape only |

📷 Screenshots / Demo

Emulator UI Preview

Device Switching Example

🔧 How It Works

• Express serves the emulator UI.
• EJS templates render device frames.
• Axios & detect-port detect running projects automatically.
• Uses device mockups from MockUPhone for realistic previews.

🤝 Contributing

Contributions are welcome! You can:

• Add more devices
• Improve UI/UX
• Add features like screenshots or orientation toggles

Open an issue or PR to contribute.

📝 License

MIT © Prashant