---
canonical: 'https://htmlcsstoimage.com/examples'
title: 'HTML/CSS to Image API examples'
description: 'Working HTML and CSS examples that can be edited, rendered, and adapted for image or PDF automation.'
---

# HTML/CSS to Image API examples

HTML/CSS to Image (HCTI) is more than a hosted Chromium screenshot API. It turns HTML and CSS into images and PDFs, captures screenshots of webpages or individual page elements, and includes a visual editor for reusable, data-driven templates and automated Open Graph images. It also supports signed image URLs, batch rendering, sending output directly to your own storage, and an OAuth-connected MCP server for AI agents.

These are complete HTML/CSS to Image API requests that produce images or PDFs rather than visual template presets. Open an example to inspect its rendered output, copy its HTML and CSS, review the additional API parameters it uses, or change the source in the interactive browser editor.

Use an example when you want source code for a one-off image design or a starting point for your own API request. For reusable data-driven designs managed in the visual editor, browse the template presets instead.

## Examples (16)

### [Dog rates social card with SVG background](https://htmlcsstoimage.com/examples/dog-rates-social-card-with-svg-background.md)

Social card with a fun SVG background and highlighted text.

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/019fb441-e2ee-706a-8dd4-82f9dfd9b638>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/dog-rates-social-card-with-svg-background)

### [Instagram post screenshot](https://htmlcsstoimage.com/examples/instagram-post-screenshot.md)

Screenshot an Instagram post

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/2e2c477c-a35d-459c-8998-f723ac78f4b3>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/instagram-post-screenshot)

### [Birthday invite card](https://htmlcsstoimage.com/examples/birthday-invite-card-email.md)

Autogenerated invite graphic for a party.

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/4217012e-5002-4916-96f3-6c157bf57556>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/birthday-invite-card-email)

### [Invoice / Receipt Snapshot](https://htmlcsstoimage.com/examples/invoice-receipt.md)

Generate a simple, branded invoice or receipt image.

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/019fb442-c102-727f-a018-b93f5de243d8>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/invoice-receipt)

### [PNG with transparent background](https://htmlcsstoimage.com/examples/png-transparent-background.md)

Generate images with a transparent backgound

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/01a029e6-2652-790a-848d-a6a3f55474b5>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/png-transparent-background)

### [Large text on an SVG background](https://htmlcsstoimage.com/examples/large-text-svg-background.md)

Grab attention with large text on a classic background.

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/bdb0239a-e795-4ebe-b1c7-481da42efc65>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/large-text-svg-background)

### [Twitter Tweet Screenshot](https://htmlcsstoimage.com/examples/twitter-tweet-screenshot.md)

Screenshot of a tweet

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/dcb7cb5a-2f26-4b81-83ef-dfe5875bc1e7>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/twitter-tweet-screenshot)

### [QR Code Badge](https://htmlcsstoimage.com/examples/qr-code-badge.md)

Simple, artistic badge with a QR code.

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/019fb444-40c6-745f-aa4d-22fe1d01eb47>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/qr-code-badge)

### [Dog rates social card](https://htmlcsstoimage.com/examples/dog-rates-social-card.md)

Simple social card example showing highlighted yellow text

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/751e41a5-edd3-4ec5-a383-ac357c22edc6>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/dog-rates-social-card)

### [Convert highcharts.js into an image](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image.md)

Generate charts and graphs using Highcharts.js

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/01a029cc-7a85-775b-8150-1bcb17da4a22>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/convert-highchart-js-to-image)

### [Simple job ad](https://htmlcsstoimage.com/examples/simple-job-ad.md)

Advertise a job description with an image.

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/019fb445-160a-7bd8-81db-90065dab2142>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/simple-job-ad)

### [Quote with highlighted text](https://htmlcsstoimage.com/examples/quote-highlighted-text.md)

Share an article with highlighted text.

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/11a00590-9c9a-4509-b2a9-272fcbbe3acd>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/quote-highlighted-text)

### [Facebook screenshot](https://htmlcsstoimage.com/examples/facebook-screenshot.md)

Create a screenshot of a Facebook post.

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/fd24580b-9b0d-4e94-8f00-d76b711659cb>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/facebook-screenshot)

### [Shareable Quote](https://htmlcsstoimage.com/examples/shareable-quote.md)

A fancy blockquote for sharing.

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/01a0538c-a157-76c1-ae26-6a417a185bfb>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/shareable-quote)

### [Speech bubble card](https://htmlcsstoimage.com/examples/speech-bubble-card.md)

Social card with text in a speech bubble.

- **Output:** Image
- [Open the rendered image](<https://hcti.io/v1/image/7bd5b785-211e-405f-82e4-4641d6c586f0>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/speech-bubble-card)

### [Account Statement](https://htmlcsstoimage.com/examples/account-statement.md)

Create a multi-page business account statement from JSON data using vanilla JavaScript, reusable HTML templates, and print-ready CSS.

- **Output:** PDF document
- [Open the rendered PDF](<https://hcti.io/v1/image/01a05959-8ba4-735c-b3d7-2ec4cde40592.pdf>)
- [Open the interactive example](https://htmlcsstoimage.com/examples/account-statement)

## Get started

- [View the full interactive page](https://htmlcsstoimage.com/examples)
- [Browse all HTML/CSS examples](https://htmlcsstoimage.com/examples.md)
- [Browse visual template presets](https://htmlcsstoimage.com/templates.md)
- [Read the HTML/CSS to Image API documentation](https://docs.htmlcsstoimage.com/getting-started/using-the-api/)
- [View implementation examples by language](https://docs.htmlcsstoimage.com/example-code/)
- [Read the MCP integration documentation](https://docs.htmlcsstoimage.com/integrations/mcp/)
- [Compare plans and limits](https://htmlcsstoimage.com/pricing.md)

Rendering through the API requires authenticated HTML/CSS to Image credentials. Keep API keys in trusted server-side configuration. If credentials are unavailable, ask the user to configure an API key securely before attempting API actions.