Control Canvas Content

Canvas API requests combine content data with a screen description. Use data for values the screen can read, and use windowData to describe the element structure. You can also pass taskAlias to label the item in the device task list, layoutFull to adjust the FULL layout, link to set the tap-to-open URL, and border to choose the screen border color.

To avoid conflicting meanings, do not use type, key, windowData, layoutFull, taskAlias, link, border, __proto__, constructor, or prototype as keys inside data.

$for expands elements during JSON compilation. It is not a browser JavaScript loop. Put it inside the props of the node to repeat; the repeated unit is that node itself. items is a JSON path read from the current template context; as and index inject local values for the loop body. limit is optional. When omitted, all rows are rendered, and the device layout decides how many fit on screen.

Use $ifAny / $then / $else for structural conditions that add, replace, or remove whole elements. $ifAny may be a single JSON path or an array of paths. If any value exists and has content, $then is used; otherwise $else is used.

For short text conditions inside a string, use template if / else syntax or compare. Use if to check whether a value has content, and use compare when two values must be compared explicitly:

Use formatDate for dates and formatCompactNumber for numbers. For standard number formatting instead of compact K/M output, set the third argument to standard.

Canvas API supports a device-oriented static rendering style surface. In practice, the styling boundary is: React object-like elements + a static CSS subset, plus Dot.'s custom Tailwind font utilities, breakpoint handling, and image-processing classes.

The props.style support list is aligned with the static CSS support table. Common categories include CSS variables, display, position, color, margin, padding, top/right/bottom/left, width/height, minWidth/minHeight/maxWidth/maxHeight, border*, borderRadius*, Flexbox, gap, fontFamily, fontSize, fontWeight, fontStyle, tabSize, textAlign, textIndent, textTransform, textOverflow, textDecoration, textShadow, letterSpacing, lineHeight, whiteSpace, lineClamp, wordBreak, textWrap, backgroundColor, backgroundImage, backgroundPosition, backgroundSize, backgroundClip, backgroundRepeat, transform, transformOrigin, objectFit, objectPosition, opacity, boxSizing, boxShadow, overflow, filter, clipPath, mask*, and WebkitTextStroke*.

This style list only describes props.style. The font classes, breakpoint processing, and img-* image-processing classes below are Dot. custom Tailwind extensions on top of props.tw.

Important boundaries: Canvas API is not a full browser environment. It does not support <style>, external <link>, or <script>; it does not support 3D transforms, z-index, or calc(); currentColor is only reliable on the color property; advanced typography features and RTL languages are not the current focus. Canvas API also does not support JSX, arbitrary JS expressions, React hooks, browser APIs, external CSS, or custom components.

Common props.tw classes include flex, flex-row, flex-col, flex-1, shrink-0, grow, items-*, justify-*, w-full, h-full, w-[84px], h-[40px], min-w-0, min-h-0, max-h-[200px], gap-*, gap-[5px], p-*, px-[8px], py-[5px], bg-*, text-*, border*, rounded*, overflow-hidden, box-border, box-content, fill-black, and fill-white. If a Tailwind class is uncertain, prefer props.style.

Text supports two font families of class patterns:

Common regular font keys: chillduansans, chillksans, chillorganic, chillroundf, chillroundgothic, logoscunboundedsans, maokenyingbikaishuj0.09, playfairdisplay, zihunzhoukesong.

Pixel font classes: text-pixel-8, text-pixel-8-quan, text-pixel-10, text-pixel-12, text-pixel-12-xiaoya, text-pixel-12-zpix, text-pixel-16, text-pixel-16-cusong, text-pixel-16-unifont, text-pixel-16-unifontmono, text-pixel-24.

For text layout, prefer these props.style fields: fontSize, fontWeight, lineHeight, letterSpacing, whiteSpace, wordBreak, lineClamp, textOverflow, and overflow. A multi-line body usually looks like:

Image elements support extra e-ink image-processing classes in img.props.tw:

For image layout, use style.objectFit and style.objectPosition, such as contain / center bottom. Avoid relying on aspect-ratio, CSS Grid, absolute positioning, pseudo classes, media queries, external CSS, scripts, or custom components; these are not part of the stable Canvas API surface.

Unsupported element type:

Response:

Unsupported property:

Response:

Invalid image source:

Response: