# HTML/CSS to Image

> HTML/CSS to Image converts HTML and CSS, or publicly accessible URLs, into images and PDFs through an API. It can be used for generating social cards, invoices, certificates, charts, reports, marketing images, automated screenshots among other use-cases.

## What HTML/CSS to Image does

HTML/CSS to Image renders pixel-accurate images and PDFs from HTML/CSS or screenshots of a public URL. It supports custom fonts, external assets, JavaScript-rendered pages, selectors, timing control, and reusable templates.

- API requests require API credentials; keep API keys on the server and never expose them in client-side code.
- JavaScript-heavy pages may require an explicit rendering delay before capture.
- Output formats and limits depend on the account plan.
- Prefer the API documentation and OpenAPI specification for current request and response behavior.

## Dynamic Open Graph Images & Link Previews

HTML/CSS to Image can generate and cache Open Graph images from the metadata on each public page. One stable og:image URL pattern can capture a page element or populate a saved template, while recognized social crawlers can receive an appropriately sized image.

- [Dynamic Open Graph images](https://htmlcsstoimage.com/features/og-images): configure page screenshots or templates that stay current with each page's metadata.
- [Social card previewer](https://htmlcsstoimage.com/tools/social-card-previewer): inspect the title, description, image, fallback tags, and platform-shaped preview for a public URL.
- [Platform-specific Open Graph guides](https://htmlcsstoimage.com/features.md): guidance and preview links for Facebook, Instagram, LinkedIn, Slack, Discord, messaging apps, and other supported destinations.

## API & Documentation

- [API documentation](https://docs.htmlcsstoimage.com/getting-started/using-the-api/): authenticate, construct requests, and render images.
- [OpenAPI specification](https://htmlcsstoimage.com/openapi/v1.json): machine-readable API definition.
- [MCP integration](https://docs.htmlcsstoimage.com/integrations/mcp/): use HTML/CSS to Image through MCP-compatible clients.
- [Feature directory](https://htmlcsstoimage.com/features.md): feature overviews and audience-specific use cases.
- [Example code](https://docs.htmlcsstoimage.com/example-code/): code examples in various programming languages.

## Visual Template Designer

The visual template designer is a low-code way to build reusable image layouts without hand-authoring every render request. Compose blocks, configure canvas settings and styling, use variables for dynamic content, preview the result, and then render the template through the API.
- [Open the template playground](https://htmlcsstoimage.com/templates/playground): try the visual editor in the browser.
- [Browse templates](https://htmlcsstoimage.com/templates): find reusable layouts and starting points.

## Plans & Pricing

Full pricing available [on the pricing page](https://htmlcsstoimage.com/pricing).
- [Markdown pricing](https://htmlcsstoimage.com/pricing.md): machine-readable monthly plan pricing, limits, and feature availability.
- Free plan: 50 images per month.
- Paid plans start at $14/month for 1,000 images.
- Plans scale to 1M+ images per month; enterprise deals and enterprise support are available.

## Resources

- [Homepage](https://htmlcsstoimage.com/): product overview and getting started.
- [Examples](https://htmlcsstoimage.com/examples): rendered examples and supported use cases.
- [Terms](https://htmlcsstoimage.com/terms): terms of service.
- [Privacy](https://htmlcsstoimage.com/privacy): privacy policy.
- [Support](mailto:support@htmlcsstoimage.com): contact support.
- [Blog](https://htmlcsstoimage.com/blog.md): product updates, guides, and engineering info in Markdown.
- [Blog RSS feed](https://htmlcsstoimage.com/blog/rss.xml): summaries of the latest blog posts.
- [Blog JSON Feed](https://htmlcsstoimage.com/blog/feed.json): JSON Feed 1.1 summaries of the latest blog posts.