Block party

Meet Block Kit, an easier way to build powerful apps

Slack API
Slack API
Feb 13, 2019 · 4 min read
Image for post
Image for post

There’s now a simpler, more flexible way for you to build engaging apps in Slack. Two releases make this possible: Block Kit, a UI framework made up of stackable “blocks,” and the Block Kit Builder, a prototyping tool that enables you to quickly design and code interactive Slack apps.

Check out the sample app below. Isn’t it formatted nicely? The call to action to approve an expense report is clear and accessible at the top of the message with supporting, contextual information that follows. For the user, it is easy to parse. And fortunately, for the developer, it was simpler to build.

That’s because you now have more control over the hierarchy of an app message. Blocks enable you to define both order and appearance of information delivered by your Slack app.

Image for post
Image for post
Here’s a sample expense approval app using blocks. Orange represents priority content, and green represents supporting context.

Let’s take a tour of the five new blocks you can build with today.

  • Section: Simply a container for text. A section block can be coupled with an inline action or image.
  • Context: A space to add helpful metadata or a description.
  • Image: An image container, including a caption.
  • Divider: A simple separator that makes messages more readable.
  • Actions: Interactive components for your app’s call to action; includes buttons, six drop-down menu types, and a datepicker.

Here are some examples of what’s possible with apps that launched today.

Guru, a knowledge management platform, helps people capture information as it’s shared with them in Slack. Using dividers, Guru’s “help” message now contains clearer calls to action, including an overflow menu that enables users to access advanced app functionality without cluttering their screen.

Image for post
Image for post
Guru’s Slack app before and after Block Kit, highlighting an inline message menu.

Optimizely’s Slack app enables product and marketing teams to brainstorm, test and track digital campaigns. The context block clarifies which marketing campaign a particular message is referencing — in this case, “Attic and Button.”

Image for post
Image for post
The context block helps Optimizely users understand which idea the Slack notification is referencing.

Doodle, a scheduling tool, built an app that enables people to indicate their meeting availability. Rather than jumping back and forth between calendars, the datepicker enables quick polling without leaving Slack.

Image for post
Image for post
A datepicker, menu, and buttons help Doodle Bot’s users design a poll to decide on meeting times, without leaving Slack.

The combined power of these blocks gives you the ability to deliver information in a clear, actionable way, enabling users to get more work done faster.

The Block Kit Builder enables you to quickly prototype app interactions, selecting blocks and editing the code as you go.

The Block Kit Builder also houses customizable templates — pre-built common use cases for apps in Slack, such as approvals or notifications — so you not only have a foundational example of how to use blocks, but a head start with a majority of the code populated for you.

Image for post
Image for post
A preview of the notifications template in the Block Kit Builder.

For instance, imagine you’re building a sales lead tracking app that shares updates between your company’s CRM and Slack. In the Block Kit Builder, select `Notifications` from the list of available templates.

You’ll see a pre-built notification message in the builder, including the corresponding JSON. Edit, add or even delete blocks that aren’t a good fit for your app. You might want to add a message menu or button to allow users to update a lead status from Slack. When you’re satisfied with the final output, copy and paste the JSON into your own app’s code.

Whether you’re new to building apps in Slack or upgrading an existing app, the Block Kit hub is your place to get started. We can’t wait to see the beautiful apps you’ll build next.

Questions or feedback? Email devsupport@slack.com or tweet @SlackAPI.

Slack Platform Blog

Several bots are typing…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store