Build shareable PNG cards from JSON or the dashboard visual editor.
Render shareable PNG cards from JSON with text, images, progress bars, Discord avatars, and shapes.
The Text element adds custom text to a card. Choose one of the bundled fonts, set size, color, alignment, weight, style, letter spacing, line height and an outline, and use variable placeholders such as {username}.
The Image element renders an image from a URL or a base64 data URI. Width and height can be fixed, auto-sized, or omitted to use the image's original dimensions.
Renders a Discord user's avatar. The request must be authenticated with an API key or session linked to a Discord bot token saved in dashboard settings. Accepts a raw user snowflake or a mention (<@id>). Falls back to Discord's default avatar when the custom avatar cannot be loaded.
Draws a progress bar with a fill value, maximum value, progress color, and background color. Useful for health, XP, or completion meters.
Draws a filled rectangle with optional stroke. Use for panels, accent bars, dividers, and backgrounds behind other elements.
Draws an ellipse that fills its size box. Equal width and height make a circle. Supports a solid or gradient fill and an optional stroke.
Draws a regular polygon or a star inside its size box. The first point always faces straight up. Use stars for ratings and accents, hexagons for badges and frames.
A pill-shaped label with centred text, such as LEVEL 42 or NEW. With size "auto" it sizes itself to the text, with padding proportional to the font size (width = text width + 1.4 × text_size, height = 2 × text_size).
A circular progress meter: a track circle with a filled arc that starts at the top and runs clockwise, plus an optional centred label. Good for levels, goals and percentages.
A small bar, line or area chart drawn from a list of numbers. Values scale to the tallest one (or to max). Pass live data through variables, for example "values": "{mon},{tue},{wed}".
A scannable QR code for a link or short text, such as a server invite. Keep strong contrast between the dots and the background so phones can read it.
A straight line or separator. size.height is the thickness; use rotation for angled lines.
