Building blocks

Read on to learn how you can construct the stacks of blocks that app surfaces love to consume.

• Getting started with blocks
  • Building a block
  • Stacking blocks
  • Choosing blocks
• Adding blocks to surfaces
• Making things interactive

---

Getting started with blocks

We tricked you with this section header! There's no special setup needed to start using blocks. But just like when you open a new pack of generic, colorful, interlocking plastic bricks (😉), you might want to follow the instructions first.

Building a block

{
  "type": "section",
  "text": {
    "type": "mrkdwn",
    "text": "A message *with some bold text* and _some italicized text_."
  }
}

Try this example

The JSON here describes a simple section block, and highlights the general structure of blocks - each contains a type to choose which of the different blocks to use, and then a series of fields that describe what is included in the block.

You can also see how the mrkdwn text formatting described in our reference guides can be included inside of the text objects in a block.

Stacking blocks

Blocks are stacked together within a JSON array in visual order, like this:

[
    {
        "type": "section",
        "text": {
            "type": "mrkdwn",
            "text": "Danny Torrence left the following review for your property:"
        }
    },
    {
        "type": "section",
        "block_id": "section567",
        "text": {
            "type": "mrkdwn",
            "text": "<https://example.com|Overlook Hotel> \n :star: \n Doors had too many axe holes, guest in room 237 was far too rowdy, whole place felt stuck in the 1920s."
        },
        "accessory": {
            "type": "image",
            "image_url": "https://is5-ssl.mzstatic.com/image/thumb/Purple3/v4/d3/72/5c/d3725c8f-c642-5d69-1904-aa36e4297885/source/256x256bb.jpg",
            "alt_text": "Haunted hotel image"
        }
    },
    {
        "type": "section",
        "block_id": "section789",
        "fields": [
            {
                "type": "mrkdwn",
                "text": "*Average Rating*\n1.0"
            }
        ]
    }
]

Try this example

You'll use the array of blocks later on in this guide. First let's see how to pick out the blocks you want to add to the stack.

Choosing blocks

Slack provides a long list of blocks to choose from: some contain static content, some provide interactive components, and all can be stacked together to create the Empire State Building of apps.

After emptying that metaphorical box of blocks onto the floor, you could go ahead and start putting them together by editing the raw JSON. However, we have something to help you plan out the masterpiece you want.

The Block Kit Builder is a visual prototyping sandbox that will let you pick and choose from all available blocks, and stack them together in the way you want.

If you want to skip the builder, the layout blocks reference guide contains the specifications of every block, and the JSON fields required for each of them.

---

Adding blocks to surfaces

Want to use the stack of blocks you've just built? You need to put them in a surface.

App surfaces like the Home tab, messages and modals all accept blocks.

Each of them uses a blocks field, the value of which is the array of blocks that you stacked together earlier.

Once an app has prepared a blocks array, it can use that array to create a message or compose a view for a modal.

Goto our app surfaces section to learn more about using these different surfaces, and how to add blocks to your app's Home tab, messages, and modals.

Some blocks can only be used in particular app surfaces. Read the Block Kit reference guides to check a block is compatible with your app's surfaces.

---

Making things interactive

Blocks can be made to all kinds of things with buttons, input, and sequencing. Learn how to build interactive experiences for messages, modals, and more.

---

Reference

With so many fields, attributes, elements, foxes, and socks, you'll definitely want to consult our field guide references for everything blocks.

• Layout blocks
• Block elements
• View payloads
• Interactive components
• Composition objects