Creating your first addon

In this guide you will create a small theme addon, then build and package it for installation in Mr. Tick. This is a simple way to learn the same project structure used by other integrations. Start in a separate project and install the published SDK:

npm init -y
npm install @mr-tick/sdk@^0.11.0
npm install -D typescript tsup @types/node

Configure TypeScript with strict: true, target: ES2022, module: ESNext and moduleResolution: bundler; set type: module in package.json. Create manifest.yaml and src/index.ts:

id: example-addon
name: Example Addon
version: 0.1.0
author: Example
shortDescription: SDK example
description: Example using the published SDK
capabilities:
  - theme
requiredApiVersion: '>=0.11.0'

import type { AddonContext, AddonTheme, IAddon } from '@mr-tick/sdk'

const theme: AddonTheme = {
  id: 'ocean',
  name: 'Ocean',
  css: ':root { --primary: oklch(0.6 0.15 240); } .dark { --primary: oklch(0.75 0.12 240); }',
}

export default class OceanAddon implements IAddon {
  activate(context: AddonContext): void {
    context.contributions.themes.register(theme)
  }

  deactivate(): void {}
}

Register contributions in activate and return without waiting for runtime readiness. The host cleans up registered contributions on deactivation; close your own sockets, jobs and clients in deactivate.

npx tsup src/index.ts --format esm,cjs --dts --clean
npx mr-tick validate .
npx mr-tick pack . --download-url https://example.com/releases/example-addon.tladdon

Install the resulting .tladdon through the addon manager; a compiled JavaScript file alone is not an installation package. The CLI derives the package API range from its SDK version. Repositories managed by Changesets release through changesets and CI; never manually bump versions or rewrite release history.

See authentication, OAuth PKCE and vault and events.