{"id":13409,"library":"jsx-slack","title":"JSX-Slack: Build Slack Block Kit UIs with JSX","description":"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.","status":"active","version":"6.1.2","language":"javascript","source_language":"en","source_url":"https://github.com/yhatt/jsx-slack","tags":["javascript","slack","block-kit","jsx","notification","bot","modal","typescript"],"install":[{"cmd":"npm install jsx-slack","lang":"bash","label":"npm"},{"cmd":"yarn add jsx-slack","lang":"bash","label":"yarn"},{"cmd":"pnpm add jsx-slack","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"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.","wrong":"const jsxslack = require('jsx-slack')","symbol":"jsxslack","correct":"import { jsxslack } from 'jsx-slack'"},{"note":"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.","wrong":"import Blocks from 'jsx-slack'","symbol":"Blocks, Section","correct":"import { Blocks, Section } from 'jsx-slack'"},{"note":"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`.","wrong":"import { Fragment } from 'react'","symbol":"Fragment","correct":"import { Fragment } from 'jsx-slack'"}],"quickstart":{"code":"import { jsxslack } from 'jsx-slack';\n\n// Example: Crafting a simple Slack message with a button\nconst simpleMessage = jsxslack`\n  <Blocks>\n    <Section>\n      This is a *simple* message from <B>jsx-slack</B>! \n      It supports <Emoji name=\"wave\" /> and <Mrkdwn raw=\"<!here>\" />.\n    </Section>\n    <Actions>\n      <Button url=\"https://jsx-slack.netlify.app\" style=\"primary\">View Demo</Button>\n      <Button actionId=\"feedback_button\">Give Feedback</Button>\n    </Actions>\n    <Context>\n      Posted by our bot on <Date format=\"DATE_SHORT\" />\n    </Context>\n  </Blocks>\n`;\n\nconsole.log('Simple Message JSON:\\n', JSON.stringify(simpleMessage, null, 2));\n\n// Example: Defining a Slack Modal surface\nconst onboardingModal = jsxslack`\n  <Modal title=\"Welcome to Our App\" close=\"Cancel\" submit=\"Get Started\">\n    <Section>\n      <p>Fill out your details to get started with our amazing service.</p>\n    </Section>\n    <Input label=\"Your Full Name\" blockId=\"name_input_block\">\n      <TextInput actionId=\"name_text_input\" placeholder=\"e.g. Jane Doe\" />\n    </Input>\n    <Input label=\"Preferred Email\" blockId=\"email_input_block\">\n      <EmailInput actionId=\"email_text_input\" placeholder=\"jane.doe@example.com\" />\n    </Input>\n    <Divider />\n    <Context>\n      <p>We respect your privacy. Data will not be shared.</p>\n    </Context>\n  </Modal>\n`;\n\n// console.log('Onboarding Modal JSON:\\n', JSON.stringify(onboardingModal, null, 2)); // Uncomment to view modal output\n","lang":"typescript","description":"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."},"warnings":[{"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>`","message":"The 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.","severity":"breaking","affected_versions":">=6.0.0"},{"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.","message":"Support for Node.js 12 has been dropped. `jsx-slack` now requires Node.js version 14 or higher.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Update your custom `FunctionComponent` type definitions from `JSXSlack.FunctionComponent<P>` to `JSXSlack.FunctionComponent<JSXSlack.PropsWithChildren<P>>`.","message":"The `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.","severity":"breaking","affected_versions":">=5.0.0"},{"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.","message":"Since `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.","severity":"gotcha","affected_versions":">=5.x"},{"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.","message":"When 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.","severity":"gotcha","affected_versions":">=5.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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`.","cause":"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.","error":"ReferenceError: React is not defined"},{"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.","cause":"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.","error":"SyntaxError: Named export 'Blocks' not found. The requested module 'jsx-slack' is a CommonJS module, which may not support named exports."},{"fix":"Ensure you are using `import { jsxslack } from 'jsx-slack'` and calling it as a tagged template literal: `jsxslack`<template string>`.","cause":"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.","error":"TypeError: (0 , jsx_slack_1.jsxslack) is not a function"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null}