Examples and recipes for Minecraft block renders

Copy-paste recipes: inventory icons, wiki-style isometric renders, item sprites for a shop GUI, transparent thumbnails, and the JSON catalogue in a script.

An inventory row

fit=block frames the full 16×16×16 cube instead of the model's own bounds, so a slab sits low in its square and a torch stays small — which is what makes a row of different blocks look like a row of inventory slots rather than a row of shapes all stretched to the same size.

<div class="row">
  <img src="https://blockrender.dev/render/block/stone.png?size=64&fit=block" width="64" height="64" alt="Stone">
  <img src="https://blockrender.dev/render/block/oak_slab.png?size=64&fit=block" width="64" height="64" alt="Oak slab">
  <img src="https://blockrender.dev/render/block/torch.png?size=64&fit=block" width="64" height="64" alt="Torch">
</div>

A wiki-style render

The default — fit=model — fills the canvas with the block itself, which is what you want when the image is the subject: an illustration in an article, a thumbnail, a download.

https://blockrender.dev/render/block/oak_stairs.png?size=512&crop=true

crop=true trims the fully transparent rows and columns afterwards, so the file is only as big as the shape. Handy when you are laying the image out yourself and do not want to guess at the padding.

Flat and straight-on

view=front, top and side give an orthographic elevation. With shading=0 the front view of a full block is exactly its texture, at any size, which is a tidy way to get a crisp 512 px copy of a 16 px file.

Thumbnails and cards

bg takes 3, 4, 6 or 8 hex digits, so a background can be semi-transparent: bg=1e1e2e80 is a half-opaque slate. width and height break the square canvas when you need a banner shape, and zoom with offsetX/offsetY pushes the block off-centre.

https://blockrender.dev/render/block/diamond_block.png?width=600&height=200&zoom=1.6&offsetX=-0.25&bg=1e1e2e

From code

There is no client library, because the URL is the whole interface.

curl -o diamond_sword.png "https://blockrender.dev/render/item/diamond_sword.png?size=512"
curl -sI "https://blockrender.dev/render/block/stone.png" | grep -i etag
curl -s "https://blockrender.dev/api/block/stone" | jq .colours

import urllib.request

def block_png(block_id, size=256, **options):
    query = "&".join(f"{k}={v}" for k, v in {"size": size, **options}.items())
    url = f"https://blockrender.dev/render/block/{block_id}.png?{query}"
    with urllib.request.urlopen(url) as res:
        return res.read()

open("grass_block.png", "wb").write(block_png("grass_block", size=512))

// Every id in one category, with the URL that renders each one.
const res = await fetch('https://blockrender.dev/api/blocks?category=natural');
const { blocks } = await res.json();

for (const block of blocks.slice(0, 5)) {
  console.log(block.name, '→', 'https://blockrender.dev' + block.render + '?size=128');
}

// Paper / Spigot: build the URL, hand it to whatever renders your web UI.
String url = "https://blockrender.dev/render/block/"
    + material.getKey().getKey()   // "diamond_block"
    + ".png?size=128";

Renders are deterministic and answered with a strong ETag, so the cheapest thing you can do is send the ETag back as If-None-Match and take the 304. See caching and limits.