# Use Cases

See how developers are using HTML/CSS to Image in production.

[Live demo](https://htmlcsstoimage.com/#demo) [Get an API key](https://htmlcsstoimage.com/dashboard)

## 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 |

Adding cards to an existing site?

An [OG Image Config](/getting-started/og-images/) gives each public page or CMS route a matching social image URL without adding an image-generation backend.

## Featured examples

### Product Hunt - Maker Goals

![Product Hunt social image](/assets/images/f356dffe-d99f-487e-bb16-74dc076c0657.jpeg)

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

![Remote Stories social image generated from HTML](/assets/images/7e2da2be-7328-4746-ae69-418b295360ae.jpeg)

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

## More inspiration

### Highlighted Text Shots

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

![User comment rendered as a shareable image](/assets/images/textshot2.png)

[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.

![Autogenerated image for a job advertisement](/assets/images/jobad.jpeg)

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

### Full Webpage Screenshots

Capture entire webpages with pixel-perfect accuracy.

![Full webpage screenshot generated from a URL](/assets/images/stripe.png)

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

![Screenshot cropped to a CSS selector](/assets/images/url-selector-example.png)

## Ready to build?

[Get an API key](https://htmlcsstoimage.com/dashboard) [API docs](/getting-started/using-the-api/) [Template Editor docs](/template-editor/)