Skip to Content
Documentsโšก Core๐Ÿงฉ Plugin Hub

Plugin Hub

Plugin Hub is where you discover, install, manage, and run plugins that extend CodeExpander beyond snippets. Plugins can add custom tools, converters, formatters, and integrations โ€” all accessible from the search window.


What Can Plugins Do?

Plugins are mini-applications that run inside CodeExpander. They can:

  • Add custom tools โ€” timestamp converters, JSON formatters, color pickers, calculators
  • Process files โ€” drag a file into the search window, a plugin parses and transforms it
  • Integrate with workflows โ€” generate QR codes, encode/decode Base64, format SQL
  • Provide AI-powered features โ€” code review, auto-commenting, test generation

Installing Plugins

The fastest way to install plugins:

  1. Open Plugin Hub from the main window or search window
  2. In the Install section, type the npm package name (e.g. @codeexpander/plugin-timestamp)
  3. Click Install

Official plugins use the @codeexpander/plugin-* prefix and are curated by the team.

Requirements: Node.js and npm must be installed on your system.

From Local Directory

If you have a plugin folder on your machine:

  1. Click Import from directory
  2. Select the folder containing plugin.json and the entry file
  3. The plugin appears in your list immediately

From AI (MCP)

Let AI create plugins for you:

  1. Enable MCP server in Settings โ†’ MCP
  2. Connect your AI assistant (Cursor, Claude Desktop, etc.)
  3. Describe what you need โ€” e.g. โ€œCreate a plugin that converts CSV to Markdown tableโ€
  4. The AI generates the plugin and installs it automatically

Managing Plugins

The Plugin Hub shows all installed plugins as cards. Use the search box to filter by:

  • Name โ€” e.g. โ€œtimestampโ€
  • Category โ€” e.g. โ€œDeveloper toolsโ€, โ€œConvertersโ€
  • Description โ€” keyword search

Run a Plugin

  • From Plugin Hub โ€” Click any plugin card to open its UI
  • From Search Window โ€” Type the plugin name or its defined command triggers
  • With files โ€” Drag files into the search window; file-aware plugins activate automatically

Pin and Organize

  • Pin frequently used plugins so they appear in the search windowโ€™s empty state
  • Hide plugins you rarely use to reduce clutter
  • Uninstall to remove completely

Plugin Anatomy

A plugin is essentially a special snippet with:

  • plugin.json โ€” Metadata (name, description, icon, category, entry file)
  • Entry file โ€” The pluginโ€™s UI (HTML/JS)
  • Commands โ€” Optional keyword triggers for the search window

Example: A โ€œTimestamp Converterโ€ plugin might define:

  • Command: ts โ€” type ts 1714392000 in search to convert instantly
  • UI: A visual calendar picker when opened from Plugin Hub

Creating Your Own Plugin

Option 1: Manual (For Developers)

Create a folder with:

my-plugin/ plugin.json โ† manifest index.html โ† UI

plugin.json example:

{ "main": "index.html", "title": "My Plugin", "description": "Does something useful", "category": "Tools", "features": [ { "code": "myCmd", "explain": "Run my command", "cmds": ["my", "mp"] } ] }

Import via Plugin Hub โ†’ Import from directory.

Option 2: AI-Assisted (For Everyone)

Describe your idea to an AI assistant connected via MCP. The AI handles:

  • Writing the HTML/JS
  • Creating the manifest
  • Installing it automatically

Example prompt: โ€œCreate a plugin that counts words in selected text. Add a wc command for the search window.โ€


Security

Plugins run in isolated windows with limited permissions:

  • No direct access to your snippet data
  • Communication with the host via postMessage only
  • Clipboard and toast actions are explicitly allowed
  • Optional Tauri permissions can be declared in plugin.json (e.g. core:window:allow-set-size)

Typical Workflows

Developer Toolkit

Install: @codeexpander/plugin-timestamp, @codeexpander/plugin-json, @codeexpander/plugin-color

Daily use:

  1. Search window โ†’ ts + paste timestamp โ†’ instant conversion
  2. Search window โ†’ json + paste JSON โ†’ format and validate
  3. Search window โ†’ color + paste HEX โ†’ see RGB/HSL conversions

Content Creator

Install: @codeexpander/plugin-qr, @codeexpander/plugin-base64

  1. Search window โ†’ qr + paste URL โ†’ generate QR code image
  2. Search window โ†’ b64 + paste text โ†’ encode/decode Base64

Team Custom Plugins

Your team builds internal plugins for:

  • Company API signature generation
  • Internal document templates
  • Deployment command runners

Share via npm private registry or local directory sync.