Viewport Playground 📱💻
A powerful, isolated viewport testing component for Svelte 5. Test your application's responsiveness in real-time with curated device presets, all within your own development environment.
Key Features
- 🛡️ Style Isolation: Built with
all: initialand scoped CSS to ensure the playground UI is never affected by your application's global styles. - 📱 Device Presets: Includes common mobile, tablet, and desktop viewports.
- 🔄 Orientation Toggle: Switch between portrait and landscape modes instantly.
- 🖼️ Flexible Wrapping: Choose between
iframe(perfect for true isolation) ordivwrappers. - 🌐 URL Sync: Test different routes of your application directly from the toolbar.
Installation
npm install viewport-playground
Usage
Wrap your application (usually in +layout.svelte) with the ViewportPlayground component.
<script>
import { ViewportPlayground, enterPlayground } from 'viewport-playground';
</script>
<ViewportPlayground>
<!-- Your App Content -->
{@render children()}
<!-- Button to launch the playground -->
<button onclick={enterPlayground} class="your-btn">
Open Viewport Playground
</button>
</ViewportPlayground>
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
wrapper |
'iframe' | 'div' |
'iframe' |
The element used to wrap your application content. |
defaultOpen |
boolean |
false |
Whether the playground should be active by default. |
disabled |
boolean |
false |
Disable the playground functionality. |
url |
string |
'/' |
Initial URL for the iframe (if using iframe wrapper). |
Exported Functions
enterPlayground(): Activates the playground view.exitPlayground(): Deactivates the playground view.
Style Isolation
The component is designed to be completely independent. We use a combination of:
all: initialon root elements to block inheritance from the parent app.- Scoped CSS to prevent internal styles from leaking out.
- Explicit
box-sizing: border-boxand standard font stacks for consistent look and feel.
Built with ❤️ by AnsBdran
