logoImejis.io

Text component

Contenttype: "text"

Rich text with full typography control — fonts, weights, alignment, auto-resize, inline pattern highlighting and shadows. The workhorse for titles, captions 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.

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 ({ startDelimiter, endDelimiter, textColor, backgroundColor, paddingX, paddingY, border* }).
textShadowstringtext—CSS text-shadow, e.g. "2px 2px 4px rgba(0,0,0,0.5)".
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 — textPatterns applies delimiter-based inline styling, so anything wrapped in markers like {{ }} gets its own color, background pill and padding.