Capture screens

Overview

This guide provides an overview of the Walnut Extension’s browser compatibility, supported chart and table libraries, and best practices for accurate HTML captures. It also covers important limitations to keep in mind. 

---

Getting Started

• Download the Walnut Chrome Extension directly from the Chrome Web Store to begin capturing interactive product experiences.
• View the full Quick Start Guide for step-by-step setup instructions.

---

Capturing Best Practices & Pre-Capture Checklist ✅

• Make sure your browser zoom and system zoom (Windows users) are both set to 100%. This applies to any window, device, or external display you’ll be capturing with. Zoom settings can causing sizing and resolution issues.
• Exit fullscreen mode before using the built-in resizer. Fullscreen mode disables the resizer function in the Walnut Extension.
• Use a preset size in the extension (e.g., Desktop, Laptop, Mobile) for smooth transitions and easy maintenance.
• Use the same screen size for all captures within a template. Do not change or resize screen size while capturing, as this can affect alignment and consistency across screens.
• Use the latest version of the Walnut Extension to ensure full functionality and compatibility.
• Capture using the latest stable version of Chrome. If you see a “Relaunch” button in the top right corner of your browser, complete the update before capturing.
• Disable other browser extensions before capturing, if possible. Tools like Grammarly, LastPass, QuillBot, 1Password, and others may interfere with the capture or appear in your screenshots.
• The Walnut Extension is built to capture HTML and CSS web-based content. For non-web content (e.g., PDFs, images, or video), see:
  • Guide to Creating Interactive Product Experiences in Walnut
  • Replace Screens, Elements, or Sections With PDFs, Images, or Videos

---

Extension Capabilities

Browser Compatibility

For optimal performance, we recommend always using the latest stable version of Google Chrome when capturing with the Walnut Extension. The extension requires Chrome 114 or later to install.

Keyboard shortcut

You can trigger a screen capture from any tab with Ctrl + Shift + S (Windows, macOS, Linux, and ChromeOS). The shortcut can be customized from Chrome's chrome://extensions/shortcuts page.

Browser	Status	Details
Chrome (v114+)	✔️ Fully Supported	99% capture success rate. Chrome 114 is the minimum version required to install the Walnut Extension.
---	---	---
Microsoft Edge	🟡 Partial Support	Supported but not recommended. May result in UI or capture issues.
---	---	---
Firefox, Safari, others	❌ Not Supported	Not supported.
---	---	---

---

Chart Library Support

Interactivity & editing is supported for the following chart library and framework combinations:

Chart Library	Version(s)	Vanilla JS	React	Angular	Vue
Highcharts	10+	✔️	✔️	✔️
---	---	---	---	---	---
Highcharts	6+	✔️	✔️
---	---	---	---	---	---
Chart.js	3.8.0	✔️	✔️
---	---	---	---	---	---

📉 Chart Capture Limitations

Unsupported chart versions or libraries will still be captured, but they’ll appear as static images or SVGs and will not support label, value, or style editing within the Walnut Chart Editor.

---

Supported Table Libraries

The Walnut Extension supports full table data capture for the libraries below:

Table Library	Vanilla JS	React
react-virtualized	✔️	✔️
---	---	---
ag-grid	✔️	✔️
---	---	---

⚠️ Important Note on Table Data Capture

Table data must be present in the page’s HTML at the time of capture. Applications using virtualization, optimized loading patterns, or lazy loading may only allow capture of visible data. This is common in platforms designed to render large datasets efficiently.

If you’re experiencing issues capturing table data, reach out to our Support Team — we’re here to help!

---

Videos on Captured Pages

HTML captures bring videos on the page along with them, so a demo plays what the live page played.

• Embedded video players stay live. When the page uses a known embed — YouTube, Vimeo, Wistia, Vidyard or Loom — the player is kept in the demo and the viewer plays it there, with the same video the page was showing. Autoplay parameters are stripped from the player URL so the player doesn't start on its own in the demo.
• Video files are saved with the screen. A <video> with a direct file source (for example .mp4, .webm, .mov) is downloaded as part of the capture and plays in the demo. If the video was playing at the moment of capture, it keeps playing in the demo and is played muted (browsers block autoplay with sound). If it was paused, it stays paused for the viewer to start.
• A video player's own page becomes the platform's player. When the page you captured is a video page — for example youtube.com/watch?v=…, vimeo.com/… or loom.com/share/… — the page's own custom video controls are replaced in the demo by the platform's standard embed player, pointing at the same video. The page's largest video stream is the one used; smaller hover previews and preloaded feed items on the same page are ignored.
• A fallback frame if the video can't be saved. Some videos can't be captured as a playable file — a live stream (blob: source), a DRM-protected stream, or a <video> whose source wasn't loaded. In those cases the demo shows the frame that was on screen at the moment of capture as the video's poster, so the viewer still sees what the page was showing. A video the page already had its own poster image for keeps that poster instead.

The extension decides per video, so a single screen can mix an embedded YouTube player, a saved file video and a frame-only placeholder and each behaves correctly in the demo.

---

Known Limitations

While the Walnut Extension supports a wide range of web content, the extension does not support:

• JavaScript-powered interactivity such as animations, drop down expand/collapse functionality, sorting, and filtering.
• JavaScript-powered responsive layouts.
• Custom chart interactivity tied to functions outside the core charting library (e.g., custom tooltip renderers, axis formatting).
• PDFs and document-based content (e.g., .docx, .pptx) cannot be captured directly. See Replace Screens, Elements, or Sections With PDFs, Images, or Videos.
• elements. These elements will be captured as static images — interactive behavior is not preserved.
• System-level pages or restricted URLs (e.g., chrome://*, google.com).
• Injected content from other browser extensions (e.g., Grammarly, LastPass).

---