WebStage: Your Mac as a Backstage Controller for Multiple Displays
Have you ever needed to display multiple dashboards, web pages, or live data feeds on external displays? Maybe for a presentation, digital signage, monitoring dashboards, or just testing responsive designs side-by-side? The usual solution involves juggling browser windows, dealing with tab chaos, and constantly switching between screens. There had to be a better way.
That's why I built WebStage—a macOS application that gives you a "backstage" control window where you orchestrate everything, while your "stage" window displays beautiful, borderless web content on any connected display. Think of it like a production control room, but for web views.
Honestly, I built this for myself. It's a fun problem to work on as it's very technical, has lots of moving parts. At this point, I have a solution that works for me. Let me know if you think it could be something you're interested in, and I could try to make a version available for the downloads.
See It In Action
The Two-Window Philosophy
WebStage is built around a simple but powerful concept: Backstage and Stage.
Backstage: Your Private Control Room
This is where you work. The Backstage window stays on your laptop or main display, giving you complete control:
- Add and manage web URLs with drag-and-drop or simple paste
- Switch between different window groups (like scenes in a theater production)
- Choose from 6 flexible layouts: auto-grid, vertical/horizontal stacks, focus mode, 2×2, or 3×3 grids
- Adjust zoom (50% to 400%) and rotation (90° increments) for individual windows
- Position the Stage window precisely with one-click snap controls
Stage: The Star of the Show
The Stage window is what your audience sees—a clean, borderless display that you can send to:
- External monitors connected via cable
- AirPlay displays for wireless convenience
- Chrome TV app (yes, I built one!) for dedicated display hardware
The Stage shows your web content in beautiful arrangements without any browser chrome, menu bars, or distractions. Just pure content.
Quick Links
- Live App: WebStage.app
- Download: Free for macOS 26+
- Chrome TV: Available for compatible displays
- iOS Remote: Control themes and settings from your phone
The Technical Stack
Building WebStage was a journey across multiple platforms:
Electron App (macOS)
The main application is built with Electron, giving me:
- Native macOS integration with full window management
- Multiple display support with precise positioning
- Web view rendering with Chromium
- TypeScript for type safety
- React for the Backstage UI
- Tailwind CSS for rapid styling
- Vite for lightning-fast development builds
The architecture separates concerns beautifully—the main process handles window management and display routing, while renderer processes manage the UI and web content display.
The SwiftUI Alternative
Here's where things get interesting: I also built a native SwiftUI version of WebStage, derived from the Electron app. Why? Because I believe native macOS apps provide a better overall user experience—tighter system integration, better performance, more native feel.
The SwiftUI version brings:
- True native macOS experience with SwiftUI
- Better memory efficiency
- Tighter integration with macOS features
- Smaller app size
But there's a trade-off: macOS's WKWebView API has limitations compared to Chromium. The web rendering isn't quite as robust, forget about single sign-on websites, and some complex web applications don't behave identically. It's the classic native vs. web debate playing out in a single app.
For now, both versions exist. The Electron version gives you maximum web compatibility, while the SwiftUI version gives you that pure Mac experience. I'm still evaluating which direction makes the most sense long-term.
Chrome TV Application
For dedicated display hardware, I built an Android TV app using:
- Kotlin and modern Android development patterns
- WebView components for content rendering
- Network communication to receive commands from the Backstage
- Custom UI optimized for TV displays
This means you can have dedicated Chrome TV devices as your display endpoints, making WebStage a true multi-platform solution.
iOS Remote App
The iOS remote lets you control WebStage from your phone:
- SwiftUI for native iOS experience
- Network discovery to find WebStage instances
- Theme switching and layout control
- Perfect for making quick adjustments during presentations
Development Insights
The Electron Journey
Building with Electron gave me the best of both worlds: web technologies I know well, combined with native macOS capabilities. The window management APIs are particularly powerful—I can programmatically control every aspect of window positioning, display routing, and even AirPlay discovery.
One challenge was ensuring smooth performance when displaying multiple web views simultaneously. Each web view runs in its own process, which helps with stability but requires careful memory management. The solution involved:
- Lazy loading web views only when needed
- Efficient state management to prevent unnecessary re-renders
- Proper cleanup when switching between window groups
Cross-Platform Display Routing
Getting content from the Mac to Chrome TV devices required building a lightweight protocol:
- WebSocket connections for real-time communication
- JSON messages for layout and content updates
- Fallback mechanisms for network interruptions
- Auto-discovery using mDNS/Bonjour
The iOS Remote Challenge
The iOS app needed to work seamlessly across different network configurations. Using SwiftUI made the UI development surprisingly pleasant, and Combine helped manage the asynchronous network communication patterns.
Design Decisions
Why Six Layouts?
After testing with various use cases, I settled on six layouts that cover 90% of scenarios:
- Auto Grid: Intelligently arranges windows based on count
- Vertical Stack: Perfect for comparing tall content
- Horizontal Stack: Great for side-by-side comparisons
- Focus Mode: One large window takes center stage
- 2×2 Grid: Classic four-up display
- 3×3 Grid: Maximum density for monitoring dashboards
The Window Groups Metaphor
I borrowed the concept of "scenes" from theater production. Just like a stage manager switches between scenes, you can save different configurations as groups and switch between them instantly. This is crucial for:
- Events that need different content at different times
- Rotating between information displays throughout the day
- A/B testing different layouts
Zoom & Rotation
Not all web content is designed for large displays. The precision zoom (50% to 400%) and rotation controls (90° increments) mean you can display portrait content like social media feeds or zoom into specific dashboard widgets.
Real-World Use Cases
Digital Signage
Transform any Mac-connected display into a dynamic information hub. Switch between content groups (menu boards, social feeds, announcements) with a single click. Perfect for lobbies, cafés, retail spaces, or corporate environments.
Monitoring Dashboards
Display up to 9 dashboards in a 3×3 grid. Zoom into specific metrics on demand, switch between different monitoring scenarios, and keep your ops team on top of everything without the tab sprawl.
Presentations & Demos
Compare different web sources side-by-side during presentations. Show live data next to documentation, or demo multiple environments simultaneously. Control everything from your laptop while the audience sees a polished Stage.
Development & Testing
Side-by-side comparison of dev, staging, and production. Test different screen resolutions with zoom controls. Monitor multiple local development servers without drowning in browser windows.
Retail & Hospitality
Combine menu boards with Instagram feeds, promotions, and ambient content. Create the perfect atmosphere with layouts that match your space.
What's Next
WebStage is actively evolving. Some features on the roadmap:
- Custom widgets: Beyond just web URLs, dedicated widgets for weather, clocks, etc. Check out the list of existing widgets.
- Scheduling: Automatically switch between groups at specific times
- Cloud sync: Share your configurations across multiple Macs. 🤔 Maybe not, do I really want to introduce some server-side layer?
- Templates: Pre-built setups for common scenarios
Lessons Learned
Building WebStage taught me several valuable lessons:
- Start with the core: I focused on the two-window model first, then expanded to multi-platform
- Build for yourself first: I created this to solve my own problem, with no expectation that others would care. Turns out, scratching your own itch produces authentic solutions.
- Electron isn't heavy: With proper optimization, Electron apps can be performant. But the size is big.
- Native vs. web is still a debate: The SwiftUI version feels more "Mac-like," but Chromium's web rendering is hard to beat
- Cross-platform is worth it: Having Chrome TV support opened up new use cases
- User testing is crucial: So if you want to try this out, please let me know.
Try It Yourself
If you want to try this out, please let me know.
Download: webstage.app - not available for download yet.
I'm genuinely curious: will anyone else find this useful? I built it for my own workflows—managing displays for demos, and needing different dashboards in my office. If you try it and have feedback, or if you're wondering whether I should lean into the Electron version or the SwiftUI version, I'd love to hear from you.
Whether you're managing digital signage, monitoring dashboards, delivering presentations, or testing web applications, just have several displays in your office/home then WebStage might just fit your needs too. One Mac. Multiple displays. Infinite possibilities.
Daniel Wanja is a developer and founder of Nouvelles Solutions, Inc. When not building apps, he's usually orchestrating multiple displays with WebStage.
