logoImejis.io

Text component

Contenttype: "text"

Rich text with full typography control — fonts, weights, alignment, auto-resize, inline pattern styling, gradient fills, outside outlines, curved baselines and shadows. The workhorse for titles, captions, cover art and any dynamic copy.

Edit it — this is the actual editor panel
Design 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": 100,
        "y": 150
      },
      "rotation": 0,
      "size": {
        "width": 600,
        "height": 120
      },
      "dynamic": true,
      "properties": {
        "text": "Hello world",
        "fontSize": 56,
        "fontFamily": "Inter",
        "fontWeight": 700,
        "color": "#111827",
        "textAlignment": "center",
        "verticalAlignment": "center",
        "lineHeight": 1.2,
        "opacity": 1
      }
    }
  ]
}

Like what you built? The full editor — canvas, templates and the render API — is free to start.

Open the editor

Text examples

Real renders of the text — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.

Blog OG title

An Open Graph headline pulling the article title per render.

API overrides for this example
{
  "title.text": "How we cut render times by 80%",
  "title.fontSize": 48,
  "title.color": "#111827"
}

Certificate recipient name

The learner name stamped onto a course certificate via API.

API overrides for this example
{
  "title.text": "Priya Sharma",
  "title.fontFamily": "Playfair Display",
  "title.fontWeight": 600,
  "title.fontSize": 60,
  "title.color": "#92400E"
}

All text styles

Every style rendered live — each is just a different set of property values on the same component, and each has its own page with a dedicated preview, use cases and API example.

HighlightedA marker-style highlight behind the glyphs via textBackgroundColor.
OutlinedPoster-style hollow text using the glyph stroke.
Inline patternDelimiter-based inline styling: anything wrapped in {{ }} gets its own color and pill background.
Uppercase labelA letter-spaced uppercase eyebrow label for badges and section headers.
Curved titleAn 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.
Cover titleStacked outline rings plus a drop shadow — the sticker-style title that reads on top of busy cover artwork.

Use cases

What developers typically build with the text component.

  • Open Graph images that pull each article title and author per render
  • Certificates with the recipient name, course and date filled in via API
  • Personalized social and email header images addressing every user by name
  • Localized marketing banners — one design, copy swapped per language

Use it dynamically via the API

Override the copy per render with '<key>.text' (or just '<key>' for the primary text value), plus '<key>.color' and background/stroke colors for styling.

Full API request with the sample design's current values — the playground above sends only the properties you change
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
}'

Only send the properties you want to change — everything else keeps its design value. See the API documentation for all languages.

Property reference

Every property the text component accepts — in the editor, in design JSON, and as API overrides.

PropertyTypeEdits asDefaultDescription
textstringtext—The text content to display.
fontSizenumber2424Font size in pixels.
fontFamilystringtext"Inter"Font family name (Google Fonts supported).
fontWeightnumber | stringtext400Font weight (100-900 or a keyword like "bold").
colorcolor#000000"#000000"Text color.
textAlignment'left' | 'center' | 'right' | 'justify'leftcenterrightjustify"left"Horizontal text alignment.
verticalAlignment'top' | 'center' | 'bottom'topcenterbottom"top"Vertical alignment of text within its box.
textDirection'ltr' | 'rtl'ltrrtl"ltr"Text direction (left-to-right or right-to-left).
lineHeightnumber | stringtext"normal"Line height (unitless multiplier or CSS value).
letterSpacingnumber | stringtext"normal"Spacing between characters (pixels or CSS value).
backgroundColorcolortransparent"transparent"Background color of the whole text container.
textBackgroundColorcolortransparent"transparent"Background color behind the text glyphs only (highlight effect).
paddingstringtext—CSS padding inside the text container, e.g. "8px 12px".
autoResizebooleantrue / false—Automatically shrink/grow the font size to fit the box.
minFontSizenumber88Lower font-size bound when autoResize is on.
maxFontSizenumber200200Upper font-size bound when autoResize is on.
strokeWidthnumber00Outline stroke width around the glyphs in pixels.
strokeColorcolortransparent"transparent"Outline stroke color around the glyphs.
textDecoration'none' | 'underline' | 'overline' | 'line-through' | 'underline overline'noneunderlineoverlineline-throughunderline overline"none"Text decoration line(s).
textTransform'none' | 'uppercase' | 'lowercase' | 'capitalize'noneuppercaselowercasecapitalize"none"Case transformation applied to the text.
constraint'tl' | 'tr' | 'tc' | 'cc' | 'cl' | 'cr' | 'bl' | 'br' | 'bc'tltrtcccclcrblbrbc—Legacy per-component anchor point (prefer the component-level anchor field).
autoWidthbooleantrue / false—Let the box grow horizontally to fit the text.
autoHeightbooleantrue / false—Let the box grow vertically to fit the text.
textPatternsobject[]text—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.
textShadowstringtext—CSS text-shadow, e.g. "2px 2px 4px rgba(0,0,0,0.5)".
strokeAlign'center' | 'outside'centeroutside"center"Where the glyph stroke sits: 'center' (CSS default, thin outlines) or 'outside' — the poster / book-cover outline that never eats into the letterform.
textOutlinesobject[]text—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.
textGradientobjecttext—Gradient fill painted through the glyphs: { colors: [...2+], angle?: degrees (180 = top to bottom), type?: "linear" | "radial" }.
curvenumber00Arc 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.
curveRadiusnumber0—Explicit arc radius in px. Leave unset to fit the arc to the text so `curve` always bends the line by exactly that angle.
opacitynumber11Overall component opacity from 0 (transparent) to 1 (opaque).
borderWidthnumber00Border thickness in pixels around the component.
borderColorcolortransparent"transparent"Border color (any CSS color).
borderStyle'solid' | 'dashed' | 'dotted' | 'double' | 'none'soliddasheddotteddoublenone"solid"Border line style.
borderRadiusnumber00Corner radius in pixels.
boxShadowstringtext—CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)".

Frequently Asked Questions

Yes. Mark the component dynamic and send '<key>.text' (or just the key) in the flat modifications JSON — every render can carry different copy, colors and styling.

Enable autoResize and the font size shrinks or grows between minFontSize and maxFontSize to fit the box; autoWidth and autoHeight can let the box grow instead.

The fontFamily property accepts any Google Font by name, combined with weight, letter spacing, line height and text transforms for full typographic control.

Yes — set curve to the angle the line should bend through (45 arches it up, -45 arches it down). The radius is fitted to the text, so the same value bends a short name and a long title by the same amount.

Set strokeAlign to "outside" with strokeWidth/strokeColor, or use textOutlines for several stacked rings (a white ring then a dark one). The outline is painted outside the glyphs, so the letterform stays intact however thick it gets.

Yes — textPatterns applies delimiter-based inline styling, so anything wrapped in markers like {{ }} gets its own color, background pill and padding.