A powerful new protocol for developers

The open standard for building block-based interfaces

The Block Protocol enables applications to make their interfaces infinitely extensible with interoperable components called blocks.

What are blocks?

Blocks are individual front-end components that display data. They allow regular users to edit their contents without needing to write code.

Blocks can be simple and static, like an image or a text block, or they can be more complex, like a checklist or chart block.

Users typically select blocks from a list

Users select the type of block they want, then add it to their page, dashboard, or canvas. They can add content to the block, edit it, or manipulate it to do what they need.

Today, blocks are confined to single apps and websites

Every app has to build all of their own blocks. This means developers are rebuilding the same block types over and over.

Open source components can save some time, but still need to be individually integrated.

This also limits how many blocks users have access to in any single application.

Block Protocol blocks
are interoperable

Blocks that adhere to the Block Protocol can work in any application which also uses the protocol, without any extra configuration.

Any developer can build a world-class block for others to use. Blocks can solve specific user needs that individual application developers don’t have the time or expertise to build.

Build blocks in any framework

Blocks can be built with Web Components, React, Vue, TypeScript, Angular, or simply plain HTML. The protocol only defines how blocks communicate with the application they’re embedded within, not how they should be built.

Build using whatever technologies you love most.

export const App: BlockComponent<AppProps> =({
    updateEntities,
    entityId,
    accountId,
    ...rest
 }) => {const [ toDoList, setToDoList ] = useState(data);
   
 return (
     <div className="container">
       <div className="date-title">
         <h1>{date}</h1>
       </div>
       <div className=”list”>
         {toDoList.map(todo => {

The Block Protocol makes building composable interfaces easy

Applications that follow the protocol can use any Block Protocol block with zero marginal implementation cost.

This means you can give users access to a wide variety of blocks – far more than you could build yourself. Empower users to build their own modular interfaces and solutions to complex problems.