The current version of the Þ spec is about to be deprecated. Learn more about v0.3, arriving 28th February 2023.Learn more

Introduction

Overview

The Block Protocol (Þ) is an open standard for building block-based interfaces. It enables applications to make their interfaces extensible with interoperable components: blocks.

The following pages provide a practical introduction for those:

If you have any questions, please open or contribute to a discussion. You can also chat to us on Discord.

What is a block?

Blocks are the basic units we use to build pages on the modern web. They are rectangular sections that contain a set of features and functions. They are sometimes also called components or widgets.

Each block has a type that determines the kind of data it can display and edit. You're probably familiar with the most common block types such as paragraph, header, image, list, and table. Some block types have more advanced interactive features such as filtering, search, and sorting.

There are an infinite number of possible block types. One goal of the Block Protocol is to encourage developers to build and share brand new types of blocks that haven't been seen before, and for applications to offer users far more blocks than any one team could imagine or build.

Blocks can be added to webpages using plain HTML and/or JavaScript. Some modern content management systems (eg. WordPress, Squarespace) and applications (eg. Notion, Coda) allow you to add blocks to a page using a visual interface. With these block-based editors you can usually rearrange the order of blocks on a page using drag and drop. Blocks can be stacked on top of one another, arranged in columns, or embedded inside other blocks.

From a developer perspective, blocks encapsulate a set of specific functionality. Building a block is no different to writing a React, Vue, or Web Component – in fact, these are all ways you might implement a block. They are reusable elements that expect certain data to be passed to them (what we refer to as a block’s ‘schema’). For example, an image block might only accept an image URL in its src property, not a number.

What is a Þ block?

Any block can become a Þ block by meeting the requirements defined in the specification. These requirements define what data a block can accept and how they're allowed to interact with that data. This standardized approach makes it possible to use and embed Þ blocks across any different kind of web application, provided it supports the protocol.

Þ blocks can read and write data to the applications they're embedded inside without any extra setup or custom integrations (as long as both the block and embedding application adhere to the specification).

The Block Protocol is free to use, and any application can enable the use of Þ blocks by following the requirements for embedders.

What is the Þ Hub?

Blocks and types can be published and discovered on the Þ Hub, an open-source registry that anybody can use. There are two ways to access it:

  • in-browser by navigating to blockprotocol.org/hub: no account is required to browse and test blocks
  • programmatically from within other applications: either a user or an embedding application must create a free API key in order to query blocks from the Þ Hub via its API

The Þ Hub provides a single persistent, reliable, and open-source point of reference for the discovery of new content. This means creators only need to publish once, while embedding applications can easily discover new blocks, types and endpoints, making them instantly available to their own users.