Plugin System

The Plugin System allows you to extend TeamIDE with custom modules. Plugins can add new tabs to the IDE, integrate with external services, or provide specialized tools for your workflow.

Overview

Plugins are JavaScript bundles that add new functionality to TeamIDE. Each plugin appears as a tab in the module bar and can include:

• Navigation Panel - Left sidebar content
• Main Panel - Center workspace area
• Context Panel - Right sidebar content (optional)

Plugins can be loaded from multiple sources:

Installing Plugins

From GitHub or GitLab

1. Open Settings (gear icon in the bottom-left)
2. Navigate to Plugins
3. Paste the repository URL (e.g., https://github.com/username/my-plugin)
4. Select the branch (defaults to main)
5. Click Add Plugin

TeamIDE validates the repository has a valid teamide-plugin.json manifest before adding.

From a Workspace Repository

If you have a plugin in a repository already cloned in TeamIDE:

1. Open Settings > Plugins
2. In the “Add from Workspace” section, select the repository
3. Optionally specify a subfolder if the plugin is not at the root
4. Click Add

From Local Filesystem

For local development without containers:

1. Open Settings > Plugins
2. Click “Add Local Plugin”
3. Enter the absolute path to your plugin folder
4. Click Add

Managing Plugins

Plugin Status

Each plugin shows its current status:

Enable/Disable Plugins

Toggle the switch next to any plugin to enable or disable it. Disabled plugins won’t load on app startup.

Reload Plugins

Click the refresh icon to reload a plugin. This is useful during development when you’ve updated the plugin code.

Remove Plugins

Click the trash icon to remove a plugin. This only removes it from TeamIDE; it doesn’t delete the source repository.

Plugin Manifest

Every plugin requires a teamide-plugin.json file at the repository root:

{
  "id": "my-plugin",
  "name": "My Plugin",
  "version": "1.0.0",
  "entry": "./dist/index.js",
  "description": "A brief description of what the plugin does",
  "icon": "extension",
  "author": "Your Name",
  "license": "MIT"
}

Required Fields

Optional Fields

Plugin Dependencies

Plugins can declare dependencies on other plugins:

{
  "id": "my-advanced-plugin",
  "name": "Advanced Plugin",
  "version": "1.0.0",
  "entry": "./dist/index.js",
  "dependencies": ["base-plugin", "utility-plugin"]
}

When loading plugins, TeamIDE: 1. Resolves the dependency graph 2. Loads dependencies first (topological sort) 3. Reports errors if dependencies are missing or circular

Toggleable Features

Plugins can define toggleable features that users can enable/disable in Settings:

Create a features.json file alongside your manifest:

{
  "module": {
    "id": "my-plugin",
    "name": "My Plugin",
    "version": "1.0.0"
  },
  "features": [
    {
      "id": "my-plugin-feature-1",
      "name": "Feature Name",
      "description": "What this feature does",
      "default": true,
      "category": "general"
    },
    {
      "id": "my-plugin-experimental",
      "name": "Experimental Feature",
      "description": "This feature is still being tested",
      "default": false,
      "category": "experimental",
      "experimental": true
    }
  ]
}

Feature Categories

Users can toggle features in Settings > Features, organized by module.

Plugin API

Plugins access TeamIDE functionality through the window.__teamide API:

// Open a file in the editor
await window.__teamide.openFile('/src/index.ts');

// Get the current project ID
const projectId = window.__teamide.getProjectId();

// Switch to another module
window.__teamide.switchModule('terminal');

// Save plugin settings
await window.__teamide.savePluginSettings('my-plugin', { theme: 'dark' });

// Load plugin settings
const settings = await window.__teamide.getPluginSettings('my-plugin');

See Plugin API Reference for complete documentation.

Plugin Development

For step-by-step instructions on creating plugins, see Creating Plugins.

Quick Start

1. Create a new repository with teamide-plugin.json
2. Write your plugin using Vue 3 components
3. Build as an IIFE bundle (Vite or Rollup recommended)
4. Add the plugin from GitHub or locally

Available Libraries

Plugins have access to these libraries without bundling them:

• Vue 3 - Composition API, reactivity, components
• Pinia - State management
• Quasar - UI components and utilities

Troubleshooting

Plugin won’t load

1. Check the plugin status for error messages
2. Open the browser console (Developer Tools) for detailed errors
3. Verify teamide-plugin.json has all required fields
4. Ensure the entry path points to a valid JavaScript file

Plugin loads but shows blank/error content

1. Check the console for JavaScript errors
2. Verify your bundle exports a valid ModuleDefinition
3. Ensure components are properly defined

Dependencies not loading

1. Check that all dependencies are installed and enabled
2. Verify dependency IDs match exactly
3. Look for circular dependency errors in the console

Related

• Creating Plugins - Step-by-step plugin creation guide
• Plugin API Reference - Complete API documentation

Changelog