Customer Show & Tell: Jakub Suchy: Demonstrating Technical Interfaces

At our NYC user meetup last year, we asked several top customers to present their most effective Navattic use case. In this series, we’ll share their tips and tricks for building interactive demos for specific demo use cases.

Jakub Suchy at HAProxy was one of our show-and-tell guests with a particularly unique use case: demoing technical interfaces (think command-line tools). Below, he explains how he moved beyond static screenshots or recordings to replicate the way engineers actually use software — the key to converting them into active users.

Unlike SaaS products with HTML-based interfaces, technical interfaces like Windows applications, Mac applications, or command-line tools don't naturally lend themselves to web-based demos.

You can't capture them as you would a standard web application.

Because of that, I've seen companies resort to static screenshots or basic screen recordings. But, in my opinion, that's not interactive enough.

I believe in creating demos that truly engage the audience and make them feel like they're experiencing the real product. My end goal is to use demos that convince customers and prospects that our product does what we say it does.

Early in my career, I had a boss who carried a small piece of paper with “So what?” written on it.

Whenever I presented a slide or gave a demo, he'd hold it up, challenging me to consider why anyone should care.

I’ll say it was extremely annoying. But I learned so much. It taught me to always focus on the value we're delivering to the customer.

So, when creating demos — especially for technical interfaces — I keep these two principles at the forefront:

1. Suspend the user’s disbelief. Make the demo believable enough that the viewer feels they're interacting with the real product (even if it's been recreated for the demo).
2. So what? Always highlight why the customer should care. What value does this demo provide? How does it solve their problem?

But there’s one more thing I keep in mind: anything can be recreated. It may not seem that way, but it’s true — here are four examples where I did just that.

1. Recreating Visual Studio Code for Okteto

Okteto provides Kubernetes development environments. Developers love Okteto because it allows them to quickly spin up Kubernetes environments and start coding.

The challenge here was showcasing that in a way that resonates with developers who primarily work within code editors like Visual Studio Code — not web interfaces.

To solve that problem, I created an interactive demo that replicated the experience of using Visual Studio Code within a browser-based environment. Here's how I did it:

1. I leveraged HTML versions of code editors. I discovered that Visual Studio Code has an HTML-based version, which meant I could run it as a web application.
2. I used a Red Hat Developer Sandbox to run Visual Studio Code in the cloud. It took me a while, but after searching extensively, I found a version that worked seamlessly for my needs.
3. I made HTML captures with Navattic. Once I had Visual Studio Code running in a browser, I used Navattic to capture the interface and create the interactive demo.
4. I added a few animations. To make the demo more engaging, I created animated GIFs that showed code being typed into the terminal and then manually inserted these into the Navattic interface to simulate a live coding experience.

All the research and prework paid off — the result was a highly interactive demo that made developers feel like they were actually coding within Visual Studio Code, which helped illustrate Okteto’s value prop.

See Okteto’s demo

2. Simulating Windows Interface for Nulia

Nulia offers hybrid storage solutions across Mac, Linux, and Windows platforms. But their actual SaaS platform doesn’t really tell people much.

What really shows the product’s value is how Nulia works within a Windows environment. And I wanted to show that without relying on static images or non-interactive videos.

Here's the approach I took:

1. I found a Windows Interface in HTML. On GitHub, someone had recreated the Windows 11 interface using HTML and React.
2. I ran it on a virtual machine. Being a technical person, it was fairly easy for me to set up the HTML-based Windows interface on a DigitalOcean virtual machine.
3. I customized the environment. Nulia wanted to highlight their ransomware protection features, so I modified the file names within the simulated Windows environment to reflect a ransomware scenario, like: “Your files are encrypted, pay me crypto.”
4. I created the interactive demo with Navattic. Using Navattic, I captured this customized Windows environment so that users felt like they were actually browsing through files and navigating a real Windows system.

These tricks allowed me to suspend users’ disbelief and showcase the true value of Nulia's solution.

3. Handling command-line interfaces

For many developer-focused products, the command-line interface (CLI) is the primary way users interact with the software.

But CLIs aren’t visually engaging and can intimidate non-technical viewers, making it tough to create a compelling demo. To address this, I tried making a demo myself by:

1. Using an HTML-based terminal emulator. These allow you to simulate a terminal within a browser. I used the Butterfly Terminal: https://github.com/paradoxxxzero/butterfly.
2. Implementing interactive commands. I configured the emulator to accept specific commands relevant to the product I was demonstrating — for example, npx commands for a Cloudflare demo.
3. Guiding users with buttons. While it's possible to allow users to type commands, it can complicate the demo experience. I opted to include a “Next” button instead so it was clear what users were supposed to do next.

This wasn't a real terminal, but it looked and behaved like one, effectively showcasing the product's functionality while keeping the demo user-friendly.

4. Recreating Mac Finder (with the help of AI)

As a bonus experiment, I wanted to see if I could recreate the Mac Finder interface quickly using AI tools. Here's how it went:

1. I started with a screenshot of my Finder window on macOS.
2. I asked Claude for help. I uploaded the screenshot to Claude AI and asked it to recreate the interface in HTML.
3. I refined Claude’s output. It took about 30 minutes of wrangling — I had to instruct Claude to change icon colors, adjust elements, and make other visual refinements.
4. I made some manual adjustments myself. Some elements just didn't render perfectly, like the red, yellow, and green window controls. I used a digital color meter to get the exact colors and manually adjusted them.

This was a pretty rapid-fire project. But it goes to show that with the right tools and some effort, you can recreate almost any interface for demo purposes.

Through these experiences, I've learned that when it comes to demonstrating technical interfaces:

• Anything (really anything) can be recreated. Whether it's a Windows environment, a Mac application, or a command-line interface, there are ways to simulate these experiences within a browser.
• Focus on the user experience. You don’t have to show users the real product — you just have to make them believe it’s the real product. By suspending disbelief, we can help users feel connected to our products.
• Answer the “So what?” Always consider why the viewer should care about what you're showing. Highlight the value and relevance to their needs.
• Leverage available tools. There are many resources out there — HTML versions of interfaces, AI tools like Claude, and open-source projects — that can help you recreate the user experience.
• Customize for your audience. To capture and sustain users’ attention, you must tailor your demos to their specific pain points and interests. For developers, that might mean showing code editors or terminals. For general users, it might mean familiar OS interfaces.

And I apply these learnings every day — not only in my full-time job as Director of Solutions and HAProxy but also as the owner of a small boutique consultancy.

At All Things Demo, I build demos for my clients that are not only technically accurate but also compelling and meaningful. If you’d like some help getting your technical demos off the ground, please don’t hesitate to reach out.

Check out other customer stories from our NYC user event.