Skip to main content

Convert an image into an interactive element

Convert flat images, SVGs, and canvas elements in a captured screen into interactive Walnut elements you can target with hotspots, edit, and personalize.

Updated Nov 5, 2026

Convert an image into an interactive element

Overview​

Some captured elements come in as flat images — icons rendered as SVG-backed images, sprite-sheet buttons, or brand marks where the underlying page uses a single image instead of HTML text. Image → Interactive Element lets you convert one of those flat images into an interactive element inside Walnut, so you can:

  • Click-target it with hotspots and guide steps
  • Edit its properties like any other Walnut element
  • Personalize per-node text or styling

This is especially useful when the customer-facing UI you captured leans on images for what would otherwise be a real HTML button or badge.

Before You Start​

  • Only image, SVG, and canvas elements (for example, charts) are convertible; text and existing interactive elements are unaffected.

Convert an Image​

  1. Open the demo in the editor.
  2. Select the image you want to make interactive.
  3. In the element's property panel, click the Convert to Interactive (wand) icon.
  4. Choose a mode:
    • Editable — rebuilds the image as plain HTML you can edit like any other captured element.
    • Interactive — rebuilds it as live code that runs in the demo (useful for charts); you change it through code.
  5. Walnut converts the image (this can take a little while) and shows a review panel with a Match score for how closely the result matches the original. From there you can:
    • Click Fix gaps to let Walnut correct what it missed
    • Type in Ask for a change… and press Enter, or click the Regenerate icon for a new attempt
    • Click Accept to keep the result, or Decline to leave the image as it was
  6. Once accepted, the element sits in the same position, and you can:
    • Add a hotspot, click-catcher, or guide step on it
    • Edit its background, size, or other element-level styling
  7. Publish the demo when you're happy with the result.

The conversion is saved as an edit, so the original screen capture underneath isn't changed.

FAQs​

Does the conversion change how the demo looks?​

It shouldn't. The new element takes the image's position and size, and Walnut aims to reproduce the image exactly — the Match score in the review panel tells you how close it got, and Fix gaps closes the difference.

Can I revert an image back to a flat element?​

Yes. Click Decline in the review panel to discard a conversion, or use Undo in the editor after accepting it.

Does this work on any image?​

It works on image, SVG, and canvas elements — including charts drawn on a canvas. If the source is text styled to look like a button, use standard text editing instead.

Was this helpful?