Quick Start
React component to image
Turn your <component> into an <image>. Allow users to generate and share these images with a share or download button.
1 // grab the product hunt upvotes below2 // vs 10hrs of API docs3 const upvotesHtml = await ScreenGrab({ apiKey })4 .url('https://www.producthunt.com/posts/screen-grab')5 .grabHtml('#upvotes')
Features
A simple JS or TS library. Allow your users to generate screengrabs for sharing complex components such as social media posts, graphs, pictures with overlays etc.
Screengrab any HTML element using its DOM reference or a CSS selector.
const image = await ScreenGrab('https://meemzoo.app') .grab('.meme-card')
Fully typed for use in typscript projects. type grab = (ref: HTMLElement) => Promise<ScreenGrab.Image>
Built to integrate with NextJS projects and other NodeJS | React stacks.
<button onClick={() => screenGrab.grab(ref.id)}>Share</button>
Immediately store images to the ScreenGrab cloud
Store images to your Amazon S3 bucket or other S3 copatible objectstore.
Super fast screengrabs. Takes about 2 seconds to take an element screenshot.
Take full webpage screengrabs, a single component/element or a custom viewbox
Multi device screengrabs of your website or component in different devices.
Allow website users to create image downloads of your coponents, graphs, social media posts etc.
Automate screengrabs based on events such as git pushes or test runs
Your are in full control of your screengrabs through your code. Whether you want users to share complex UI images or create test screenshots of components. The library allows the flexibility to do so.
Simple Pricing Plan
Choose the plan that’s right for you experience image generation from your website content.
Developer Plan
1000 screen grabs1 project/domain1Gb image storageShared screengrab server
$0/month
Business Plan
Unlimited screen grabsUnlimited projects/domains1Tb image storage$8 per extra 1Tb
$10/month
Why ScreenGrab?
We developed a meme creation site with social media sharing of meme images. We needed a way to share meme images which had text caption overlays, likes and avatars.
We first tried to draw this onto a canvas object and exporting this to PNG. This was difficult.
We then tried a few libraries and decided on html2canvas. This worked well but was not consistent with the actual HTML rendering, especially with text and image sizes, position. It was also dependent on the users device.
We soon realized we needed consistent image captures. We decided to try an automated server approach.
Three days later we had a microservice that captured screenshots of the meme component when the user clicked share.
We tested this approach on graphs, social media content, data tables, complex UI and the results were consistent screenshots.
We decided to create the service for other developers to save time and to think of a new way of image generation and sharing. Generating images from your HTML or React components and sharing them.
Turn your react components into images!
Visit Memezoo.app, To try it out!