{"id":13484909,"url":"https://github.com/yhatt/jsx-slack","last_synced_at":"2025-04-13T08:55:25.715Z","repository":{"id":37017149,"uuid":"170699288","full_name":"yhatt/jsx-slack","owner":"yhatt","description":"Build JSON object for Slack Block Kit surfaces from JSX","archived":false,"fork":false,"pushed_at":"2024-12-14T16:11:02.000Z","size":6086,"stargazers_count":473,"open_issues_count":9,"forks_count":17,"subscribers_count":25,"default_branch":"main","last_synced_at":"2025-04-06T05:05:48.805Z","etag":null,"topics":["slack","slack-block-kit","slack-blockkit"],"latest_commit_sha":null,"homepage":"https://jsx-slack.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/yhatt.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["yhatt"]}},"created_at":"2019-02-14T13:55:08.000Z","updated_at":"2025-03-22T01:24:50.000Z","dependencies_parsed_at":"2022-06-29T08:22:56.251Z","dependency_job_id":"27897a83-f3e0-4faf-a97c-a6f13f929ea7","html_url":"https://github.com/yhatt/jsx-slack","commit_stats":{"total_commits":1152,"total_committers":9,"mean_commits":128.0,"dds":"0.34895833333333337","last_synced_commit":"06b271ceee70aad3f8a7257660201444c5c7f9d3"},"previous_names":[],"tags_count":74,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhatt%2Fjsx-slack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhatt%2Fjsx-slack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhatt%2Fjsx-slack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yhatt%2Fjsx-slack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yhatt","download_url":"https://codeload.github.com/yhatt/jsx-slack/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248688544,"owners_count":21145763,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["slack","slack-block-kit","slack-blockkit"],"created_at":"2024-07-31T17:01:38.463Z","updated_at":"2025-04-13T08:55:25.693Z","avatar_url":"https://github.com/yhatt.png","language":"TypeScript","funding_links":["https://github.com/sponsors/yhatt"],"categories":["TypeScript",":hammer_and_wrench: \u0026nbsp; Libraries and SDKs","🌐 Web Development - Frontend"],"sub_categories":["JavaScript/TypeScript"],"readme":"\u003ch1 align=\"center\"\u003e\n  \u003ca href=\"https://npm.im/jsx-slack\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/yhatt/jsx-slack/HEAD/demo/public/logo.svg?sanitize=true\" width=\"100\" /\u003e\u003cbr /\u003e\n    jsx-slack\n  \u003c/a\u003e\n\u003c/h1\u003e\n\n[![CircleCI](https://img.shields.io/circleci/project/github/yhatt/jsx-slack/main.svg?logo=circleci)][circleci]\n[![Codecov](https://img.shields.io/codecov/c/github/yhatt/jsx-slack/main.svg?logo=codecov)](https://codecov.io/gh/yhatt/jsx-slack)\n[![npm](https://img.shields.io/npm/v/jsx-slack.svg?logo=npm)][npm]\n[![LICENSE](https://img.shields.io/github/license/yhatt/jsx-slack.svg)][license]\n\n[circleci]: https://circleci.com/gh/yhatt/jsx-slack/\n[npm]: https://npm.im/jsx-slack\n[license]: ./LICENSE\n\nBuild JSON object for [Slack][slack] [block kit] surfaces from [JSX].\n\n[slack]: https://slack.com\n[jsx]: https://reactjs.org/docs/introducing-jsx.html\n[react]: https://reactjs.org/\n[block kit]: https://api.slack.com/block-kit\n[block kit builder]: https://api.slack.com/tools/block-kit-builder\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://jsx-slack.netlify.app/\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/yhatt/jsx-slack/HEAD/docs/jsx.png\" width=\"550\" /\u003e\n  \u003c/a\u003e\n  \u003cbr /\u003e\n  \u003ca href=\"https://jsx-slack.netlify.app/#bkb:message\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/yhatt/jsx-slack/HEAD/docs/slack-notification.png\" width=\"532\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n:point_right: **[Try our REPL demo](https://jsx-slack.netlify.app/)** in https://jsx-slack.netlify.app/.\n\n### Features\n\n- **[Block Kit as components](docs/jsx-components-for-block-kit.md)** - Build contents for any surfaces by composing components for Block Kit with JSX.\n- **[HTML-like formatting](docs/html-like-formatting.md)** - Keep a readability by using well-known elements.\n\nSee **[references](#references)** to dive into jsx-slack deeply.\n\n## Motivation\n\nWhen developing Slack-integrated app, continuous maintenance of the rich contents is a difficult task. A team member must read and write JSON with deep knowledge about specifications of payload for Slack API.\n\nWe believe JSX-based template well-known in front-end development would enhance a developer experience of Slack app.\n\n## Project goal\n\nA project goal is creating an interface to compose contents for Slack with keeping code maintainability by using [JSX].\n\njsx-slack would allow composing contents with simple and predictable HTML-like markup. It helps in understanding the structure of complex contents and interactions.\n\n## Install\n\n### [Node.js](https://nodejs.org/)\n\nWe require Node.js \u003e= 14. If you are using TypeScript, we also require TS \u003e= 3.7.\n\n```bash\n# npm\nnpm install --save jsx-slack\n```\n\n```bash\n# yarn\nyarn add jsx-slack\n```\n\nNow you can begin to write the code with [`jsxslack` template literal tag](#quick-start-template-literal). Furthermore, [setting up JSX transpiler](docs/how-to-setup-jsx-transpiler.md) would make the best development experience.\n\n### [Deno](https://deno.land/) ([Slack CLI](https://api.slack.com/future/tools/cli))\n\nWe also have Deno support. If you are using Deno v1.28 and later, [you can import jsx-slack through npm directly](https://deno.land/manual/node/npm_specifiers).\n\n```typescript\n// `jsxslack` template literal tag\nimport { jsxslack } from 'npm:jsx-slack@6'\n```\n\n```typescript\n// JSX transpilation\n/** @jsxImportSource npm:jsx-slack@6 */\nimport { Blocks, Section } from 'npm:jsx-slack@6'\n```\n\n\u003e **Note**\n\u003e Alternatively [you also can import jsx-slack through esm.sh CDN](https://deno.land/manual@v1.28.1/node/cdns#esmsh): [`https://esm.sh/jsx-slack@6`](https://esm.sh/jsx-slack@6)\n\n## Usage\n\n### Quick start: Template literal\n\nDo you hate troublesome setting up for JSX? All right. We provide **`jsxslack`** tagged template literal to build blocks _right out of the box_.\n\nIt allows the template syntax almost same as JSX, powered by [HTM (Hyperscript Tagged Markup)](https://github.com/developit/htm). Setting for transpiler and importing built-in components are not required.\n\nThis is a simple example of the template function just to say hello to someone.\n\n```javascript\nimport { jsxslack } from 'jsx-slack'\n\nexport const exampleBlock = ({ name }) =\u003e jsxslack`\n  \u003cBlocks\u003e\n    \u003cSection\u003e\n      Hello, \u003cb\u003e${name}\u003c/b\u003e!\n    \u003c/Section\u003e\n  \u003c/Blocks\u003e\n`\n```\n\n### [JSX Transpiler](docs/how-to-setup-jsx-transpiler.md)\n\nWhen you want to use jsx-slack with JSX transpiler, you have to set up to use our runtime for JSX.\n\n**[▶︎ How to setup JSX transpiler](docs/how-to-setup-jsx-transpiler.md)** (Babel / TypeScript / Deno)\n\n```jsx\n/** @jsxImportSource jsx-slack */\nimport { Blocks, Section } from 'jsx-slack'\n\nexport const exampleBlock = ({ name }) =\u003e (\n  \u003cBlocks\u003e\n    \u003cSection\u003e\n      Hello, \u003cb\u003e{name}\u003c/b\u003e!\n    \u003c/Section\u003e\n  \u003c/Blocks\u003e\n)\n```\n\n### Use template in Slack API\n\nAfter than, just use created template in Slack API. We are using the official Node SDK [`@slack/web-api`](https://github.com/slackapi/node-slack-sdk) in this example. [See also Slack guide.](https://slackapi.github.io/node-slack-sdk/web_api)\n\n```javascript\nimport { WebClient } from '@slack/web-api'\nimport { exampleBlock } from './example.jsx'\n\nconst web = new WebClient(process.env.SLACK_TOKEN)\n\nweb.chat\n  .postMessage({\n    channel: 'C1234567890',\n    blocks: exampleBlock({ name: 'Yuki Hattori' }),\n  })\n  .then((res) =\u003e console.log('Message sent: ', res.ts))\n  .catch(console.error)\n```\n\nIt would post a simple Slack message like this:\n\n[\u003cimg src=\"./docs/slack-example.png\" width=\"193\" /\u003e][block-kit-builder-example]\n\n[\u003cimg src=\"./docs/preview-btn.svg\" width=\"240\" /\u003e][block-kit-builder-example]\n\n[block-kit-builder-example]: https://jsx-slack.netlify.app/#bkb:jsx:eJyzccrJT84utuNSULAJTk0uyczPA7EVFDxSc3LydRRskuwiS7MzFTwSS0ryizJt9JPsFEFq9eGKbfShRgAAVeQWug==\n\n## Block Kit as components\n\nSlack has recommended to use **[Block Kit]** for building tempting messages and modals.\n\nBy using jsx-slack, you can build a template with piling up Block Kit blocks by JSX. It is feeling like using components in React or Vue.\n\n### [For messaging](https://jsx-slack.netlify.app/)\n\n```jsx\n\u003cBlocks\u003e\n  \u003cSection\u003e\n    \u003cp\u003eEnjoy building blocks!\u003c/p\u003e\n    \u003cblockquote\u003e\n      \u003cb\u003e\n        \u003ca href=\"https://github.com/yhatt/jsx-slack\"\u003ejsx-slack\u003c/a\u003e\n      \u003c/b\u003e\n      \u003cbr /\u003e\n      \u003ci\u003eBuild JSON for Slack Block Kit from JSX\u003c/i\u003e\n    \u003c/blockquote\u003e\n    \u003cimg src=\"https://github.com/yhatt.png\" alt=\"yhatt\" /\u003e\n  \u003c/Section\u003e\n  \u003cContext\u003e\n    Maintained by \u003ca href=\"https://github.com/yhatt\"\u003eYuki Hattori\u003c/a\u003e\n    \u003cimg src=\"https://github.com/yhatt.png\" alt=\"yhatt\" /\u003e\n  \u003c/Context\u003e\n  \u003cDivider /\u003e\n  \u003cActions\u003e\n    \u003cButton url=\"https://github.com/yhatt/jsx-slack\"\u003eGitHub\u003c/Button\u003e\n    \u003cButton url=\"https://npm.im/jsx-slack\"\u003enpm\u003c/Button\u003e\n  \u003c/Actions\u003e\n\u003c/Blocks\u003e\n```\n\n### [For modal](https://jsx-slack.netlify.app/#modal)\n\n```jsx\n\u003cModal title=\"My first modal\" close=\"Cancel\"\u003e\n  \u003cSection\u003e\n    \u003cp\u003e\n      \u003cstrong\u003eIt's my first modal!\u003c/strong\u003e :sunglasses:\n    \u003c/p\u003e\n    \u003cp\u003ejsx-slack also has supported Slack Modals.\u003c/p\u003e\n  \u003c/Section\u003e\n  \u003cDivider /\u003e\n\n  \u003cInput type=\"text\" name=\"subject\" label=\"Subject\" required /\u003e\n  \u003cTextarea name=\"message\" label=\"Message\" maxLength={500} /\u003e\n\n  \u003cConversationsSelect\n    name=\"shareWith\"\n    label=\"Share with...\"\n    required\n    include={['public', 'im']}\n    excludeBotUsers\n    responseUrlEnabled\n  /\u003e\n\n  \u003cInput type=\"hidden\" name=\"postId\" value=\"xxxx\" /\u003e\n  \u003cInput type=\"submit\" value=\"Send\" /\u003e\n\u003c/Modal\u003e\n```\n\n### [For home tab](https://jsx-slack.netlify.app/#home)\n\n```jsx\n\u003cHome\u003e\n  \u003cImage src=\"https://source.unsplash.com/random/960x240?home\" alt=\"home\" /\u003e\n  \u003cHeader\u003eWelcome back to my home! :house_with_garden:\u003c/Header\u003e\n  \u003cDivider /\u003e\n  \u003cSection\u003eWhat's next?\u003c/Section\u003e\n  \u003cActions\u003e\n    \u003cRadioButtonGroup actionId=\"next\"\u003e\n      \u003cRadioButton value=\"tickets\" checked\u003e\n        \u003cb\u003eSee assigned tickets\u003c/b\u003e :ticket:\n        \u003csmall\u003e\n          \u003ci\u003eCheck your tickets to start your work.\u003c/i\u003e\n        \u003c/small\u003e\n      \u003c/RadioButton\u003e\n      \u003cRadioButton value=\"reminder\"\u003e\n        \u003cb\u003eRemind a task later\u003c/b\u003e :memo:\n        \u003csmall\u003e\n          \u003ci\u003eI'll remember a task for you.\u003c/i\u003e\n        \u003c/small\u003e\n      \u003c/RadioButton\u003e\n      \u003cRadioButton value=\"pomodoro\"\u003e\n        \u003cb\u003eStart pomodoro timer\u003c/b\u003e :tomato:\n        \u003csmall\u003e\n          \u003ci\u003eGet focused on your time, with tomato!\u003c/i\u003e\n        \u003c/small\u003e\n      \u003c/RadioButton\u003e\n    \u003c/RadioButtonGroup\u003e\n    \u003cButton actionId=\"start\" style=\"primary\"\u003e\n      Start working\n    \u003c/Button\u003e\n  \u003c/Actions\u003e\n\u003c/Home\u003e\n```\n\n### References\n\n- **[How to setup JSX transpiler](docs/how-to-setup-jsx-transpiler.md)**\n- **[JSX components for Block Kit](docs/jsx-components-for-block-kit.md)**\n  - [Block containers](docs/block-containers.md)\n  - [Layout blocks](docs/layout-blocks.md)\n  - [Block elements](docs/block-elements.md)\n    - [Interactive components](docs/block-elements.md#user-content-interactive-components)\n    - [Composition objects](docs/block-elements.md#user-content-composition-objects)\n    - [Input components](docs/block-elements.md#user-content-input-components)\n\n* **[HTML-like formatting](docs/html-like-formatting.md)**\n* **[About escape and exact mode](docs/about-escape-and-exact-mode.md)**\n\n- **[Highlight of v2](docs/highlight/v2.md)**\n\n### Examples by use cases\n\nPorted from templates for [Block Kit Builder].\n\n#### [Message](https://api.slack.com/tools/block-kit-builder?mode=message\u0026template=1)\n\n- [Approval (New device request)](https://jsx-slack.netlify.app/#messagingApprovalNewDevice)\n- [Approval (Time Off request)](https://jsx-slack.netlify.app/#messagingApprovalTimeOff)\n- [Notification](https://jsx-slack.netlify.app/#messagingNotification)\n- [Onboarding (Taskbot)](https://jsx-slack.netlify.app/#messagingOnboardingTaskbot)\n- [Onboarding (Onboarding App)](https://jsx-slack.netlify.app/#messagingOnboardingApp)\n- [Poll](https://jsx-slack.netlify.app/#messagingPoll)\n- [Search Results (TripAgent)](https://jsx-slack.netlify.app/#messagingSearchResultsTripAgent)\n- [Search Results (FileCard Agent)](https://jsx-slack.netlify.app/#messagingSearchResultsFileCard)\n- [Newsletter](https://jsx-slack.netlify.app/#messagingNewsletter)\n\n#### [Modal](https://api.slack.com/tools/block-kit-builder?mode=modal\u0026template=1)\n\n- [Poll](https://jsx-slack.netlify.app/#modalPoll)\n- [Search Results](https://jsx-slack.netlify.app/#modalSearchResults)\n- [Settings (App menu)](https://jsx-slack.netlify.app/#modalSettingsAppMenu)\n- [Settings (Notification settings)](https://jsx-slack.netlify.app/#modalSettingsNotification)\n- [List of information (Your itinerary)](https://jsx-slack.netlify.app/#modalListOfInformationYourItinerary)\n- [List of information (Ticket app)](https://jsx-slack.netlify.app/#modalListOfInformationTicketApp)\n\n#### [App Home](https://api.slack.com/tools/block-kit-builder?mode=appHome\u0026template=1)\n\n- [Project Tracker](https://jsx-slack.netlify.app/#appHomeProjectTracker)\n- [Calendar](https://jsx-slack.netlify.app/#appHomeCalendar)\n- [Expense App](https://jsx-slack.netlify.app/#appHomeExpenseApp)\n- [Todo App](https://jsx-slack.netlify.app/#appHomeTodoApp)\n\n## Fragments\n\n[As like as React](https://reactjs.org/docs/fragments.html), jsx-slack provides `\u003cFragment\u003e` (`\u003cJSXSlack.Fragment\u003e`) component for higher-order component (HOC) consited of multiple blocks or elements.\n\nFor example, you can define the custom block by grouping some blocks with `\u003cFragment\u003e` if you were using JSX transpiler.\n\nLet's say about defining `\u003cHeading\u003e` custom block that is consisted by `\u003cSection\u003e` and `\u003cDivider\u003e`.\n\n```javascript\nimport { Fragment, Section, Divider } from 'jsx-slack'\n\nconst Heading = ({ children }) =\u003e (\n  \u003cFragment\u003e\n    \u003cSection\u003e\n      \u003cb\u003e{children}\u003c/b\u003e\n    \u003c/Section\u003e\n    \u003cDivider /\u003e\n  \u003c/Fragment\u003e\n)\n```\n\nNow the defined block can use in `\u003cBlocks\u003e` as like as the other blocks:\n\n```jsx\n\u003cBlocks\u003e\n  \u003cHeading\u003e\n    \u003ci\u003ejsx-slack custom block\u003c/i\u003e :sunglasses:\n  \u003c/Heading\u003e\n  \u003cSection\u003eLet's build your block.\u003c/Section\u003e\n\u003c/Blocks\u003e\n```\n\n[\u003cimg src=\"./docs/custom-header-block.png\" width=\"600\" /\u003e][custom-header-block]\n\n[\u003cimg src=\"./docs/preview-btn.svg\" width=\"240\" /\u003e][custom-header-block]\n\n[custom-header-block]: https://jsx-slack.netlify.app/#bkb:jsx:eJxVjrEOgzAQQ3e-4jYmejs6Zag6duMLSIjQlZRIOEHt3xcaBphsD8-23EN0E0xFJJ13SeO8-y3ZoptT88KnQejdRC4jxTfZnRJWQy3yPIYe8GgLyH9S-FQnD1118AvxZejpUw2yWcNA35iXUns7ocLHvx9tITN_\n\n### Short syntax for fragments\n\nBabel transpiler and TypeScript 4 can use [the short syntax `\u003c\u003e\u003c/\u003e` for fragments](https://reactjs.org/docs/fragments.html#short-syntax). See [how to setup JSX transpiler](docs/how-to-setup-jsx-transpiler.md).\n\n```javascript\nimport { Section, Divider } from 'jsx-slack'\n\nconst Heading = ({ children }) =\u003e (\n  \u003c\u003e\n    \u003cSection\u003e\n      \u003cb\u003e{children}\u003c/b\u003e\n    \u003c/Section\u003e\n    \u003cDivider /\u003e\n  \u003c/\u003e\n)\n```\n\n### In the case of template literal tag\n\n`jsxslack` template literal tag has [built-in fragments support](https://github.com/developit/htm#improvements-over-jsx) so `\u003cFragment\u003e` does not have to use.\n\n```javascript\n// Heading.js\nimport { jsxslack } from 'jsx-slack'\n\nexport const Heading = ({ children }) =\u003e jsxslack`\n  \u003cSection\u003e\n    \u003cb\u003e${children}\u003c/b\u003e\n  \u003c/Section\u003e\n  \u003cDivider /\u003e\n`\n```\n\nA defined component may use in `jsxslack` tag as below:\n\n```javascript\nimport { jsxslack } from 'jsx-slack'\nimport { Heading } from './Heading'\n\nconsole.log(jsxslack`\n  \u003cBlocks\u003e\n    \u003c${Heading}\u003e\n      \u003ci\u003ejsx-slack custom block\u003c/i\u003e :sunglasses:\n    \u003c//\u003e\n    \u003cSection\u003eLet's build your block.\u003c/Section\u003e\n  \u003c/Blocks\u003e\n`)\n```\n\nPlease notice to a usage of component that has a bit different syntax from JSX.\n\n## Frequently questions\n\n### Is jsx-slack the state of production-ready?\n\nOf course! In our workspace, we are developing Slack custom app for internal with providing great UX powered by jsx-slack. And some apps published in Slack app directory are also using jsx-slack in production.\n\nDo you have an app with jsx-slack in public? Please let us know your great app!\n\n### Can I develop Slack app _only using jsx-slack_?\n\nNo. jsx-slack just generates JSON for Slack API. You have to send generated message and control interaction with Slack by yourself.\n\nDon't worry; you can use jsx-slack together with helpful libraries: [Bolt framework for JavaScript](https://slack.dev/bolt) (recommended), [Slack Node SDK](https://slack.dev/node-slack-sdk/), and third-party library (e.g. [BotKit](https://botkit.ai/), [Bottender](https://bottender.js.org/)).\n\n### Is this working based on [React]?\n\nNo, jsx-slack has very similar API to React but is not based on React, because our library doesn't need to use some features provided by React: incremental updates, event handling, reference to the rendered JSON, and component class.\n\nNevertheless, jsx-slack can use React's methodology (composition of components) through JSX and the basic JavaScript function. In addition, we can follow up rapidly-evolving Slack Block Kit by keeping the smallest requirements without depending on React.\n\nFYI there are some projects based on React ([react-reconciler](https://github.com/facebook/react/tree/master/packages/react-reconciler)) to generate or manage Slack interactions: [phelia](https://github.com/maxchehab/phelia) framework, [react-chat-renderer](https://github.com/asynchronous-dev/react-chat-renderer) (\u003c v0.1.0), and [rebot](https://github.com/bradennapier/rebot). You should use them if you want to use React ecosystem.\n\n\u003c!-- NOTE: The latest react-chat-renderer is no longer based on react-reconciler. It implements custom JSX renderer as same as jsx-slack. --\u003e\n\n### How do you spell this library?\n\n\"jsx-slack\" with all in lowercase. It is neither of \"JSX-Slack\" nor \"JSX Slack\".\n\n## Similar projects\n\n\u003c!-- This section is listing only libraries that generates Block Kit JSON from JSX. --\u003e\n\n- [phelia](https://github.com/maxchehab/phelia) - :zap: A reactive Slack application framework. \u003c!-- React-based Slack app framework with familiar event handling by hooks --\u003e\n- [react-chat-renderer](https://github.com/asynchronous-dev/react-chat-renderer) - React renderer implementation for building rich Slack messages using JSX \u003c!-- Custom JSX renderer for Slack + async component support --\u003e\n- [slack-blockx](https://github.com/kevin940726/slack-blockx) - jsx for Slack block-kit \u003c!-- Block Kit JSON builder whose exactly same concept as jsx-slack --\u003e\n\n## Author\n\n- \u003cimg src=\"https://github.com/yhatt.png\" alt=\"@yhatt\" width=\"24\" height=\"24\" valign=\"bottom\" /\u003e Yuki Hattori ([@yhatt](https://github.com/yhatt)) - Maintainer\n\n## License\n\n[MIT License](LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhatt%2Fjsx-slack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyhatt%2Fjsx-slack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyhatt%2Fjsx-slack/lists"}