---
layout: default
title: Use Cases
permalink: /use-cases/
nav_order: 20
has_children: true
description: >-
  See how developers use HTML/CSS to Image to automate image generation for social cards, screenshots, certificates, and more.
---
# Use Cases & Examples
{: .no_toc }
{: .fs-9 }

See how developers are using HTML/CSS to Image in production.
{: .fs-4 .fw-300 }

[Live demo](https://htmlcsstoimage.com/#demo){: .btn .btn-primary .fs-5 .mb-4 .mb-md-0 .mr-2 }
[Get an API Key](https://htmlcsstoimage.com){: .btn .fs-5 .mb-4 .mb-md-0 }

<hr>

## What can you build?

HTML/CSS layouts can become images for websites, social platforms, emails, documents, and automated workflows. These are some of the most common uses:

| Use Case | Description |
|:---------|:------------|
| [Social Cards](/use-cases/social-cards/) | Automatic Open Graph images, Twitter cards, and API-generated social previews |
| [Screenshots](/use-cases/screenshots/) | Capture any webpage, archive content, create previews |
| [Dynamic Images](/use-cases/dynamic-images/) | Personalized graphics, certificates, job listings, quotes |
| [Template Editor](/template-editor/) | Visual template building for repeatable image designs |

{% include hint.md title="Adding cards to an existing site?" text="An [OG Image Config](/getting-started/og-images/) gives every public page or CMS route a matching social image URL without adding an image-generation backend." %}

<hr>

## Featured examples

### Dev.to - Social Cards at Scale

[Dev.to](https://dev.to) uses the API to autogenerate thousands of custom images for Twitter and Facebook. Every blog post automatically gets a beautiful, branded social card.

{% cloudinary /assets/images/image%20%2823%29.png alt="Dev.to social card generated from HTML" %}

### Product Hunt - Maker Goals

{% cloudinary /assets/images/f356dffe-d99f-487e-bb16-74dc076c0657.jpeg alt="Product Hunt social image" %}

Product Hunt uses HTML/CSS to Image to dynamically generate social cards for Maker Goals. [View the source code on CodePen](https://codepen.io/ayrtonbe/pen/ZmWBMw).

### Remote Stories

{% cloudinary /assets/images/7e2da2be-7328-4746-ae69-418b295360ae.jpeg alt="Remote stories social image from html" %}

Beautiful, data-driven social cards. [View the source code on CodePen](https://codepen.io/ayrtonbe/pen/pQLyKN).

<hr>

## More inspiration

### Highlighted Text Shots

Generate shareable images from user comments, quotes, or highlighted text.

{% cloudinary /assets/images/textshot2.png alt="User comment auto generated text shot" %}

[View source on CodePen](https://codepen.io/mscccc/pen/yRzBWP)

### Auto-Generated Job Listings

Turn structured data into beautiful, shareable images for social media and email.

{% cloudinary /assets/images/jobad.jpeg alt="Autogenerated image for a job advertisement" %}

[View source on CodePen](https://codepen.io/mscccc/pen/xyXKrj)

### Full Webpage Screenshots

Capture entire webpages with pixel-perfect accuracy.

{% cloudinary /assets/images/stripe.png alt="Convert a url to a screenshot API" %}

Use the `selector` param to [capture just a portion of the page](/getting-started/url-to-image/#screenshot-part-of-a-page-with-selector).

{% cloudinary /assets/images/url-selector-example.png alt="Use a CSS selector to crop an image" %}

<hr>

## Ready to build?

[Get an API Key](https://htmlcsstoimage.com){: .btn .btn-blue .fs-5 .mb-4 .mb-md-0 .mr-2 }
[View API Docs](/getting-started/using-the-api/){: .btn .fs-5 .mb-4 .mb-md-0 }
[Open Template Editor Docs](/template-editor/){: .btn .fs-5 .mb-4 .mb-md-0 }