Rectangle component
Shapestype: "rect"A filled rectangle with borders, rounding, opacity and shadows — the building block for cards, panels, badges and backgrounds.
Design JSON
{
"title": "Rectangle sample",
"description": "A rounded dynamic panel",
"dimensions": {
"width": 800,
"height": 420
},
"background": {
"color": "#ffffff"
},
"components": [
{
"id": "sample-rect",
"key": "panel",
"type": "rect",
"position": {
"x": 220,
"y": 110
},
"rotation": 0,
"size": {
"width": 360,
"height": 200
},
"dynamic": true,
"properties": {
"fillColor": "#4F46E5",
"borderRadius": 16,
"opacity": 1
}
}
]
}Like what you built? The full editor — canvas, templates and the render API — is free to start.
Open the editorRectangle examples
Real renders of the rectangle — each one is the same component with different property values, and the API payload below each preview reproduces it exactly.
Deploy-succeeded toast panel
A green rounded panel serving as the backdrop of a "Deploy succeeded" notification card.
API overrides for this example
{
"panel.fillColor": "#10B981",
"panel.borderRadius": 12,
"panel.boxShadow": "0 8px 20px rgba(16,185,129,0.35)"
}Dark hero backdrop
A near-full-canvas navy panel laid behind an imagined OG-image headline and logo.
API overrides for this example
{
"panel.fillColor": "#0F172A",
"panel.borderRadius": 24
}All rectangle 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.
Use cases
What developers typically build with the rectangle component.
- Card backdrops behind dynamic text and photos
- Status badges recolored by state per render
- Section panels for OG image layouts
Use it dynamically via the API
Recolor per render with '<key>.fillColor' (or just '<key>'); opacity and borderColor are overridable too.
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 '{
"panel.fillColor": "#4F46E5",
"panel.borderRadius": 16,
"panel.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 rectangle component accepts — in the editor, in design JSON, and as API overrides.
| Property | Type | Edits as | Default | Description |
|---|---|---|---|---|
| fillColor | color | #808080 | "#808080" | Fill color. |
| opacity | number | 1 | 1 | Overall component opacity from 0 (transparent) to 1 (opaque). |
| borderWidth | number | 0 | 0 | Border thickness in pixels around the component. |
| borderColor | color | transparent | "transparent" | Border color (any CSS color). |
| borderStyle | 'solid' | 'dashed' | 'dotted' | 'double' | 'none' | soliddasheddotteddoublenone | "solid" | Border line style. |
| borderRadius | number | 0 | 0 | Corner radius in pixels. |
| boxShadow | string | text | — | CSS box-shadow applied to the component, e.g. "0 4px 6px rgba(0,0,0,0.1)". |