--- title: "Capture screens" slug: "/help/demos/getting-started/chrome-extension-tutorial" last_updated: "2026-04-15T19:56:46Z" zendesk_id: 11516319652883 zendesk_url: "https://help.walnut.io/hc/en-us/articles/11516319652883-Create-Demos-Part-1-Chrome-Extension-Capabilities-Best-Practices" locale: "en-us" category: "Getting Started" section: "Capturing & Importing Content" product: "demos" topic: "getting-started" displayed_sidebar: "demosSidebar" sidebar_position: 3 tags: ["capture","extension","chart.js","charts","highcharts","live app link","best practices","edit charts","ag-grid","table data","tables","capturing best practices","capture best practices"] pagination_next: "help/demos/edit/structure/templates" --- ## **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** :::success - [**Download the Walnut Chrome Extension**](https://chromewebstore.google.com/detail/walnut-sales-demo-platfor/mccegadjoafkdahijbbincjlicfjjibd) directly from the Chrome Web Store to begin capturing interactive product experiences. - [**View the full Quick Start Guide**](/help/demos/getting-started/chrome-extension#h_01JVMQA4YGNH63K2XXMAVJ442A) for step-by-step setup instructions. ::: --- ## **Capturing Best Practices & Pre-Capture Checklist ✅** - **Make sure your browser zoom and** [**system zoom (Windows users)**](https://support.microsoft.com/en-us/windows/change-your-screen-resolution-and-layout-in-windows-5effefe3-2eac-e306-0b5d-2073b765876b#id0ebd=windows_11) **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.** ![Screenshot 2025-06-18 at 11.02.16 AM.png](pathname:///images/92046927aea9234a.png) - 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**](/help/demos/getting-started/chrome-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**](/help/demos/getting-started/interactive-experiences) - [**Replace Screens, Elements, or Sections With PDFs, Images, or Videos**](/help/demos/edit/content/replace-with-media) --- ## **Extension Capabilities** ### **Browser Compatibility** For optimal performance, we recommend always using the **latest stable version of Google Chrome** when capturing with the Walnut Extension. | Browser | Status | Details | | --- | --- | --- | | Chrome (v103+) | ✔️ Fully Supported | 99% capture success rate. | | --- | --- | --- | | 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 | ✔️ | ✔️ |   |   | | --- | --- | --- | --- | --- | --- | :::note[📉 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 | ✔️ | ✔️ | | --- | --- | --- | :::note[⚠️ 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](https://help.walnut.io/hc/en-us/requests/new?ticket_form_id=4955821960979) — we’re here to help! --- ### **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.](/help/demos/edit/content/replace-with-media) - 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). ---