Logo Workshop OpenMoji API Documentation

The Logo Workshop API allows you to generate custom logo SVGs with OpenMoji emoji integration.

GET /api

You can provide text for your logo in one of two ways:

• Option 1: Using separate parameters

  • firstPart - Text for the top line (or full text in single line mode)
  • lastPart - Text for the bottom line (ignored in single line mode)

• Option 2: Using a single parameter

  • words - All text for the logo (will be automatically split into first and last parts)

• auto - Whether to automatically determine one-line vs two-line mode based on character count (default: true)
• singleLine - Force single line mode regardless of character count (default: auto-determined)

• fontFamily - Font family to use (default: "Arial, sans-serif")
• textColor - Hex color code for the top line text (default: "#000000")
• accentColor - Hex color code for the bottom line text and border (default: "#ea5a47")
• secondaryColor - Hex color code for the bottom accent strip (default: "#781e32")
• bgColor - Hex color code for the background (default: "#ffffff")
• boldTop - Whether top line should be bold (default: true, set to "false" to disable)
• italicTop - Whether top line should be italic (default: false, set to "true" to enable)
• boldBottom - Whether bottom line should be bold (default: true, set to "false" to disable)
• italicBottom - Whether bottom line should be italic (default: false, set to "true" to enable)

• yOffset - Vertical offset to apply to text (positive moves down, negative moves up). Note: Fixed values are now used for optimal positioning
• maxWidth - Maximum width for text in pixels. Note: Fixed values are now used for optimal sizing
• emojiX - X position for emoji (default: 140)
• emojiY - Y position for emoji (default: 13.5)
• emojiScale - Scale factor for emoji (default: 0.71)

• emoji - Emoji character to include in the logo (uses OpenMoji SVG)
• debug - Set to "true" to show guide lines for layout debugging (default: false)
• format - Set to "json" to get a JSON response with SVG and metadata (default: direct SVG)

By default, the API uses an automatic mode that determines whether to use one-line or two-line layout based on the total character count:

• Total characters ≤ 10: Uses one-line mode with original case preserved
• Total characters > 10: Uses two-line mode with text converted to uppercase

This behavior can be overridden by explicitly setting the singleLine parameter.

The API processes text differently based on the selected mode:

• Two-Line Mode: Text is split between firstPart (top line) and lastPart (bottom line), and converted to uppercase
• One-Line Mode: If using firstPart and lastPart, they are combined with a space; if text already has a space, it will be used to split for dual-color effect

If using the words parameter, the API will automatically:

1. Use the first word as firstPart
2. Use remaining words as lastPart
3. Apply the appropriate case formatting based on mode

Returns an SVG image directly.

Returns a JSON object with the following structure:

{
  "success": true,
  "svg": "<svg>...</svg>",
  "meta": {
    "topFontSize": 40,
    "bottomFontSize": 30,
    "topY": 42,
    "bottomY": 80,
    "textXPosition": 112,
    "maxWidth": 153,
    "actualWidth": 220,
    "singleLineMode": false,
    "autoMode": true,
    "originalWords": "Developer Hub",
    "firstPart": "DEVELOPER",
    "lastPart": "HUB",
    "totalCharCount": 11,
    "characterThreshold": 10,
    "isBoldTop": true,
    "isItalicTop": false,
    "isBoldBottom": true,
    "isItalicBottom": false,
    "emoji": "👨‍💻",
    "emojiCodepoint": "1f468-200d-1f4bb",
    "emojiX": 140,
    "emojiY": 13.5,
    "emojiScale": 0.71,
    "yOffset": 20,
    "colors": {
      "textColor": "#000000",
      "accentColor": "#ea5a47",
      "secondaryColor": "#781e32",
      "bgColor": "#ffffff"
    }
  }
}

/api?words=Developer%20Hub&emoji=👨‍💻

This will automatically use two-line mode with uppercase text because the total character count (11) is greater than the threshold (10).

/api?words=DevHub&emoji=👨‍💻

This will automatically use one-line mode with original case because the total character count (6) is less than the threshold (10).

/api?firstPart=Developer&lastPart=Hub&emoji=👨‍💻&singleLine=true

Forces one-line mode regardless of character count.

/api?firstPart=CLOUD&lastPart=COMPUTING&emoji=☁️

Uses two-line mode with uppercase text.

/api?words=Developer%20Hub&emoji=👨‍💻&format=json

Returns a JSON response with both the SVG and metadata.

Key aspects of the logo generation:

1. Automatic Mode Selection: The API intelligently chooses between one-line and two-line modes based on text length, with different styling for each.

2. Text Processing:

   • Two-line mode: Text is converted to uppercase for a traditional logo look
   • One-line mode: Original case is preserved for a modern look

3. Fixed Positioning: Text is always centered at X=112px, with mode-specific Y-offsets and maximum widths for optimal appearance.

4. Single-Line Color Split: In single-line mode, the text is split at the first space with the first word in primary text color and remaining words in accent color.

5. Emoji Integration: Every logo can include an emoji that's automatically scaled and positioned, with colors extracted to theme the logo when specific colors aren't provided.

To embed the logo in a webpage:

<img src="https://dcm31--b07cdf9722504af99241dfb0c07fb6a1.web.val.run/api?words=Developer%20Hub&emoji=👨‍💻" alt="Logo" />

For dynamic logo generation in JavaScript:

async function getLogo(words, emoji) {
  const url = `https://dcm31--b07cdf9722504af99241dfb0c07fb6a1.web.val.run/api?words=${encodeURIComponent(words)}&emoji=${encodeURIComponent(emoji)}&format=json`;
  
  const response = await fetch(url);
  const data = await response.json();
  
  // Use data.svg for the SVG content
  document.getElementById('logo-container').innerHTML = data.svg;
}

• The API does not support custom sizing of the overall logo (fixed at 301x113.266)
• Only OpenMoji emoji set is supported
• Text X position is fixed at 112px and cannot be changed
• Single-line mode requires at least one space in the text to trigger the color split effect