Skip to main content

​
Building plugins

Collabase supports a dual plugin architecture, allowing you to extend both the user interface (Frontend) and the server logic (Backend) independently.

​
Dual architecture

When extending Collabase, you choose the right tool for the job depending on your needs.

​
1. SDK apps

SDK apps are frontend applications built in React, Vue, or vanilla JS, embedded inside Collabase via a secure iFrame. They look and feel like native features using the @collabase/ui library. Use case: Adding a new custom view, an integration dashboard, or specialized tooling to the Collabase sidebar.

​
2. WASM plugins

WASM Plugins are raw binary backend modules triggered by system events (e.g., when a page is published or a task is created). They run inside a high-speed, secure sandbox without UI overhead. Use case: Applying complex validation rules to task status changes, or connecting deeply into the execution of an automation workflow. Read more about Building WASM Plugins.

​
Building SDK apps

An SDK app requires you to host your own web application and expose a collabase.app.json manifest at its root.

​
The manifest file

The manifest describes your plugin’s permissions and how it integrates into the main Collabase UI. 
{
  "id": "my-custom-dashboard",
  "name": "Custom Dashboard",
  "version": "1.0.0",
  "description": "An integrated dashboard tracking external logistics data.",
  "permissions": ["tasks:read", "tasks:write", "projects:read"],
  "modules": {
    "navigation": [
      { 
        "id": "main", 
        "label": "Logistics", 
        "route": "/", 
        "position": "sidebar" 
      }
    ]
  },
  "hosting": { 
    "type": "remote", 
    "url": "https://logistics-app.mycompany.internal" 
  }
}

​
Context passing and bridge

When Collabase loads your SDK app, it embeds your hosting.url into an iframe. The @collabase/sdk manages a secure postMessage bridge, allowing your hosted app to request data from the parent Collabase instance. 
import { CollabaseApp } from "@collabase/sdk/app";

const app = new CollabaseApp();

// Fetches data transparently from the parent 
const currentUser = await app.users.getCurrent();
const activeProject = await app.context.getProject();

​
Managing plugins

Collabase provides a plugin dashboard to manage both SDK apps and WASM plugins.

​
How to install a plugin

1

Open the Admin Dashboard

Navigate to System Administration → Plugins.
2

Select Type

Ensure you are on the SDK Apps tab.
3

Enter Manifest URL

Paste the HTTPS URL pointing to your collabase.app.json file. The server will fetch and parse it.
4

Review Permissions & Confirm

Collabase will present the requested scopes (e.g., tasks:write). Click Install to complete the process.

​
Monitoring and logs

Once installed, your plugin appears in the main table. For WASM Plugins, you can expand the row to view the real-time Live Log Viewer. For SDK Apps, the execution occurs in the user’s browser, so standard browser DevTools apply.