Get Started

Get Started

Create an account

You can start by creating your account on (opens in a new tab)

Login, create a project and get your api key for that project. (opens in a new tab)


Ensure the domain of the project matches the domain screengrab.js is used on in production.

Install ScreenGrab.js

ScreenGrab is available as a nodejs library screengrab.js that can be used in client side React or JS or in server side nodejs.

Install screengrab.js 1

For existing projects install the screengrab.js library into your project dependencies.

npm i --save screengrab.js

Examples (optional)

For examples of full projects clone the git repository (opens in a new tab)

git clone
cd screengrab.js/examples/nodejs
# cd screengrab.js/examples/react
npm install
npm run start

Look a the examples folder (opens in a new tab)

Test it out 2

const { ScreenGrab } = reqire("screengrab.js")
const screengrab = ScreenGrab('api-key')
 .then(image => console.log('image url', image.url))

Share a React component 3

You can use ScreenGrab directly in your React project.

import { ScreenGrab, Share } from "screengrab.js"
const screengrab = ScreenGrab('api-key')
export const ShareButton = (selector: string) => {
  const handleShare = async () => {
    // grab the selector screenshot
    // the url is set to the current page URL (window.location)
    // ensure the dev server is running if on localhost
    const photo = await screengrab.grab(selector)
    // open facebook share with photo url
    Share.share('facebook', photo.url)
    // instagram, telegram, whatsapp, 
    // twitter, linkedin, pinterest
    // more in examples
    // download the image directly
    // await 
  return (
    <button onClick={handleShare}>Share</button>

Use in a component like this:

export const SampleComponent = () => {
  return (
    <div id="sample-component">
      <div>This is a sample component</div>
      <ShareButton selector="#sample-component" />

Ensure the component you want to grab has an id eg: id="sample-component". You can also use a class selector to select the first component with that class.

You are good to go!

Back to (opens in a new tab)


  1. Install ScreenGrab.js

  2. Test is out.

  3. Integrate with React.