jsx-slack

library6.1.2jsnpmunverified

jsx-slack is a JavaScript/TypeScript library designed to simplify the creation of Slack Block Kit JSON payloads using a JSX-like syntax. As of its current stable version 6.1.2, the library provides a declarative way to define rich Slack messages, modals, and other surfaces by composing components rather than manually crafting complex JSON objects. It supports a flexible development experience, offering a `jsxslack` tagged template literal for environments without a JSX transpiler, as well as full JSX support for projects leveraging Babel or TypeScript. The project maintains a regular release cadence with frequent patch and minor updates, and occasional major versions introducing breaking changes like Node.js engine updates or API behavior modifications. Its key differentiators include the familiar developer experience for React users, a focus on maintainability over raw JSON, and compatibility across Node.js (>=14) and Deno environments, providing a robust solution for Slack app development.

communication

npm install jsx-slack

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · JSX-SLACK

jsx-slack

communicationjavascriptv6.1.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

jsxslack

✓ import { jsxslack } from 'jsx-slack'

✗ const jsxslack = require('jsx-slack')

The `jsxslack` tagged template literal allows creating Block Kit surfaces without a JSX transpiler, powered by HTM. CommonJS `require` syntax will likely cause issues in modern ESM contexts.

Blocks, Section

✓ import { Blocks, Section } from 'jsx-slack'

✗ import Blocks from 'jsx-slack'

These are named exports for core Block Kit components. When using JSX directly, ensure your build tool (Babel, TypeScript) is configured with `jsxImportSource: 'jsx-slack'` or `/** @jsxImportSource jsx-slack */` pragma.

Fragment

✓ import { Fragment } from 'jsx-slack'

✗ import { Fragment } from 'react'

Use `Fragment` from `jsx-slack` for grouping multiple elements without adding extra nodes to the Slack Block Kit output. Importing from 'react' is incorrect for `jsx-slack`.

This quickstart demonstrates how to create a basic Slack message and a modal using the `jsxslack` tagged template literal, eliminating the need for a JSX transpiler setup. It showcases various Block Kit components and their straightforward JSX-like syntax to generate the corresponding JSON payload.

import { jsxslack } from 'jsx-slack'; // Example: Crafting a simple Slack message with a button const simpleMessage = jsxslack` <Blocks> <Section> This is a *simple* message from <B>jsx-slack</B>! It supports <Emoji name="wave" /> and <Mrkdwn raw="<!here>" />. </Section> <Actions> <Button url="https://jsx-slack.netlify.app" style="primary">View Demo</Button> <Button actionId="feedback_button">Give Feedback</Button> </Actions> <Context> Posted by our bot on <Date format="DATE_SHORT" /> </Context> </Blocks> `; console.log('Simple Message JSON:\n', JSON.stringify(simpleMessage, null, 2)); // Example: Defining a Slack Modal surface const onboardingModal = jsxslack` <Modal title="Welcome to Our App" close="Cancel" submit="Get Started"> <Section> <p>Fill out your details to get started with our amazing service.</p> </Section> <Input label="Your Full Name" blockId="name_input_block"> <TextInput actionId="name_text_input" placeholder="e.g. Jane Doe" /> </Input> <Input label="Preferred Email" blockId="email_input_block"> <EmailInput actionId="email_text_input" placeholder="jane.doe@example.com" /> </Input> <Divider /> <Context> <p>We respect your privacy. Data will not be shared.</p> </Context> </Modal> `; // console.log('Onboarding Modal JSON:\n', JSON.stringify(onboardingModal, null, 2)); // Uncomment to view modal output

Debug

Known issues

breakingThe implicit URL encoding for `<a>` tags was removed. URLs in `href` attributes are no longer automatically encoded by `encodeURI()`, except for characters conflicting with Slack's mrkdwn format. You must manually wrap `href` values with `encodeURI()` for v5-compatible behavior.

fix

For `<a>` tags, if your `href` value might contain special characters, wrap it with `encodeURI()`: `<a href={encodeURI('https://example.com/?q=hello world')}>Link</a>`

affects: >=6.0.0

breakingSupport for Node.js 12 has been dropped. `jsx-slack` now requires Node.js version 14 or higher.

fix

Upgrade your Node.js environment to version 14 or later to ensure compatibility and receive security updates. Check `package.json` engines field for current requirements.

affects: >=5.0.0

breakingThe `JSXSlack.FunctionComponent` type no longer implicitly includes the `children` prop to align with React 18 type definitions. You must explicitly use `JSXSlack.PropsWithChildren<P>` if your component expects children.

fix

Update your custom `FunctionComponent` type definitions from `JSXSlack.FunctionComponent<P>` to `JSXSlack.FunctionComponent<JSXSlack.PropsWithChildren<P>>`.

affects: >=5.0.0

gotchaSince `jsx-slack` has transitioned towards modern JavaScript module standards, using CommonJS `require()` in newer versions, especially for named exports like components (`Blocks`, `Section`), can lead to import errors or unexpected behavior.

fix

Prefer ES Modules `import` syntax. If you must use CommonJS, ensure your build setup correctly handles ESM interop. For the `jsxslack` template literal, `import { jsxslack } from 'jsx-slack'` is the recommended approach.

affects: >=5.x

gotchaWhen using JSX components like `<Blocks>` or `<Section>`, a JSX transpiler (e.g., Babel or TypeScript) must be configured correctly. This typically involves setting `jsxImportSource` to `'jsx-slack'` in your `tsconfig.json` or Babel config, or adding the `/** @jsxImportSource jsx-slack */` pragma.

fix

For TypeScript, add `"jsxImportSource": "jsx-slack"` to your `compilerOptions` in `tsconfig.json`. For Babel, ensure your JSX plugin is configured to use `jsx-slack` as the runtime or pragma source.

affects: >=5.0.0

Errors

Common errors & fixes

ReferenceError: React is not defined

This error typically occurs when using JSX syntax (`<Blocks>...</Blocks>`) without configuring a JSX transpiler to use `jsx-slack` as the JSX runtime, instead of React.

fix

Configure your TypeScript `tsconfig.json` with `"jsxImportSource": "jsx-slack"` in `compilerOptions`, or add `/** @jsxImportSource jsx-slack */` to the top of your JSX files. For Babel, set the `runtime` option for `@babel/plugin-transform-react-jsx`.

SyntaxError: Named export 'Blocks' not found. The requested module 'jsx-slack' is a CommonJS module, which may not support named exports.

Attempting to import `jsx-slack`'s named exports (e.g., `Blocks`, `Section`) in a CommonJS (`require`) environment where the package is primarily distributed as ES Modules, leading to module interop issues.

fix

Ensure your project is configured for ES Modules (e.g., `"type": "module"` in `package.json`) and use `import { Blocks } from 'jsx-slack'`. If you must use CommonJS, you might need to use dynamic `import()` or adjust your bundler's configuration for ESM interop.

TypeError: (0 , jsx_slack_1.jsxslack) is not a function

This error often indicates an incorrect import or usage of the `jsxslack` template literal function, particularly when using CommonJS `require` syntax or incorrect destructuring in a mixed environment.

fix

Ensure you are using `import { jsxslack } from 'jsx-slack'` and calling it as a tagged template literal: `jsxslack`<template string>`.

Upgrade

Version history

6.1.2latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

17 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/yhatt/jsx-slack ↗

packagehttps://www.npmjs.com/package/jsx-slack ↗

homepagehttps://jsx-slack.github.io ↗