✨ We have sparkling jsx-slack v2! ✨ ▶︎ See highlight of v2
- Block Kit as components - Build contents for any surfaces by composing components for Block Kit with JSX.
- HTML-like formatting - Keep a readability by using well-known elements.
See references to dive into jsx-slack deeply.
When 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.
We believe JSX-based template well-known in front-end development would enhance a developer experience of Slack app.
A project goal is creating an interface to compose contents for Slack with keeping code maintainability by using JSX.
jsx-slack would allow composing contents with simple and predictable HTML-like markup. It helps in understanding the structure of complex contents and interactions.
We require Node.js >= 10. If you are using TypeScript, we also require TS >= 3.7.
# npmnpm install --save @speee-js/jsx-slack
# yarnyarn add @speee-js/jsx-slack
Quick start: Template literal
Do you hate troublesome setting up for JSX? All right. We provide
jsxslack tagged template literal to build blocks right out of the box.
It allows the template syntax almost same as JSX, powered by HTM (Hyperscript Tagged Markup). Setting for transpiler and importing built-in components are not required.
This is a simple example of the template function just to say hello to someone.
const exampleBlock = jsxslack`<Blocks><Section>Hello, <b></b>!</Section></Blocks>`
When you want to use jsx-slack with JSX transpiler, you have to set up to use imported our parser
JSXSlack.createElement or its alias
/** @jsx JSXSlack.h */import JSXSlack Blocks Section from '@speee-js/jsx-slack'const exampleBlock = name<Blocks><Section>Hello <b>name</b>!</Section></Blocks>
▶︎ How to setup JSX transpiler (Babel / TypeScript)
Use template in Slack API
const web = processenvSLACK_TOKENwebchat
It would post a simple Slack message like this:
Block Kit as components
Slack has recommended to use Block Kit for building tempting messages and modals.
By 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.
<Blocks><Section><p>Enjoy building blocks!</p><blockquote><b><a ="">@speee-js/jsx-slack</a></b><br /><i>Build JSON for Slack Block Kit from JSX</i></blockquote><Image ="" ="Speee, Inc." /></Section><Context>Maintained by <a ="">Yuki Hattori</a><img ="" ="yhatt" /></Context><Divider /><Actions><Button ="">GitHub</Button><Button ="">npm</Button></Actions></Blocks>
<Modal ="My first modal" ="Cancel"><Section><p><strong> my first modal!</strong> :sunglasses:</p><p>jsx-slack also has supported Slack Modals</p></Section><Divider /><Input ="text" ="subject" ="Subject" /><Textarea ="message" ="Message" = /><ConversationsSelect="shareWith"="Share with..."=/><Input ="hidden" ="postId" ="xxxx" /><Input ="submit" ="Send" /></Modal>
<Home><Image ="" ="home" /><Section><b>Welcome back to my home!</b> :house_with_garden:</Section><Divider /><Section> next?</Section><Actions><RadioButtonGroup ="next"><RadioButton ="tickets" ><b>See assigned tickets</b> :ticket:<small><i>Check your tickets to start your work</i></small></RadioButton><RadioButton ="reminder"><b>Remind a task later</b> :memo:<small><i> remember a task for you</i></small></RadioButton><RadioButton ="pomodoro"><b>Start pomodoro timer</b> :tomato:<small><i>Get focused on your time with tomato!</i></small></RadioButton></RadioButtonGroup><Button ="start" ="primary">Start working</Button></Actions></Home>
- How to setup JSX transpiler
- JSX components for Block Kit
Examples by use cases
Ported from templates for Block Kit Builder.
- Approval (New device request)
- Approval (Time Off request)
- Onboarding (Taskbot)
- Onboarding (Onboarding App)
- Search Results (TripAgent)
- Search Results (FileCard Agent)
- Search Results
- Settings (App menu)
- Settings (Notification settings)
- List of information (Your itinerary)
- List of information (Ticket app)
As like as React, jsx-slack provides
<JSXSlack.Fragment>) component for higher-order component (HOC) consited of multiple blocks or elements.
For example, you can define the custom block by grouping some blocks with
<Fragment> if you were using JSX transpiler.
Let's say defines
<Header> custom block that is consisted by
/** @jsx JSXSlack.h */const Header =<Fragment><Section><b>children</b></Section><Divider /></Fragment>
Now the defined block can use in
<Blocks> as like as the other blocks:
<Blocks><Header><i>jsx-slack custom block</i> :sunglasses:</Header><Section> build your block</Section></Blocks>
Short syntax for Babel transpiler
/** @jsx JSXSlack.h *//** @jsxFrag JSXSlack.Fragment */const Header =<><Section><b>children</b></Section><Divider /></>
In the case of template literal tag
jsxslack template literal tag has built-in fragments support so
<Fragment> does not have to use.
// Header.jsconst Header = jsxslack`<Section><b></b></Section><Divider />`
A defined component may use in
jsxslack tag as below:
Please notice to a usage of component that has a bit different syntax from JSX.
Is jsx-slack the state of production-ready?
Of 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.
Do you have an app with jsx-slack in public? Please let us know your great app!
Can I develop Slack app only using jsx-slack?
No. jsx-slack just generates JSON for Slack API. You have to send generated message and control interaction with Slack by yourself.
No, 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.
FYI there are some projects based on React (react-reconciler) to generate or manage Slack interactions: phelia framework, react-chat-renderer (< v0.1.0), and rebot. You should use them if you want to use React ecosystem.
- phelia - ⚡️ A reactive Slack application framework.
- react-chat-renderer - React renderer implementation for building rich Slack messages using JSX
- slack-blockx - jsx for Slack block-kit
- Yuki Hattori (@yhatt) - Maintainer