Clutch Plugins

This documentation will help you understand how to create custom plugins for Clutch. Plugins are custom extensions that enhance Clutch's functionality, allowing developers to add new features, components, or integrations while ensuring consistency with the core system.

Getting Started with Plugin Development

To create a custom plugin in Clutch, you need to follow these basic steps:

Create the Plugin File: Your plugin's entry point should be a file named src/clutch.plugin.tsx.

Export an Init Function: The core of your plugin is the init function, which you must export from src/clutch.plugin.tsx. This function serves as the initialization routine for your plugin:

typescript
export function init(pluginId: string) {
    // Plugin initialization code goes here...
}

Utilize the Clutch SDK: Within the init function, you can leverage the available functions from the @clutch-creator/sdk to register custom controls and settings panels.

Clutch SDK Functions

The Clutch SDK provides functions that allow you to extend the platform's capabilities by registering custom settings panels and controls. Here's how you can use them:

Register a Custom Settings Panel

The registerSettingsPanel function allows you to add a new settings panel to the Clutch interface. Below is the type and usage of the function:

typescript
export type TRegisterSettingsPanelOptions = {
  pluginId: string;
  title: string;
  Component: React.FC;
};

export type TRegisterSettingsPanel = (
  options: TRegisterSettingsPanelOptions,
) => void;

export const registerSettingsPanel: TRegisterSettingsPanel = () => undefined;

Usage Example:

typescript
import { registerSettingsPanel } from '@clutch-creator/sdk';

function MySettingsPanel() {
  return <div>My Custom Settings</div>;
}

export function init(pluginId: string) {
  registerSettingsPanel({
    pluginId,
    title: 'My Settings Panel',
    Component: MySettingsPanel,
  });
}

Register a Custom Control

The registerControl function allows you to create custom controls that can be used within the Clutch web builder. Here is its type and a usage example:

typescript
type TRegisterControlOptions = {
  pluginId: string;
  name: string;
  Component: React.FC<any>;
};

export type TRegisterControl = (options: TRegisterControlOptions) => void;

export const registerControl: TRegisterControl = () => undefined;

Usage Example:

typescript
import { registerControl } from '@clutch-creator/sdk';

function MyCustomControl(props: any) {
  return <button {...props}>My Control</button>;
}

export function init(pluginId: string) {
  registerControl({
    pluginId,
    name: 'MyControl',
    Component: MyCustomControl,
  });
}

Styling and Design

For styling your components within a custom plugin, you can use:

React: Leverage React for building your UI components.

CSS Modules: Use CSS modules for scoped styling to ensure your styles do not clash with other styles.

Clutch Design System: Use Clutch’s design system by importing components from @clutch-creator/ds for a consistent look and feel with the tool.

Conclusion

With these tools and guidelines, you can start building powerful and feature-rich plugins for Clutch. By extending Clutch's capabilities, you can provide customized solutions tailored to specific requirements, making the web building experience more user friendly.