Penpot Layer Order

Overview

In Penpot, z-order is determined by position in the parent's children array:

• Later index = visually on top (foreground)
• Earlier index = visually behind (background)

Create backgrounds first, foreground content last. The Penpot MCP does not enforce this — agents must manage it explicitly.

Critical: Use insertChild, Never appendChild

// ✅ Correct — append to end (puts shape on top)
parent.insertChild(parent.children.length, shape)

// ❌ BROKEN — do not use
parent.appendChild(shape)