---
name: preview-slack-block-kit-message
description: Preview a Slack Block Kit message visually using the slack-blocks-to-jsx Vercel playground. Use when you need to screenshot or visually verify Block Kit JSON before posting to Slack.
devin-enabled: true
icon: eye
---

# Preview Slack Block Kit Message

Render and screenshot a Slack Block Kit message using the [slack-blocks-to-jsx playground](https://slack-block-to-jsx-playground.vercel.app/). This produces a visual preview of how the message will appear in Slack, without requiring Slack authentication.

## When to Use

- Before posting a newsletter digest or formatted message to Slack
- When the user asks to preview or verify Block Kit formatting
- When you need a screenshot of a Slack message for a PR description or documentation

## Prerequisites

- Valid Block Kit JSON (array of block objects)
- Browser tool access (Playwright)

## Step 1: Navigate to the Playground

Open the Vercel playground in a browser tab:

```
https://slack-block-to-jsx-playground.vercel.app/
```

## Step 2: Paste Block Kit JSON

1. Click on the code editor area (right-hand panel) to focus it.
2. Select all existing content (`Ctrl+A`) and delete it.
3. Paste your Block Kit JSON into the editor.
4. Wait 1-2 seconds for the preview to render on the left-hand side.

## Step 3: Take a Screenshot

### Option A: Full-page screenshot (simplest)

Take a full-page screenshot. This captures both the preview panel (left) and the JSON editor (right).

### Option B: Cropped preview only (recommended for sharing)

To isolate just the Slack message preview card:

1. Switch to mobile viewport mode using `set_mobile: true`. This causes the responsive layout to stack vertically, showing only the preview panel in the visible area.
2. Take the screenshot.
3. Crop the screenshot to the preview card using Pillow:

```python
from PIL import Image

img = Image.open("screenshot.png")
# The preview card starts below the site header (~y=215)
# and ends after the last block content (~y=770)
# Adjust these values based on the actual content height
cropped = img.crop((20, 215, 398, 770))
cropped.save("preview_cropped.png")
```

4. Switch back to desktop mode using `set_mobile: false`.

### Coordinate Tips

- The mobile viewport is ~410px wide. The preview card has ~20px left margin and ~395px right edge.
- The site header (banner + "Slack Blocks to JSX" title) occupies roughly the top 215px.
- The preview card bottom depends on content length. Check visually and adjust the crop.
- Install Pillow if needed: `pip install Pillow`

## Step 4: Share the Result

Send the cropped screenshot to the user as an attachment using `message_user`.

## Alternative: Block Kit Builder URL (for logged-in desktop users)

If the user has Slack desktop access and is logged in, you can also generate a Block Kit Builder preview URL:

```
https://api.slack.com/tools/block-kit-builder?blocks=<URL-encoded JSON>
```

Note: This requires Slack login, does not work on mobile, and is not accessible to agents via Playwright. Use it only as a supplementary link for human users.

## Reference

- **Playground URL:** https://slack-block-to-jsx-playground.vercel.app/
- **Block Kit Builder:** https://api.slack.com/tools/block-kit-builder (requires Slack login)
- **slack-blocks-to-jsx npm:** https://www.npmjs.com/package/slack-blocks-to-jsx
- **Block Kit reference:** https://api.slack.com/reference/block-kit/blocks
