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

# MetaKit Image API

> Generate fully branded Open Graph and Twitter images from templates with simple URL parameters.

# MetaKit Image API — Overview

MetaKit Image API is the easiest way to generate perfect social media preview images (Open Graph images) for every page on your website automatically. Instead of manually designing banners for every blog post, product, or event, MetaKit creates them on-the-fly, ensuring your links always look professional and branded on Twitter, LinkedIn, Slack, and iMessage.

## Why MetaKit?

### 1. Instant brand consistency

MetaKit automatically detects your website's colors, fonts, and logos to create images that feel like they were custom-designed by your creative team.

* **Auto-theming:** Simply provide your URL, and we apply your brand identity instantly.
* **Light & dark modes:** All templates support both modes to match user preferences or your brand guidelines.

### 2. Professional templates for every use case

Stop struggling with layout. We provide a suite of professionally designed templates tailored for specific content types:

* **Marketing & Sales:** High-impact **Promo** and **Pricing** cards to drive conversions.
* **Content & Blogs:** Clean **Article** and **Docs** layouts that prioritize readability and headlines.
* **Events:** **Event** and **Wedding** templates that highlight dates and key details.
* **Brand awareness:** **Bold** and **Highlight** designs that put your logo front and center.

### 3. Zero maintenance

Once set up, your social images are fully automated.

* **Dynamic content:** When you update a page title or description, the social image updates automatically.
* **No design tools needed:** Everything is controlled via simple URL parameters.

### 4. Developer & marketer friendly

* **Live playground:** Use the visual editor (`/templates`) to test designs, tweak colors, and see changes in real time.
* **Simple integration:** Works with any website builder, CMS, or custom stack. Just change your `<meta property="og:image">` tag.

## Usage examples

**Basic link preview**

```
https://gen.metakit.app/p/link/clean.png?url=https://example.com
```

**Customized promo card**

```
https://gen.metakit.app/p/square/promo.png?title=Summer+Sale&division=50%25+OFF&primaryColor=#ff0000
```

**Auto-branded documentation**

```
https://gen.metakit.app/p/link/docs.png?url=https://stripe.com/docs
```

### Recommended next steps

1. Point a staging route at the Image API and validate the rendered assets inside Slack or iMessage.
2. Update your production `og:image` and `twitter:image` tags once the preview looks right.
3. Visit `image-api/templates/index` to understand how template-specific docs will be organized (and to prepare for adding more detailed sub-pages).

Need template-level instructions? The templates section is ready for individual guides covering data fields, best-use cases, and preview tips. Drop new files into `image-api/templates/` as each design ships.