simulator-component

A lightweight web component that wraps HTML content in realistic Apple device frames. No dependencies, no build tools required - just vanilla JavaScript.

Features

• 🎨 Multiple device types (iPhone 15, iPhone 15 Pro, iPhone 14, iPad, iPad Pro)
• 🎯 Accurate device details (Dynamic Island, notch, home indicator)
• 🌈 10 color options matching real Apple devices
• 📱 Portrait and landscape orientations
• 🪶 Lightweight - no dependencies
• ⚡ Easy to use - just wrap your content
• 🔧 Customizable via attributes

Installation

npm

npm install simulator-component

CDN

<script src="https://unpkg.com/simulator-component@latest/simulator-component.js"></script>

Direct Download

Download simulator-component.js and include it in your project:

<script src="path/to/simulator-component.js"></script>

Usage

<!-- Basic usage -->
<simulator-component device="iphone-15">
  <div>Your content here</div>
</simulator-component>

<!-- With options -->
<simulator-component device="iphone-15-pro" color="white" orientation="landscape">
  <img src="screenshot.png" alt="App screenshot">
</simulator-component>

API

Attributes

Attribute	Type	Default	Description
device	string	"iphone-15"	Device type to display
color	string	"black"	Device frame color
orientation	string	"portrait"	Device orientation

Device Types

• iphone-15 - iPhone 15 with Dynamic Island
• iphone-15-pro - iPhone 15 Pro with thinner bezels
• iphone-14 - iPhone 14 with notch
• ipad - Standard iPad
• ipad-pro - iPad Pro with thinner bezels

Colors

• black - Black/Space Black
• white - White/Silver
• silver - Silver aluminum
• gold - Gold finish
• space-gray - Space Gray
• midnight - Midnight (dark blue)
• starlight - Starlight (cream)
• blue - Blue
• purple - Purple
• red - Product RED

Examples

Basic iPhone Display

<simulator-component device="iphone-15" color="midnight">
  <div style="background: linear-gradient(to bottom, #667eea, #764ba2); 
              height: 100%; display: flex; align-items: center; 
              justify-content: center; color: white;">
    <h1>Hello World</h1>
  </div>
</simulator-component>

iPad in Landscape

<simulator-component device="ipad" color="silver" orientation="landscape">
  <iframe src="https://example.com" style="width: 100%; height: 100%; border: none;"></iframe>
</simulator-component>

Dynamic Device Switching

const simulator = document.querySelector('simulator-component');

// Change device
simulator.setAttribute('device', 'iphone-15-pro');

// Change color
simulator.setAttribute('color', 'gold');

// Toggle orientation
const currentOrientation = simulator.getAttribute('orientation') || 'portrait';
simulator.setAttribute('orientation', 
  currentOrientation === 'portrait' ? 'landscape' : 'portrait'
);

Styling

The component uses Shadow DOM for encapsulation. To style the content inside:

/* Your content fills the entire screen area */
simulator-component > * {
  width: 100%;
  height: 100%;
}

Browser Support

• Chrome/Edge: ✅ Full support
• Firefox: ✅ Full support
• Safari: ✅ Full support
• IE11: ❌ Not supported (no Web Components support)

Demo

Check out the demo.html file for a complete example with interactive controls.

# If installed via npm
npm run demo

# Or open directly
open demo.html

License

MIT

Contributing

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

Credits

Inspired by Apple's device frames from their Design Resources.