--- title: "Book Cover Title Image API — Outlined sticker titles | Imejis" description: "Generate personalised book-cover titles with thick outside outlines, gradient fills and a drop shadow, swapping the name on every API call. Start free." url: "https://www.imejis.io/components/text/book-cover" --- # Book Cover Title Image API — Outlined sticker titles | Imejis Stacked outline rings plus a drop shadow — the sticker-style title that reads on top of busy cover artwork. ## Use cases - Personalised story-book covers generated per order - Kids’ product and poster art where the title sits on a busy illustration - Cartoon-style thumbnails and sticker titles for social ## Properties | Name | Type | Default | Description | | --- | --- | --- | --- | | `text` | `string` | — | The text content to display. | | `fontSize` | `number` (min 1) | `24` | Font size in pixels. | | `fontFamily` | `string` | `"Inter"` | Font family name (Google Fonts supported). | | `fontWeight` | `number \| string` | `400` | Font weight (100-900 or a keyword like "bold"). | | `color` | `color` | `"#000000"` | Text color. | | `textAlignment` | `'left' \| 'center' \| 'right' \| 'justify'` | `"left"` | Horizontal text alignment. | | `verticalAlignment` | `'top' \| 'center' \| 'bottom'` | `"top"` | Vertical alignment of text within its box. | | `textDirection` | `'ltr' \| 'rtl'` | `"ltr"` | Text direction (left-to-right or right-to-left). | | `lineHeight` | `number \| string` | `"normal"` | Line height (unitless multiplier or CSS value). | | `letterSpacing` | `number \| string` | `"normal"` | Spacing between characters (pixels or CSS value). | | `backgroundColor` | `color` | `"transparent"` | Background color of the whole text container. | | `textBackgroundColor` | `color` | `"transparent"` | Background color behind the text glyphs only (highlight effect). | | `padding` | `string` | — | CSS padding inside the text container, e.g. "8px 12px". | | `autoResize` | `boolean` | — | Automatically shrink/grow the font size to fit the box. | | `minFontSize` | `number` (min 1) | `8` | Lower font-size bound when autoResize is on. | | `maxFontSize` | `number` (min 1) | `200` | Upper font-size bound when autoResize is on. | | `strokeWidth` | `number` (min 0) | `0` | Outline stroke width around the glyphs in pixels. | | `strokeColor` | `color` | `"transparent"` | Outline stroke color around the glyphs. | | `textDecoration` | `'none' \| 'underline' \| 'overline' \| 'line-through' \| 'underline overline'` | `"none"` | Text decoration line(s). | | `textTransform` | `'none' \| 'uppercase' \| 'lowercase' \| 'capitalize'` | `"none"` | Case transformation applied to the text. | | `constraint` | `'tl' \| 'tr' \| 'tc' \| 'cc' \| 'cl' \| 'cr' \| 'bl' \| 'br' \| 'bc'` | — | Legacy per-component anchor point (prefer the component-level anchor field). | | `autoWidth` | `boolean` | — | Let the box grow horizontally to fit the text. | | `autoHeight` | `boolean` | — | Let the box grow vertically to fit the text. | | `textPatterns` | `object[]` | — | Delimiter-based inline styling rules. A delimiter can be escaped with a backslash ("2 \\* 3") to keep it as literal copy. Each rule carries the delimiters plus the styling for the span between them: textColor, backgroundColor, paddingX/paddingY, border*, its own typography (fontSize or fontScale, fontFamily, fontWeight, fontStyle, letterSpacing, lineHeight, textTransform, textDecoration), effects (strokeWidth/strokeColor, textShadow, opacity) and block:true to put the span on its own line. | | `textShadow` | `string` | — | CSS text-shadow, e.g. "2px 2px 4px rgba(0,0,0,0.5)". | | `strokeAlign` | `'center' \| 'outside'` | `"center"` | Where the glyph stroke sits: 'center' (CSS default, thin outlines) or 'outside' — the poster / book-cover outline that never eats into the letterform. | | `textOutlines` | `object[]` | — | Stacked outline rings painted outside the glyphs, innermost first — [{ width, color, opacity? }]. The sticker-title look (white ring then a dark one). Overrides strokeWidth/strokeColor. | | `textGradient` | `object` | — | Gradient fill painted through the glyphs: { colors: [...2+], angle?: degrees (180 = top to bottom), type?: "linear" \| "radial" }. | | `curve` | `number` (min -359, max 359) | `0` | Arc the text onto a curved baseline: the angle in degrees the line bends through — positive arches up (rainbow), negative arches down (smile). Needs a fixed-size box and renders as a single line. | | `curveRadius` | `number` (min 1) | — | Explicit arc radius in px. Leave unset to fit the arc to the text so `curve` always bends the line by exactly that angle. | | `opacity` | `number` | `1` | Overall component opacity from 0 (transparent) to 1 (opaque). | | `borderWidth` | `number` | `0` | Border thickness in pixels around the component. | | `borderColor` | `color` | `"transparent"` | Border color (any CSS color). | | `borderStyle` | `'solid' \| 'dashed' \| 'dotted' \| 'double' \| 'none'` | `"solid"` | Border line style. | | `borderRadius` | `number` | `0` | Corner radius in pixels. | | `boxShadow` | `string` | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". | ## Design JSON (this variant) ```json { "title": "Text sample", "description": "A centered dynamic headline", "dimensions": { "width": 800, "height": 420 }, "background": { "color": "#ffffff" }, "components": [ { "id": "sample-text", "key": "title", "type": "text", "position": { "x": 50, "y": 130 }, "rotation": 0, "size": { "width": 700, "height": 160 }, "dynamic": true, "properties": { "text": "The Great Adventure", "fontSize": 64, "fontFamily": "Inter", "fontWeight": 800, "color": "#F6B93B", "textAlignment": "center", "verticalAlignment": "center", "lineHeight": 1.2, "opacity": 1, "textOutlines": [ { "width": 6, "color": "#FFFFFF" }, { "width": 4, "color": "#3B2A1A" } ], "textShadow": "0 8px 0 rgba(59,42,26,0.25)" } } ] } ``` ## Examples ### Name and subtitle in one layer A whole cover title block — name, big name line and tagline — from a single text component using patterns. API overrides that reproduce this example: ```json { "title.text": "*Uncle William*{& Henry}~So Much Fun Together~", "title.fontSize": 44, "title.fontWeight": 800, "title.color": "#C0563C", "title.textAlignment": "center", "title.verticalAlignment": "center", "title.textOutlines": [], "title.textShadow": "none", "title.textPatterns": [ { "startDelimiter": "*", "endDelimiter": "*", "block": true, "textColor": "#C0563C" }, { "startDelimiter": "{", "endDelimiter": "}", "block": true, "fontScale": 1.5, "fontWeight": 800, "textColor": "#B4462C" }, { "startDelimiter": "~", "endDelimiter": "~", "block": true, "fontScale": 0.62, "fontWeight": 600, "textColor": "#5C8A3E" } ] } ``` ### Gradient cover title A sunset gradient fill held together by a single outside outline. API overrides that reproduce this example: ```json { "title.text": "Bedtime Adventure", "title.fontSize": 64, "title.fontWeight": 800, "title.color": "#F6B93B", "title.textAlignment": "center", "title.verticalAlignment": "center", "title.textOutlines": [], "title.textShadow": "0 8px 0 rgba(59,42,26,0.25)", "title.textGradient": { "colors": [ "#FFE29F", "#FF719A" ], "angle": 160 }, "title.strokeAlign": "outside", "title.strokeWidth": 5, "title.strokeColor": "#3E2C41" } ``` ## API overrides Override the copy per render with '.text' (or just '' for the primary text value), plus '.color' and background/stroke colors for styling. Flat override payload (`key.property` addressing) with the sample design's current values — send only the keys you want to change: ```json { "title.text": "Hello world", "title.fontSize": 56, "title.fontFamily": "Inter", "title.fontWeight": 700, "title.color": "#111827", "title.textAlignment": "center", "title.verticalAlignment": "center", "title.lineHeight": 1.2, "title.opacity": 1 } ``` ```bash curl --location 'https://render.imejis.io/v1/{{YOUR_DESIGN_ID}}' \ --header 'dma-api-key: {{YOUR_API_KEY}}' \ --header 'Content-Type: application/json' \ --data '{ "title.text": "Hello world", "title.fontSize": 56, "title.fontFamily": "Inter", "title.fontWeight": 700, "title.color": "#111827", "title.textAlignment": "center", "title.verticalAlignment": "center", "title.lineHeight": 1.2, "title.opacity": 1 }' ``` `{{YOUR_DESIGN_ID}}` and `{{YOUR_API_KEY}}` are placeholders: first create the design in your account (paste the sample design JSON above into the editor at https://app.imejis.io, or create it programmatically via the imejis MCP server's `create_design` + `update_design` tools), then render it with the design's id and one of your API keys. Agents: the MCP server at https://api.imejis.io/api/mcp exposes this same catalog as structured data via the `list_component_types` tool (property kinds, allowed values, bounds, ready-to-use sample designs). ## Related - [Text component](https://www.imejis.io/components/text.md) — full reference and FAQs - [Highlighted](https://www.imejis.io/components/text/highlighted.md) — A marker-style highlight behind the glyphs via textBackgroundColor. - [Outlined](https://www.imejis.io/components/text/outlined.md) — Poster-style hollow text using the glyph stroke. - [Inline pattern](https://www.imejis.io/components/text/inline-pattern.md) — Delimiter-based inline styling: anything wrapped in {{ }} gets its own color and pill background. - [Uppercase label](https://www.imejis.io/components/text/uppercase-label.md) — A letter-spaced uppercase eyebrow label for badges and section headers. - [Curved title](https://www.imejis.io/components/text/curved.md) — An arched baseline — the personalised book-cover headline. `curve` is the angle the line bends through, so short names and long titles bend the same amount.