Anchored Auto Layout
npm

Hover or focus a box to measure it. Click its tag, or press ] and [, to pin one. Esc unpins.

    Legend
    • Anchor: a box with data-⚓️-name
    • Placed by anchors: out of flow
    • Gap from the anchor's edge, in px
    • Edges of the box you're inspecting

    Every tag, line and number here is itself placed by data-⚓️-* attributes. JS only measures.

    Playground

    Every control sets a real data-⚓️-* attribute. Copy the markup when it looks right.

    Block axis

    Options tagged snaps jump instead of tweening from the current choice. Hover a tag for why.

    Inline axis
    Sizing sync
    Collision fallback
    Try-order
    Visibility
    Center-all (overrides both axes)
    Entry morph (AIM)

    Anchored panel

    Change a control; it re-renders live. Click outside to close.

    <div
  data-⚓️-to="--playground-trigger"
  data-⚓️-visibility="visible"
  data-⚓️-transition="morph"
  data-⚓️-morph-from
  data-⚓️-tween
  data-⚓️-below
  data-⚓️-align-leading
>
    Copied