HStack is a layer that arranges its sublayers in a horizontal line.


Embedding layers in an HStack, or a Horizontal Stack, allows you to stack layers in order horizontally. An HStack will take up the same amount of space as all of its child layers.

By default, an HStack centers all of its child layers horizontally along the x-axis and sets a spacing of 8 points between each one.

You can vertically align the centers of its sublayer within an HStack to position layers to the:

  • Top - All layers aligned to the top of the HStack
  • Center - All layers aligned to the vertical center of the HStack
  • Bottom - All layers aligned to the bottom of the HStack
  • Text Baseline - All layers aligned with the baseline of the largest Text layer in the HStack

You can also customize the layout of the layers in your HStack by adjusting its spacing in the Inspector panel.

Pro Tip
With the applicable layer(s) selected, you can use the keyboard shortcut ⌘⇧H to embed them in an HStack.


Ask Our Community

If you have questions about the Judo editor, or developer questions about SDK integration, join the community and start a conversation!