Login

Documentation

Edit by Code is a powerful image editing API designed for AI agents and developers. It allows you to create and edit high-quality images using a simple JSON schema, with support for advanced typography, layouts, and dynamic content.

Authentication

To use the API, you need an API key. You can obtain one by signing up and navigating to your dashboard. Include your API key in the Authorization header of your requests.

Headers
Authorization: Bearer YOUR_API_KEY

Canvas

The canvas object defines the dimensions and background of your image. It serves as the root container for all other elements.

Properties

  • width (number): Width of the image in pixels.
  • height (number): Height of the image in pixels.
  • backgroundColor (string): Hex color code or CSS color name.
  • backgroundImage (string, optional): URL of an image to use as background.
  • align (string, optional): Horizontal alignment of content ('left', 'center', 'right').
  • verticalAlign (string, optional): Vertical alignment of content ('top', 'center', 'bottom').
  • gap (number, optional): Spacing between elements in pixels.
Canvas Example
{
  "canvas": {
    "width": 1200,
    "height": 630,
    "backgroundColor": "#1a1a1a",
    "align": "center",
    "verticalAlign": "center",
    "gap": 40
  },
  "elements": []
}

Elements

The elements array contains the visual components of your image. Supported types include Text, Image, Divider, Spacer, Container, and QRCode.

Text Element

Renders text with full typographic control.

Text Element
{
  "type": "text",
  "content": "Hello World",
  "fontSize": 64,
  "fontFamily": "Inter",
  "color": "#ffffff",
  "fontWeight": 700,
  "align": "center"
}

Image Element

Renders an image from a URL.

Image Element
{
  "type": "image",
  "src": "https://example.com/image.png",
  "width": 200,
  "height": 200,
  "borderRadius": 100,
  "objectFit": "cover"
}

Fonts

We support a curated list of Google Fonts. You can specify the font family in your text elements.

  • Kalam
  • Inter
  • Open Sans
  • Playfair Display
  • Montserrat
  • Lora
  • Merriweather
  • Tinos

REST API

The primary way to edit images is via the REST API. Send a POST request to /api with your JSON payload.

cURL Example
curl -X POST https://editbycode.vercel.app/api \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "canvas": {
      "width": 1080,
      "height": 1080,
      "backgroundColor": "#000000",
      "align": "center",
      "verticalAlign": "center",
      "gap": 40
    },
    "elements": [
      {
        "type": "text",
        "content": "You must be willing to do what others won'\''t do, to have what others won'\''t have.",
        "fontSize": 48,
        "fontFamily": "Kalam",
        "color": "#FFFFFF",
        "align": "center",
        "maxWidth": 900,
        "lineHeight": 1.6
      },
      {
        "type": "text",
        "content": "— Les Brown",
        "fontSize": 32,
        "fontFamily": "Kalam",
        "fontStyle": "italic",
        "color": "#FFD700",
        "align": "center"
      }
    ]
  }' \
  --output quote.png

MCP Server

Edit by Code provides a Model Context Protocol (MCP) server that allows AI agents (like Claude) to edit and create images directly.

Configuration (Recommended)

The most reliable way to connect is using the MCP remote bridge, which properly handles authentication headers:

claude_desktop_config.json
{
  "mcpServers": {
    "editbycode": {
      "command": "npx",
      "args": [
        "-y", "@modelcontextprotocol/server-remote-mcp",
        "https://editbycode.vercel.app/mcp",
        "-h", "Authorization: Bearer YOUR_API_KEY"
      ]
    }
  }
}

Direct SSE Configuration

Some clients (like the MCP Inspector) support direct SSE URLs:

Direct SSE
{
  "mcpServers": {
    "editbycode": {
      "url": "https://editbycode.vercel.app/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_API_KEY"
      }
    }
  }
}

Persistence & History

Every image generated via the API or MCP server is automatically:

  • Stored Securely: Images are uploaded to permanent storage (R2/S3).
  • Recorded: A record is kept in your generation history, linked to your user account.
  • Optimized: The MCP server returns only the public URL, keeping your tool responses lightweight.

You can view all your past generations in your user dashboard.