Menu ▾ ▴

Plugin API

Plugin (1) API (1)
thororen

Equicord Plugin API Reference

Equicord provides a robust and convenient API layer to accelerate plugin development. It simplifies state management, layout rendering, context menu patches, and command registration.

Plugin Settings

Define a toggleable plugin setting which will allow users to toggle a feature in your plugin’s settings modal:

// Define settings. This will return a reactive settings object.
// - To read: `const enableFeature = settings.store.coolFeature`
// - To write: `settings.store.coolFeature = false`
const settings = definePluginSettings({
    coolFeature: {
        type: OptionType.BOOLEAN,
        description: "Enable a very cool feature",
        default: true
    }
});

export default definePlugin({
    name: "MyCoolPlugin",
    // You MUST include your plugin settings in your plugin definition or you will get an error!
    settings
});

function ReactComponent() {
    // Reactive subscription that will automatically update your component when the setting changes
    const { coolFeature } = settings.use(["coolFeature"]);

    return <div>{coolFeature ? "Cool feature is enabled" : "Cool feature is disabled"}</div>;
}

Message Accessories

Message accessories are elements that appear below messages in chat, such as embeds.
Define the renderMessageAccessory method on your plugin object to make use of this feature. This is the easiest way to add custom elements to messages.
`definePlugin({
name: "MyCoolPlugin",
renderMessageAccessory(props) {
const { content } = props.message;

    return (
        <Paragraph size="sm" weight="bold">
            <div>Wow this is a great message!</div>
            {content.length > 1000 && <div>But wow it's long!!</div>}
        </Paragraph>
    );
}

});`

Message Popover Buttons

The message popover is the little bar that appears in the top-right corner of a message when you hover over it.
You define it via the messagePopoverButton property on your plugin object. The icon is used for Settings > Equicord > Plugins > Manage Plugin UI Elements. I’m not going to explain this further, just look at how the QuickMention plugin uses it.

definePlugin({
    name: "MyCoolPlugin",
    messagePopoverButton: {
        icon: IconComponent,
        render: ButtonComponent
    }
});

Core Components

  • Plugin Settings: Created via definePluginSettings to output a reactive state store. Settings must be registered inside your main definition block to avoid runtime crashes. Components can cleanly subscribe to individual option changes dynamically.
  • Slash Commands: Integrated directly by declaring configurations inside the commands array. The API supports core command functionalities, execution callbacks, arguments, and sub-commands out of the box.
  • Context Menus: Registered through the contextMenus object by matching target interface IDs. It allows developers to seamlessly push custom action components onto existing context trays.

Interface UI Additions

  • Chat Bar Buttons: Appends custom interactive buttons inside the native text input utility bar alongside default stickers and emojis.
  • Message Popover Buttons: Mounts custom short-action utilities directly onto the popover deck that surfaces when hovering over chat items.
  • Message Accessories: Injects structural layout extensions directly beneath message rows. This provides a clean method for drawing custom embeddings or rich text metrics.
  • Interface Decorations: Custom nodes can be dynamically appended to metadata areas. This includes message decorations positioned beside message author credits or structural rows inside the channel member list.

Lifecycle Event Listeners

  • onMessageClick: Triggers targeted logic blocks immediately when a user clicks an active message element.
  • onBeforeMessageSend: Intercepts, formats, or processes text payloads immediately prior to dispatching them to the gateway.
  • onBeforeMessageEdit: Evaluates and processes message edits before the update event commits to the active view channel.
veeam logo