Skip to main content
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-fx 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 FX 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