docs

Getting Started

Quickstart

Start creating stunning visuals with Efecto in seconds.

Use with Claude Code

Install once, then just ask Claude to create posters for you.

bash
npx @efectoapp/mcp-server install

Restart Claude Code, then try:

  • "Create a cyberpunk poster with ASCII art"
  • "Make a retro dithered image with the gameboy palette"
  • "Design a halftone print-style graphic"

See the MCP documentation for more details.

Use the API

For programmatic access, use the Efecto API directly. No API key required.

Create Your First Poster

1

Choose your aspect ratio

Start by defining the aspect ratio of your poster. Available options:

  • 16:9 - Widescreen (YouTube, presentations)
  • 9:16 - Vertical (Stories, Reels, TikTok)
  • 1:1 - Square (Instagram posts)
  • 4:3 - Classic (photos, presentations)
  • full - Full viewport
canvas.json
{
  "canvas": {
    "aspectRatio": "16:9",
    "backgroundColor": "#1a1a1a"
  }
}
2

Add layers

Layers are the building blocks of your poster. You can add text, images, videos, 3D models, shapes, and backgrounds. Each layer requires these base fields:

  • id - Unique identifier
  • name - Display name
  • type - Layer type (text, image, video, 3d, background, etc.)
  • visible / locked - Boolean flags
  • transform - Position, size, rotation, opacity
text-layer.json
{
  "id": "title",
  "name": "Title",
  "type": "text",
  "visible": true,
  "locked": false,
  "transform": {
    "x": 0,
    "y": 0,
    "width": 1,
    "height": 1,
    "rotation": 0,
    "opacity": 1
  },
  "content": "Hello Efecto!",
  "fontFamily": "DM Sans",
  "fontSize": 64,
  "fontWeight": "bold",
  "color": "#ffffff",
  "textAlign": "center",
  "letterSpacing": 0,
  "lineHeight": 1.2
}
3

(Optional) Apply an effect

Add a visual effect to transform your poster. Effects are specified with an effectId like ascii-standard, dither-floyd-steinberg, or halftone-mono. See the Effects documentation for all options.

effect.json
{
  "effect": {
    "effectId": "ascii-standard",
    "enabled": true,
    "ascii": {
      "cellSize": 8,
      "color": true,
      "invert": false,
      "charRotation": false
    }
  }
}
4

Generate a shareable URL

Send your state to the encode endpoint to get a shareable URL. Note that the state must be wrapped in a "state" field.

curl https://efecto.app/api/v1/state/encode \
  -H "Content-Type: application/json" \
  -d '{
    "state": {
      "canvas": {
        "aspectRatio": "16:9",
        "backgroundColor": "#1a1a1a"
      },
      "layers": [
        {
          "id": "bg",
          "name": "Background",
          "type": "background",
          "visible": true,
          "locked": false,
          "transform": { "x": 0, "y": 0, "width": 1, "height": 1, "rotation": 0, "opacity": 1 },
          "contentType": "solid",
          "solidColor": "#1a1a1a"
        },
        {
          "id": "title",
          "name": "Title",
          "type": "text",
          "visible": true,
          "locked": false,
          "transform": { "x": 0, "y": 0, "width": 1, "height": 1, "rotation": 0, "opacity": 1 },
          "content": "Hello Efecto!",
          "fontFamily": "DM Sans",
          "fontSize": 64,
          "fontWeight": "bold",
          "color": "#ffffff",
          "textAlign": "center",
          "letterSpacing": 0,
          "lineHeight": 1.2
        }
      ]
    }
  }'
5

(Optional) Render as image

To get a static image file (PNG, JPEG, or WebP), use the render endpoint. Specify width and height in pixels for the output dimensions.

render.sh
curl https://efecto.app/api/v1/render \
  -H "Content-Type: application/json" \
  -d '{
    "state": {
      "canvas": { "aspectRatio": "16:9", "backgroundColor": "#1a1a1a" },
      "layers": [ ... ]
    },
    "format": "png",
    "width": 1200,
    "height": 630
  }' \
  --output poster.png

Next Steps