# HTML and Markdown

> Render your own HTML or Markdown to images and PDFs, and turn any web page into HTML or Markdown.

## Render HTML

Send `html` instead of `url` to render your own markup. This is how you generate Open Graph images, certificates, receipts and invoices from a template.

```bash
curl -X POST "https://shotkit.net/api/take" \
  -H "X-Access-Key: YOUR_ACCESS_KEY" \
  -H "Content-Type: application/json" \
  -d '{"html":"<div style=\"display:grid;place-items:center;width:1200px;height:630px;background:#0f172a;color:#fff;font:600 72px system-ui\">Hello, world</div>","viewport_width":1200,"viewport_height":630,"format":"png"}' \
  --fail-with-body -o shot.png
```

Set the viewport to the size you want the image to be, or capture one element with `selector` (see below).

Things to know:

- The page has no origin, so relative URLs don't resolve. Use absolute URLs for images, stylesheets and fonts, or inline them as `data:` URLs.
- External resources such as Google Fonts load normally. Wait for them with `wait_until=networkidle0` if they arrive late.
- [Cookies](https://shotkit.net/docs/options/request.md#cookies) need an explicit `Domain`.
- Use `POST` for anything but tiny snippets. Long HTML in a query string runs into URL length limits.

### Capture just the element

To get an image exactly the size of your card, capture it with `selector`, and make the background transparent with `omit_background` (PNG only):

```bash
curl -X POST "https://shotkit.net/api/take" \
  -H "X-Access-Key: YOUR_ACCESS_KEY" \
  -H "Content-Type: application/json" \
  -d '{"html":"<div class=\"badge\" style=\"display:inline-block;padding:12px 20px;border-radius:999px;background:#16a34a;color:#fff;font:600 24px system-ui\">Passing</div>","selector":".badge","format":"png","omit_background":true,"device_scale_factor":2}' \
  --fail-with-body -o shot.png
```

### HTML to PDF

Combine `html` with `format=pdf` for invoices and reports. See [PDF](https://shotkit.net/docs/pdf.md).

```bash
curl -X POST "https://shotkit.net/api/take" \
  -H "X-Access-Key: YOUR_ACCESS_KEY" \
  -H "Content-Type: application/json" \
  -d '{"html":"<h1>Invoice #1042</h1><p>Total: $90.00</p>","format":"pdf","pdf_paper_format":"a4","pdf_margin":"2cm","pdf_print_background":true}' \
  --fail-with-body -o shot.pdf
```

## Render Markdown

Send `markdown` to render it with a clean, readable stylesheet: headings, lists, tables, code and images.

```bash
curl -X POST "https://shotkit.net/api/take" \
  -H "X-Access-Key: YOUR_ACCESS_KEY" \
  -H "Content-Type: application/json" \
  -d '{"markdown":"# Release notes\n\n- Faster renders\n- Video output\n- Cookie banner blocking","format":"png","viewport_width":800,"viewport_height":400}' \
  --fail-with-body -o shot.png
```

## Get HTML or Markdown out

With `format=html` or `format=markdown`, you get the page's content as text instead of an image. The page is loaded and rendered in a real browser first, so content added by JavaScript is included.

```bash
curl -X POST "https://shotkit.net/api/take" \
  -H "X-Access-Key: YOUR_ACCESS_KEY" \
  -H "Content-Type: application/json" \
  -d '{"url":"https://example.com","format":"markdown","block_cookie_banners":true}' \
  --fail-with-body -o shot.md
```

Markdown output strips scripts and styles and is a compact way to feed pages to an LLM (see [AI agents](https://shotkit.net/docs/ai-agents.md)). Every other option still applies: `selector` returns only that element, `click` and `scripts` run first, and blocking removes clutter.

| Option | Effect on HTML/Markdown output |
| --- | --- |
| `selector` | Returns only the matching element. |
| `include_shadow_dom` | Includes the content of shadow roots (web components). |
| `wait_for_selector` | Waits for client-rendered content before reading it. |

### A screenshot and the content in one request

`metadata_content` stores the page's HTML or Markdown next to the screenshot and returns its URL:

```bash
curl -X POST "https://shotkit.net/api/take" \
  -H "X-Access-Key: YOUR_ACCESS_KEY" \
  -H "Content-Type: application/json" \
  -d '{"url":"https://example.com","response_type":"json","metadata_content":true,"metadata_content_format":"markdown"}' \
  --fail-with-body -o shot.json
```

```json
{
  "screenshot_url": "https://shotkit.net/cdn/files/…/….jpg",
  "content": {
    "url": "https://shotkit.net/cdn/files/…/….md",
    "expires": "Fri, 09 Oct 2026 16:00:00 GMT",
    "format": "markdown"
  }
}
```