Outline empty rating

Rating styletype: "rating"

Empty icons render as outlines instead of solid gray for a lighter look, with the score set on every API call. Generate outline rating images free.

Edit it — this is the actual editor panel

Design JSON — “Outline empty” variant

{
  "title": "Rating sample",
  "description": "A dynamic star rating",
  "dimensions": {
    "width": 800,
    "height": 420
  },
  "background": {
    "color": "#ffffff"
  },
  "components": [
    {
      "id": "sample-rating",
      "key": "score",
      "type": "rating",
      "position": {
        "x": 260,
        "y": 182
      },
      "rotation": 0,
      "size": {
        "width": 280,
        "height": 56
      },
      "dynamic": true,
      "properties": {
        "value": 3,
        "max": 5,
        "iconShape": "star",
        "activeColor": "#FBBF24",
        "inactiveColor": "#FBBF24",
        "emptyStyle": "outline",
        "partial": "exact",
        "showValue": false,
        "valueFormat": "decimal",
        "opacity": 1
      }
    }
  ]
}

Rating examples

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

Editorial book review

Three gold stars with hollow outlines for the remaining two — a classic critic look.

API overrides for this example

{
  "score.value": 3,
  "score.emptyStyle": "outline",
  "score.inactiveColor": "#FBBF24"
}

Monochrome testimonial card

Four ink-black stars with outlined empties for a minimal quote graphic.

API overrides for this example

{
  "score.value": 4,
  "score.emptyStyle": "outline",
  "score.inactiveColor": "#111827",
  "score.activeColor": "#111827"
}

When to use the outline empty style

Minimal review badges on light backgrounds
Editorial score cards
Clean testimonial graphics

Use it dynamically via the API

Set '<key>.value' (or just '<key>') to the score for each render; max, colors and border props are overridable too.

Full API request with this variant'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 '{
    "score.value": 3,
    "score.max": 5,
    "score.iconShape": "star",
    "score.activeColor": "#FBBF24",
    "score.inactiveColor": "#FBBF24",
    "score.emptyStyle": "outline",
    "score.partial": "exact",
    "score.showValue": false,
    "score.valueFormat": "decimal",
    "score.opacity": 1
}'

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

Other rating styles

Default Hearts Half fill + labelOutline emptyEmoji Ten-point scale

See the rating component page for the full property reference and FAQs.