Quick start

Once Slack launches through Klack, verify the runtime and add a tiny plugin.

1. Confirm Klack loaded

Open Slack’s DevTools with Cmd + Option + I and run:

Klack.version
Klack.list()

The built-in LoadedIndicator plugin also adds a small badge in the lower-right corner of Slack.

2. Create the plugin directory

mkdir -p ~/.klack/plugins

3. Add a plugin

Create ~/.klack/plugins/hello.ts:

import { definePlugin } from "klack/sdk";
 
export default definePlugin({
  name: "Hello",
  description: "My first Klack plugin",
  setup(klack) {
    klack.ui.addStyle(
      `
        [data-klack-button="Hello:hello"] {
          position: fixed;
          right: 16px;
          bottom: 16px;
          z-index: 2147483647;
          border: 1px solid rgba(255, 255, 255, 0.25);
          border-radius: 6px;
          padding: 8px 12px;
          color: white;
          background: #611f69;
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
          font: 600 13px/1.2 Slack-Lato, Lato, sans-serif;
          cursor: pointer;
        }
 
        [data-klack-button="Hello:hello"]:hover {
          background: #7c3085;
        }
      `,
      { id: "hello" },
    );
 
    klack.ui.addButton({
      id: "hello",
      target: "body",
      label: "Hello from Klack",
      title: "Click to test your first Klack plugin",
      onClick(_event, { button }) {
        button.textContent = "Clicked!";
      },
    });
  },
});

Save the file. A purple Hello from Klack button appears in Slack’s bottom-right corner; click it to verify the plugin is interactive. Klack bundles the file in memory and applies it without a manual build or Slack restart.

Edit this page on GitHub