# Prototyping layouts with Block Kit Builder

*Slack Developer Study Guide · Tools · Last updated October 21, 2026 · https://www.certifyforce.com/study-guide/slack-developer/tools/prototyping-layouts-with-block-kit-builder*

What Block Kit Builder is for (choosing, arranging and previewing blocks, then copying the JSON), how to preview surfaces, clients and themes, how Send to Slack gets stakeholder feedback before code exists, and how to hand the builder's payload to chat.postMessage correctly.

- Certification: Salesforce Slack Developer
- Exam section: Tools
- Study guide: https://www.certifyforce.com/study-guide/slack-developer

**Official exam objective:**

> Demonstrate the purpose and value of Block Kit Builder.

## What the exam expects

- Recommend Block Kit Builder when someone needs to design, preview and hand over a Block Kit layout without writing app code.
- Use the builder's previews: switch between message, modal and App Home surfaces, desktop and mobile clients, and light and dark modes.
- Use Send to Slack to let stakeholders review a prototype in their own Slack client before development starts.
- Paste the builder's JSON into code correctly: the `blocks` argument of `chat.postMessage` takes the array, not the object around it.
- Know what the builder does not do: generate listener code, publish Home tabs, or manage scopes.

Key terms: **Block Kit** (Slack's UI framework of blocks, block elements and composition objects); **Block Kit Builder** (Slack's visual prototyping sandbox for Block Kit layouts); **surface** (where blocks render: message, modal or Home tab); **blocks array** (the ordered list of blocks a surface consumes); **Send to Slack** (the builder's toolbar button that delivers the prototype into Slack).

## Key facts

| Fact | Detail | Source |
|---|---|---|
| Builder purpose | Visual prototyping sandbox: choose, configure and preview all available blocks | [Block Kit](https://docs.slack.dev/block-kit/) |
| Arranging | Drag, drop and rearrange blocks to design and preview layouts | [Block Kit](https://docs.slack.dev/block-kit/), [Tools](https://docs.slack.dev/tools/) |
| Output | The JSON payload, which you add to the app's code | [Develop Efficient Apps with Bolt](https://trailhead.salesforce.com/content/learn/modules/choose-your-slack-development-path/build-slack-apps-with-bolt) |
| Surface previews | Messages, modals and App Home | [Develop Efficient Apps with Bolt](https://trailhead.salesforce.com/content/learn/modules/choose-your-slack-development-path/build-slack-apps-with-bolt) |
| Client previews | Desktop and mobile, light and dark modes | [Develop Efficient Apps with Bolt](https://trailhead.salesforce.com/content/learn/modules/choose-your-slack-development-path/build-slack-apps-with-bolt) |
| Send to Slack | Toolbar button to test a message, modal or App Home in Slack | [Develop Efficient Apps with Bolt](https://trailhead.salesforce.com/content/learn/modules/choose-your-slack-development-path/build-slack-apps-with-bolt) |
| Templates | Starting points such as approvals, polls, onboarding and newsletters | [Compose Effective Onboarding Messages](https://trailhead.salesforce.com/content/learn/projects/build-meaningful-interactions-with-block-kit/compose-meaningful-messages) |
| `blocks` argument | A JSON-based array of structured blocks | [chat.postMessage](https://docs.slack.dev/reference/methods/chat.postMessage) |
| `text` with blocks | Becomes the notification fallback; highly recommended | [chat.postMessage](https://docs.slack.dev/reference/methods/chat.postMessage) |
| Home tab | Still needs `views.publish` with a user ID and view object | [App Home](https://docs.slack.dev/surfaces/app-home/) |

## Check yourself

- What does Block Kit Builder hand the developer at the end of a design session?
- When should you use the builder's Send to Slack button?
- Why does passing the whole copied payload as `blocks` fail?
- Why keep the top-level `text` when a message has blocks?
- Which previews does the builder offer besides surfaces?

## Sources

- [Block Kit](https://docs.slack.dev/block-kit/)
- [Develop Efficient Apps with Bolt Framework for Slack](https://trailhead.salesforce.com/content/learn/modules/choose-your-slack-development-path/build-slack-apps-with-bolt)
- [Compose Effective Onboarding Messages for Apps](https://trailhead.salesforce.com/content/learn/projects/build-meaningful-interactions-with-block-kit/compose-meaningful-messages)
- [chat.postMessage method](https://docs.slack.dev/reference/methods/chat.postMessage)
- [App Home](https://docs.slack.dev/surfaces/app-home/)
- [Tools](https://docs.slack.dev/tools/)

## About the full unit

The "Core concepts", "Exam traps" and "Worked scenario" sections of this unit, its 4 linked practice questions, and unlimited timed mock exams are included with the Slack Developer pack (USD $19): https://www.certifyforce.com/practice-exams