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.
Demonstrate the purpose and value of Block Kit Builder.
~6 min read · 4 practice questions ·
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
blocksargument ofchat.postMessagetakes 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
- Detail
- Visual prototyping sandbox: choose, configure and preview all available blocks
- Detail
- Drag, drop and rearrange blocks to design and preview layouts
- Detail
- The JSON payload, which you add to the app's code
- Detail
- Messages, modals and App Home
- Detail
- Desktop and mobile, light and dark modes
- Detail
- Toolbar button to test a message, modal or App Home in Slack
- Detail
- Starting points such as approvals, polls, onboarding and newsletters
blocks argument- Detail
- A JSON-based array of structured blocks
text with blocks- Detail
- Becomes the notification fallback; highly recommended
- Detail
- Still needs
views.publishwith a user ID and view object
Sources for this section (6)
- Block Kitdocs.slack.dev (opens in a new tab)
- Toolsdocs.slack.dev (opens in a new tab)
- Develop Efficient Apps with Bolttrailhead.salesforce.com (opens in a new tab)
- Compose Effective Onboarding Messagestrailhead.salesforce.com (opens in a new tab)
- chat.postMessagedocs.slack.dev (opens in a new tab)
- App Homedocs.slack.dev (opens in a new tab)
- 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?
The questions are free to read. Answers with their sources and self-grading are included with the pack.
Keep reading with the Slack Developer pack
- Core concepts
- Exam traps
- Worked scenario
The pack includes:
- All 38 lessons of the Slack Developer guide, with reading progress
- Interactive decision walks and step-by-step sequence steppers
- Inline practice questions and one-click topic practice (4 questions for this lesson)
- An official source cited for every claim
- An AI tutor that answers from the guide
- Unlimited timed practice exams