# Getting started

Start here to learn how to use the HTML/CSS to Image API.

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

## Quick start in 3 steps

### 1\. Get your API credentials

Sign up at [htmlcsstoimage.com](https://htmlcsstoimage.com) and grab your **API ID** and **API Key** from the [dashboard](https://htmlcsstoimage.com/dashboard).

### 2\. Make your first request

Choose your approach:

**Generate from HTML/CSS:**

```bash
curl -X POST https://hcti.io/v1/image -u 'API_ID:API_KEY' \
  -d html="<div style='padding:20px;background:#4f46e5;color:white;'>Hello World</div>"
```

**Screenshot a URL:**

```bash
curl -X POST https://hcti.io/v1/image -u 'API_ID:API_KEY' \
  --data-urlencode url="https://google.com"
```

### 3\. Use your image

The API returns a URL to your generated image. Use it anywhere - in emails, social media, websites, or download it for other uses.

```json
{
  "url": "https://hcti.io/v1/image/be4c5118-fe19-462b-a49e-48cf72697a9d",
  "id": "be4c5118-fe19-462b-a49e-48cf72697a9d"
}
```

## Choose your path

| I want to… | Start here |
| --- | --- |
| Generate images from HTML/CSS | [Using the API](/getting-started/using-the-api/) |
| Take screenshots of websites | [URL to Image](/getting-started/url-to-image/) |
| Add automatic social cards to a site or CMS | [Open Graph Images](/getting-started/og-images/) |
| Create reusable templates | [Templates](/getting-started/templates/) |
| Control image dimensions | [Setting Height and Width](/getting-started/setting-height-and-width/) |
| Design templates visually | [Template Editor](/template-editor/) |
| Generate images with a signed `GET` URL | [Signed Image URLs](/getting-started/create-and-render/) |
| Manage API keys and organization resources | [Management API](/management-api/) |
| Set up API credentials and permissions | [Authentication and API keys](/getting-started/using-the-api/api-keys/) |

## Example code

Get started quickly with code samples in your language:

*   [PHP](/example-code/php)
*   [JavaScript](/example-code/javascript)
*   [Ruby](/example-code/ruby)
*   [Python](/example-code/python)
*   [TypeScript](/example-code/typescript)
*   [C#](/example-code/c)
*   [Go](/example-code/go)
*   [cURL](/example-code/curl)
*   [Java](/example-code/java)
*   [Rust](/example-code/rust)
*   [Kotlin](/example-code/kotlin)
*   [Elixir](/example-code/elixir)
*   [Google Apps Script](/example-code/google-apps-script)

## Automation and no-code options

Don’t want to write code? We’ve got you covered:

*   **[n8n](/integrations/n8n/)** - Build flexible image-generation workflows
*   **[Zapier](/integrations/zapier/)** - Connect with 5,000+ apps
*   **[Make](/integrations/make/)** - Build powerful automation workflows
*   **[MCP Server](/integrations/mcp/)** - Generate images from AI assistants like Cursor, Claude, and more

## Need help?

We’re happy to help you get started. Email us at **[support@htmlcsstoimage.com](mailto:support@htmlcsstoimage.com)** - we’re experts at debugging HTML rendering issues and love helping developers succeed.