Example apps with Blocks

Guiding principles

Low Barrier, High Ceiling

Easy for beginners, with room to grow for experts.

Context-Agnostic

Seamlessly adapts across platforms without adjustments.

Composable

Modular components that combine and extend with ease.

Sensible Defaults

Intuitive defaults that work for most, with easy customization.

Lightweight

Fast and smooth, even in resource-constrained environments.

Inclusive

Designed for all users, including those with accessibility needs.

The Blocks.

The Blocks framework borrows concepts of SwiftUI, CSS, and React to create a familiar, easy-to-learn experience for developers of all backgrounds, in line with Jakob's law.

The journey began by identifying the smallest set of primitives needed to build most higher-order components. For composition, we have <hstack>,<vstack>,<zstack>, and <spacer>, and for content, we have <text>, <button>, <icon>, and <image>. By composing these 8 Blocks, you can build almost any interface.

You'll find some details about each below, but for a more in-depth look, check out the Blocks documentation.

Stacks

The stack elements (<vstack>, <hstack>, and <zstack>) are flexible containers used to arrange child elements in different orientations and layers. Stacks can be nested, styled, and clicked if given an onPress handler. Stacks clip any overflowing content.

Text

The <text> element enables you add and format text in your UI. By default, text blocks are limited to a single line. If you have a lot of text, it grows horizontally and the overflow gets clipped. There are two properties to make working with multi-line text easier: wrap and overflow. For text to wrap onto a new line, there needs to be a width defined.

Icon

The <icon> block includes all icons from the Reddit Product Language (RPL), a curated set of iconography.

Button

The <button> element creates an interactive button that users can click or tap.

Image

The <image> element is used for embedding images into the UI.

Spacer

The <spacer> block is used to create adjustable space between UI elements.

Web View

The <webview> block bypasses Blocks' constraints, offering full control with custom HTML, CSS, and TypeScript within Reddit's platform. While Blocks is native on all platforms, <webview> allows custom extensions without waiting for native implementations.