Case Study: Scaling Demo Generation with Mockuper

The Challenge: Presenting the Mermaid Theme

When we set out to build the landing page for our new Mermaid CMS theme, we faced a classic developer dilemma: showcasing dynamic, highly-configurable UI themes effectively without spending days taking manual screenshots.

Our requirement was seemingly simple. We needed high-quality, pixel-perfect screenshots of various theme layouts—Top Minimal, Centered, and Sidebar variants—to display as interactive demo cards. However, whenever we tweaked a margin, updated a shadow, or refined the typography, every single screenshot became instantly outdated. The manual process of loading the page, resizing the browser, capturing the screen, and cropping it perfectly was becoming a massive bottleneck.

The Solution: Enter Mockuper

To solve this, we turned to Mockuper, an automated screenshot and mockup generation script leveraging Puppeteer. Instead of treating screenshots as an afterthought, we integrated them directly into our build and presentation workflow.

Here’s how Mockuper revolutionized our process:

• Absolute Consistency: Mockuper ensures every screenshot is captured at the exact same viewport resolution, ensuring our demo cards align perfectly without manual cropping.
• Rapid Iteration: We integrated a script (`generate_and_copy.js`) that automatically spins up a headless browser, renders our local development environment, captures the precise variants of our Classic theme, and drops the web-optimized images directly into our production asset pipeline.
• Always Up-To-Date: Whenever we update our CSS or Twig layouts, a single command regenerates the entire gallery of showcase images. Our marketing materials are never out of sync with our codebase.

The Result

By automating the visual asset generation for our landing page, Mockuper didn't just save us time; it gave us the freedom to experiment. We were able to rapidly iterate on the order of our demo cards—prioritizing the "Top Minimal" and "Centered" layouts—knowing that the visual assets supporting them were flawless and instantly reproducible.

For any team building UI themes, templates, or SaaS dashboards, treating your screenshots as code is a game-changer. Mockuper handles the tedious pixels, letting us focus on what really matters: building a beautiful product.