Back
Blog post cover

How to integrate the Snappify Editor into your webapp

Avatar of Pankaj Patel

Pankaj Patel

May 26, 2022ยท3 min read

Sharing code-snippets is hard, especially on platforms which are not built for it.

And you might know some of them: Twitter, Instagram, Facebook; you get the idea. Maybe you're also building your own platform, like a social media scheduling tool and would like to give your users the possibility to easily share code snippets too.

Snappify gives you the powers to do so!

For example I am using FeedHive to schedule my content on various social media platforms, though image upload is usually disconnected for scheduling tools.

But snappify is tightly integrated into FeedHive, and this integration makes my needs, as a developer who wants to maintain my social media presence, cared for.

Let me walk you through my TypeScript tips scheduling workflow on Feedhive:

๐Ÿ“Œ Start creating a new post in FeedHive and click on the Add Media icon below the editor

A screenshot of the empty editor in FeedHive
A screenshot of the empty editor in FeedHive

๐Ÿ“Œ Now click on the Tools tab in the media gallery and pick Snappify

A screenshot of Tools Tab in FeedHive
A screenshot of Tools Tab in FeedHive

๐Ÿ“Œ This will open the Snappify Editor where you can enter and style your code snippet. Afterwards click Continue on the bottom right of the modal window.

A screenshot of the Snappify Editor inside FeedHive
A screenshot of the Snappify Editor inside FeedHive

๐Ÿ“Œ This will insert the generated image to the post and now you can easily schedule your code snippet. ๐Ÿ˜„

A screenshot of resulting image in FeedHive
A screenshot of resulting image in FeedHive

But FeedHive is not the only place which has such a neat integration of Snappify. You can also use ThreadStart for a similar workflow.

Here you can see a video of how to use Snappify in ThreadStart:


So if you are building your own webapp with a similar use case, you can integrate Snappify in your tools and help devs to easily integrate their code snippets.

And it's actually very straightforward to do so!

  1. Install the official npm package for the snappify integration:

npm i @snappify/integration

  1. Call the openSnappify function which opens up the Snappify editor in a new modal and returns you the generated image when the user clicked on the Continue button:
import { openSnappify } from '@snappify/integration';

async function() {
  try {
    const blob = await openSnappify();

    // do something with the blob, e.g. create an object url to show it in an img tag:
    // URL.createObjectURL(blob);
  } catch (error) {
    // error handling
  }
}

The code of the integration is open source so you can have a look at this GitHub Repository.

At the moment the iframe integration is restricted for specific domains, so please contact the Snappify team at info@snappify.io with your use case and requirements.

Share Article


Create beautiful images of your code

snappify will help you to create
and manage your code snippets

Start now
Screenshot of the snappify editor