MARKETPLACE
PLUGINS
SAVE GROUP OR ELEMENT AS IMAGE
Save group or element as image logo

Save group or element as image

Published October 2020
   •    Updated this month

Plugin details

Convert any Bubble group or element into a high-quality image or PDF with just one click! Our 'Save Group as Image' plugin offers seamless capture of complex layouts, including SVGs and custom elements. Perfect for creating screenshots, generating shareable content, or archiving your app dynamic displays.
The Save group or element as Image plugin allows you "save group or element as image" directly on the users browser or/and save it in bubble server database.

Key features:
• Capture any Bubble group or element as an image
• Support for multiple file formats: PNG, JPG, GIF, and PDF
• Adjustable scale for high-resolution outputs
• SVG export support for crisp vector graphics
• Ignore specific elements for customized captures
• Base64 image/PDF data for immediate use in your app
• Comprehensive error handling and success messaging

Our plugin seamlessly integrates with your Bubble workflows, allowing you to automate image generation and enhance your app's functionality.

With options for fine-tuning like scale adjustment and element ignoring, you have full control over your image outputs.

Ideal for creating dynamic screenshots, generating thumbnails, or capturing complex data visualizations, the 'Save Group as Image' plugin is a must-have for any Bubble developer looking to extend their app's visual capabilities.


How does it work?
The plugin renders the group as a canvas image, by reading the DOM and the different styles applied to the elements. For PDFs, the captured canvas is embedded into a real PDF file in the browser.

It does not require any rendering from the server, as the whole image is created on the client's browser.


Browser compatibility:
The plugin should work fine on the following browsers

• Firefox 3.5+
• Google Chrome
• Opera 12+
• IE9+
• Safari 6+

To save a group as image with plugin, simply:
1- Place "Group To Image" on your page
2- Give group ID
3- Call: "Get Image" from workflow
4- Add Event (Conversion completed) to save image in bubble server.

Examples
For more information and examples, please visit the homepage or try the test.
https://roayati.gitbook.io/grouptoimage


*The Image is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds image based on the information available on the page.

$19

One time  •  Or  $3/mo

2.0 stars   •   6 ratings
171 installs  
This plugin does not collect or track your personal data.

Platform

Web

Contributor details

Apqio logo
Apqio
Joined 2017   •   11 Plugins
View contributor profile

Instructions

To use the "Save Group as Image" plugin:
1- Place the "Save group as image" element on your Bubble page.

2- Assign a unique ID to the group or element you want to capture as an image.

3- In your Bubble workflow, add an action to call "Save group as image".

4- Configure the action with the following:

5- Set the 'group_id' to match the ID of your target group/element.


Add a "Success" event action to handle the captured image:

Use the 'image_base64' state to access the image/PDF data.

Optionally save the image to your Bubble database or perform other actions.


Add an "Error" event action to handle any capture failures:

Use the 'message' state to display error information to the user or for debugging.


Throughout the process, you can use the 'message' state to display status updates or error messages to the user.

- (Optional) Set 'file_name' for a custom file name.
- (Optional) Choose 'file_format' (png, jpg, gif, or pdf).
- (Optional) Adjust 'scale' for higher resolution (e.g., 2 for double resolution).
- (Optional) Set 'allowTaint' to true if capturing content from other domains.
- (Optional) List any 'ignoreElements' you want to exclude from the capture.

Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Containers   •   Media   •   Productivity   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

Average rating (2.0)

Switched to the Zeroqode one because it works fully.
February 12th, 2025
The problems with this plugin are: 1. It continues to download the image even when i switched the setting to 'off'. 2. It doesn't work on my phone using Safari. Those are the only concerns otherwise I wouldn't have had to spend $45 buying the Zeroqode plugin. Thanks for putting together a good plugin, hope this rating encourages you to fix it.
Actually, it wasn't the Zeroqode one that i purchased, it was Techblocks.
February 12th, 2025
  •  
Original reviewer
I would give 5 stars but Save Prompt won't accept "no" value
May 11th, 2022
No matter if I select yes or no for the save prompt property, it still triggers and is not what I want for my users to see.
Unable to Block Downloads to Device
December 30th, 2021
I wish i could give this a 5/5, but the plugin always downloads the image export to my phone or computer, regardless of the settings. There's also not documentation for debugging. Please Advise.
Doesn't work anymore
July 28th, 2022
This plugin used to work well but now the png that gets created is wrong. It does not follow the exact group but is shifted to the right, so that there is a white bar on the left with no content and part of the content on the right is not included. Please fix this is unusable!
Thank you for review. We are working on documentation & examples to improve it. Quality value is between (0 to 1); this control image compression i.e. (1 no compression / 0.5 is 50% compress). To increase quality of image use Scale (1.5 or 2 or more) to get higher image quality and size. note also in general using png Format will give higher quality image than jpeg. (plugin author)
June 2nd, 2021
  •  
Apqio
Works as expected
February 20th, 2021
plugin works as it should
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Immerse
Early access
Store
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales