Playground

Edit the tree on the left; the engine lays it out on the right. Sizes accept CSS-shaped strings such as 100px, 50%, and 1fr. See the docs for the full style vocabulary.

<Layout>
  <Node style={{width: '480px', height: '260px', display: 'flex',
                padding: '16px', gap: '12px'}}>
    <Node style={{width: '120px'}} />
    <Node style={{flexGrow: 1, alignItems: 'center',
                  justifyContent: 'center'}}>
      <Node style={{width: '80px', height: '80px'}} />
    </Node>
  </Node>
</Layout>