#780·satori

`justifyContent: 'space-evenly'` throws, though Yoga supports it

Author: notluquisCreated Aug 11, 2026Updated Aug 11, 2026

Bug report

Description / Observed Behavior

Setting justifyContent: "space-evenly" throws instead of rendering:

Invalid value for CSS property "justifyContent".
Allowed values: "center" | "flex-start" | "flex-end" | "space-between" | "space-around".
Received: "space-evenly".

The value map in src/handler/compute.ts has five entries and space-evenly is not one of them, so getYogaValueFromCSS (the YA helper in the bundle) rejects it.

The underlying layout engine already supports it. Verified against the shipped bundle of [email protected]:

javascript
const s = fs.readFileSync("node_modules/satori/dist/index.js", "utf8");

// the map that rejects it — 5 entries
s.indexOf("setJustifyContent")
// → {center, "flex-start", "flex-end", "space-between", "space-around"}

s.includes("JUSTIFY_SPACE_EVENLY")  // → true
s.includes("ALIGN_SPACE_EVENLY")    // → true

So both Yoga constants are present in the bundle; they are simply never mapped.

alignContent has the same gap: its map covers stretch | center | flex-start | flex-end | space-between | space-around | baseline | normal, while ALIGN_SPACE_EVENLY exists and is unreachable.

Expected Behavior

space-evenly is a standard value of both justify-content and align-content, and Yoga implements it. I would expect Satori to accept it and distribute the free space evenly, including before the first and after the last item.

Reproduction

The playground share link encodes the editor state, so here is the minimal input to paste instead:

javascript
<div
  style={{
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'space-evenly',
    width: 200,
    height: 200,
    background: 'white',
  }}
>
  <div style={{ display: 'flex', height: 20, background: 'tomato' }} />
  <div style={{ display: 'flex', height: 20, background: 'tomato' }} />
  <div style={{ display: 'flex', height: 20, background: 'tomato' }} />
</div>

Swapping space-evenly for space-around renders; space-evenly throws.

Additional Context

  • satori 0.29.0, Node 26.
  • Searching the issue tracker for space-evenly returns no results, so this does not appear to have been reported before.
  • Practical impact: distributing N items evenly over a fixed height is common in generated cards. The workaround is space-around, which is not the same distribution (half-size gaps at the edges), or inserting spacer nodes.