Plugins

Extend OpenCode's capabilities with a rich ecosystem of plugins for frameworks, tools, and custom functionality.

Official Plugins

Plugin	Description	Install
@opencode/react	React support with Fast Refresh	npm i -D @opencode/react
@opencode/vue	Vue 3 single-file components	npm i -D @opencode/vue
@opencode/svelte	Svelte compiler integration	npm i -D @opencode/svelte
@opencode/typescript	TypeScript compilation	npm i -D @opencode/typescript
@opencode/tailwind	Tailwind CSS integration	npm i -D @opencode/tailwind
@opencode/pwa	Progressive Web App support	npm i -D @opencode/pwa

Using Plugins

Add plugins to your configuration:

// opencode.config.js
import react from '@opencode/react';
import tailwind from '@opencode/tailwind';

export default {
  plugins: [
    react(),
    tailwind()
  ]
}

React Plugin

Full React support with Fast Refresh for instant updates:

import react from '@opencode/react';

export default {
  plugins: [
    react({
      // Enable React Fast Refresh
      fastRefresh: true,
      // Use automatic JSX runtime
      jsxRuntime: 'automatic',
      // Babel plugins
      babel: {
        plugins: ['@babel/plugin-proposal-decorators']
      }
    })
  ]
}

Vue Plugin

Vue 3 support with single-file component handling:

import vue from '@opencode/vue';

export default {
  plugins: [
    vue({
      // Enable Vue devtools
      devtools: true,
      // Custom template compilers
      template: {
        transformAssetUrls: true
      }
    })
  ]
}

Tailwind CSS Plugin

Automatic Tailwind CSS integration:

import tailwind from '@opencode/tailwind';

export default {
  plugins: [
    tailwind({
      // Path to tailwind config
      config: './tailwind.config.js',
      // Enable JIT mode
      jit: true
    })
  ]
}

Creating Plugins

Create custom plugins to extend OpenCode:

// my-plugin.js
export default function myPlugin(options = {}) {
  return {
    name: 'my-plugin',
    
    // Called once when config is resolved
    configResolved(config) {
      console.log('Config resolved:', config);
    },
    
    // Transform source code
    transform(code, id) {
      if (id.endsWith('.custom')) {
        return {
          code: transformCustomFile(code),
          map: null
        };
      }
    },
    
    // Modify the build
    buildStart() {
      console.log('Build starting...');
    },
    
    buildEnd() {
      console.log('Build complete!');
    }
  };
}

Plugin Hooks

Hook	Description
configResolved	Called after config is resolved
buildStart	Called at the start of each build
transform	Transform individual modules
buildEnd	Called at the end of each build
closeBundle	Called after bundle is written

Community Plugins

Popular community plugins:

• opencode-plugin-icons - Auto-import icons from icon sets
• opencode-plugin-markdown - Import markdown as components
• opencode-plugin-compress - Compress assets on build
• opencode-plugin-analyze - Bundle size analyzer
• opencode-plugin-legacy - Legacy browser support

npm install opencode-plugin-icons opencode-plugin-compress