Introduction

Render Slack Block Kit JSON in React, pixel-for-pixel the way Slack does.

@nkootstra/block-kit renders the Block Kit JSON your Slack app sends (messages, modals and Home tabs) as React components that look and behave the way they do in Slack.

PreviewJSON

Y

Your AppAPP12:00 PM

<fakeLink.toEmployeeProfile.com|Ada Lovelace> requested time off

Type:
Paid time off

When:
Aug 10 – Aug 13

Hours:
16.0 (2 days)

Remaining balance:
32.0 hours (4 days)

Approve

Deny

onActionInteract with the preview.

Click a button: the log under the preview shows the action your onAction handler receives, in the same shape Slack sends to your app.

Why this exists

Slack’s Block Kit Builder only runs inside Slack. When you want to show a message outside of it, such as in a preview in your admin panel, a gallery of templates, an approval queue in your own product, or a test harness for your bot, you’d otherwise have to rebuild Slack’s layout rules by hand.

This package does that work for you:

• Every block and element. Sections, rich text, tables, charts, cards, carousels, inputs, every select menu and picker, including the newer agent blocks such as plan and task_card.
• Measured against Slack. Each block is compared, pixel by pixel, against captures of Slack’s own rendering. Spacing, fonts, colours, hover and focus states match.
• Interactive. Buttons, selects, pickers and inputs work. You receive Slack’s block_actions, view_submission and block_suggestion payloads, and can answer them the way your app would: open a modal, update the message, return validation errors.
• Plugs into your app. Forward interactions to an existing Bolt app with a signed relay, and resolve user and channel mentions from the Slack Web API.

Where to start