---
title: "Overview"
description: "Extend Ecopages with processor and integration plugins."
order: 1
---

# Plugins Overview

Ecopages provides two main types of plugins to extend its functionality:

1. **Processors**: Handle file transformations and asset processing
2. **Integrations**: Add support for new templating engines or frameworks

## Types of Plugins

### Processors

Processors are plugins that handle file transformations. They can:

- Transform files during build time
- Generate additional assets
- Optimize content
- Provide build loaders for development

Examples include the PostCSS processor and Image processor.

### Integrations

Integrations add support for different templating engines and frameworks. They:

- Define file extensions to handle
- Provide rendering logic
- Manage dependencies
- Handle asset inclusion

Examples include the KitaJS, React, and Lit integrations.

### Source Transforms

Source transforms rewrite module source during browser and HMR builds. They are configured separately from processors and integrations. See [Source Transforms](/docs/plugins/source-transforms).

## Plugin Configuration

Plugins are configured in your `eco.config.ts` file:

```typescript
import { ConfigBuilder } from '@ecopages/core/config-builder';
import { postcssProcessorPlugin } from '@ecopages/postcss-processor';
import { ecopagesJsxPlugin } from '@ecopages/ecopages-jsx';

const config = await new ConfigBuilder()
	.setProcessors([postcssProcessorPlugin()])
	.setIntegrations([ecopagesJsxPlugin()])
	.build();
```

See [Custom Processor](/docs/plugins/custom-processor) and [Custom Integration](/docs/plugins/custom-integration) for details on creating your own plugins.