> ## Documentation Index
> Fetch the complete documentation index at: https://docs.pictify.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Quickstart

> Generate your first image in 5 minutes

# Quickstart

This guide walks you through generating your first image with Pictify in under 5 minutes.

## Prerequisites

* A Pictify account ([sign up free](https://pictify.io/signup))
* An API key (available in your [dashboard](https://pictify.io/dashboard/settings))

## Step 1: Get Your API Key

1. Log in to your [Pictify dashboard](https://pictify.io/dashboard)
2. Navigate to **Settings** > **API Keys**
3. Click **Create API Key**
4. Copy and store your key securely

<Warning>
  Keep your API key secret. Never expose it in client-side code or public repositories.
</Warning>

## Step 2: Install an SDK (Optional)

Choose your preferred language:

<CodeGroup>
  ```bash npm theme={null}
  npm install @pictify/sdk
  ```

  ```bash pip theme={null}
  pip install pictify
  ```

  ```bash go theme={null}
  go get github.com/pictify-io/pictify-go
  ```

  ```bash gem theme={null}
  gem install pictify
  ```
</CodeGroup>

## Step 3: Generate an Image

### Using the SDK

<CodeGroup>
  ```typescript Node.js theme={null}
  import { Pictify } from '@pictify/sdk';

  const pictify = new Pictify({
    apiKey: 'your-api-key'
  });

  const image = await pictify.renderHtml({
    html: `
      <div style="width: 1200px; height: 630px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
        <h1 style="color: white; font-size: 64px; font-family: sans-serif;">Hello, Pictify!</h1>
      </div>
    `,
    width: 1200,
    height: 630
  });

  console.log('Image URL:', image.url);
  ```

  ```python Python theme={null}
  from pictify import Pictify

  client = Pictify(api_key="your-api-key")

  image = client.render_html(
      html="""
      <div style="width: 1200px; height: 630px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
        <h1 style="color: white; font-size: 64px; font-family: sans-serif;">Hello, Pictify!</h1>
      </div>
      """,
      width=1200,
      height=630
  )

  print("Image URL:", image.url)
  ```

  ```go Go theme={null}
  package main

  import (
      "context"
      "fmt"
      "github.com/pictify-io/pictify-go"
  )

  func main() {
      client := pictify.NewClient("your-api-key")

      image, err := client.RenderHTML(context.Background(), &pictify.RenderHTMLOptions{
          HTML: `<div style="width: 1200px; height: 630px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
            <h1 style="color: white; font-size: 64px; font-family: sans-serif;">Hello, Pictify!</h1>
          </div>`,
          Width:  1200,
          Height: 630,
      })

      if err != nil {
          panic(err)
      }

      fmt.Println("Image URL:", image.URL)
  }
  ```

  ```ruby Ruby theme={null}
  require 'pictify'

  client = Pictify::Client.new(api_key: 'your-api-key')

  image = client.render_html(
    html: <<~HTML,
      <div style="width: 1200px; height: 630px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;">
        <h1 style="color: white; font-size: 64px; font-family: sans-serif;">Hello, Pictify!</h1>
      </div>
    HTML
    width: 1200,
    height: 630
  )

  puts "Image URL: #{image.url}"
  ```
</CodeGroup>

### Using cURL

```bash theme={null}
curl -X POST https://api.pictify.io/image \
  -H "Authorization: Bearer your-api-key" \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div style=\"width: 1200px; height: 630px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center;\"><h1 style=\"color: white; font-size: 64px; font-family: sans-serif;\">Hello, Pictify!</h1></div>",
    "width": 1200,
    "height": 630
  }'
```

## Step 4: Use a Template

Templates let you create reusable designs with variables. Create a template in the dashboard, then render it:

<CodeGroup>
  ```typescript Node.js theme={null}
  const result = await pictify.render({
    templateId: 'your-template-uid',
    variables: {
      title: 'My Blog Post',
      author: 'Jane Doe',
      publishedAt: '2026-01-29'
    }
  });

  console.log(result.url); // results[0].url
  ```

  ```python Python theme={null}
  result = client.render(
      "your-template-uid",
      variables={
          "title": "My Blog Post",
          "author": "Jane Doe",
          "publishedAt": "2026-01-29"
      }
  )

  print(result.url)  # results[0].url
  ```
</CodeGroup>

## Next Steps

<CardGroup cols={2}>
  <Card title="Templates" icon="palette" href="/concepts/templates">
    Learn to create reusable templates with variables
  </Card>

  <Card title="API Reference" icon="code" href="/api-reference/overview">
    Explore all API endpoints
  </Card>

  <Card title="SDKs" icon="box" href="/sdks/overview">
    Full SDK documentation
  </Card>

  <Card title="Batch Processing" icon="layer-group" href="/guides/batch-processing">
    Generate images at scale
  </Card>
</CardGroup>
