Image output

Instagram post screenshot

Screenshot an Instagram post

With this example you can set up automation for generating screenshots of Instagram posts.

Swap out the link in the HTML with a public Instagram post and it will generate an image of the post.

Take notice of the parameters that are set: ms_delay is set to 1750 and selector is set to .instagram-media-rendered. This gives the image enough time to render and crops it properly for you.

Interactive example

Edit and render this image

This example depends on browser behavior that cannot run reliably in the inline iframe. Edit the source and options, then select regenerate image to preview the real API output.

Loading playground…

Example code

Use this request in your app

Choose a language and copy a complete request using this example's HTML, CSS, and API options.

import { HtmlCssToImageClient, CreateHtmlCssImageRequest } from "@html-css-to-image/client";

const client = HtmlCssToImageClient.fromEnv();

const request = new CreateHtmlCssImageRequest({
    html: `<blockquote style='width:600px;' class='instagram-media' data-instgrm-version='14'>

<!-- replace this href with the link to the post -->
<a href='https://www.instagram.com/p/CWA2UbCs6x_/' ></a>

</blockquote>
<script src="//www.instagram.com/embed.js"></script>`,
    css: `.tweet-text {
  background-color: #fff2ac;
  background-image: linear-gradient(to right, #ffe359 0%, #fff2ac 100%);
  font-weight: bolder;
  font-size: 32px;
  font-family: 'Roboto', sans-serif;
  padding: 4px;
}`,
    ms_delay: 1750,
    render_when_ready: false,
    selector: ".instagram-media-rendered",
});

const result = await client.createImage(request);
if (result.success) {
    console.log(result.url);
} else {
    console.error(result.error);
}

Read the TypeScript Docs npm package

Request configuration

Options used in this example

These values are sent with the HTML and CSS to control how HCTI loads the page and captures the final screenshot. You can change each one in the editor above.

Selector

selector

.instagram-media-rendered

A CSS selector for an element in the HTML. We’ll crop the image to this specific element.

Learn about this option

Ms Delay

ms_delay

1750

Adds extra time in milliseconds before taking the screenshot so JavaScript can execute.

Learn about this option

From code to screenshot

How HCTI examples work

HTML/CSS to Image renders HTML and CSS in hosted Chrome, then captures the result as an image or PDF. Each example combines real source code with the API options used for the render, so it is both a working demo and a starting point for your own request.

Edit the source and options above to test changes in the browser, then render through the API to see the production result.

Common questions

Can I use the HTML and CSS from these examples?

Yes. Open an example to inspect and edit its complete HTML, CSS, and render options. Use it as a starting point, then send the resulting request from your application.

What is the difference between an example and a template?

Examples are complete API requests built from HTML and CSS. Templates are saved, reusable designs created in the visual editor and rendered repeatedly with different variable values.

Does HCTI create screenshots and PDFs?

Yes. HCTI can render HTML and CSS or capture a public webpage as an image, and it can generate PDFs when you need document output instead of a screenshot.