Creating Plugins

Prerequisites

A development Vencord install
VSCode with the extensions recommended by Vencord

Other knowledge requirements include:

JavaScript/TypeScript knowledge
Basic regex knowledge
Basic knowledge of the command line
Basic knowledge of how to use chrome devtools
The ability to understand code from just reading it, without requiring documentation
Basic react knowledge (if you want to do anything with ui)

Plugin Setup

First, decide whether you want to use the src/plugins or src/userplugins folder.

Plugins inside src/plugins are tracked via git and are included in the official Vencord releases.

Use this location if you intend to submit your plugin for inclusion in Vencord.

Plugins inside src/userplugins are private. They are not tracked via git.

Use this location if you don’t intend to submit your plugin for inclusion in Vencord.

Once you have decided, create a folder with the name of your plugin inside the chosen directory.

The folder’s name should be in camelCase. For example myFirstPlugin (NOT MyFirstPlugin or my first plugin)

Plugin Structure

There are 3 special files you can create here:

Your plugin’s entry point. This is where most of your plugin’s code will live and where you define things like its name and description.

Code in this file runs in the browser, so you can use all browser APIs here.
Node.js APIs like fs or child_process are not available here. If you need them, you can do so in the native.ts file.

Your plugin’s native entry point. This code will run inside NodeJS instead of the browser. You can use all Node.JS apis here, such as fs or child_process.

Browser APIs are not available here. If you need them, you can do so in the index.ts file.

Plugin Boilerplate

Start creating your plugin by adding an index.ts file inside your plugin’s folder.

Type vcPlugin in the file, and you should automatically be suggested the “Define Plugin” template.

Now that you’ve done this, the file should look like this:

import { Devs } from "@utils/constants";
import definePlugin from "@utils/types";

export default definePlugin({
    name: "name",
    description: "description",
    authors: [Devs.author],
});

Fill out the name and description fields in the definePlugin call.

export default definePlugin({
    name: "MyCoolPlugin",
    description: "I am very cute!",
    authors: [Devs.author],
});

For the authors property, how you do this will depend on whether you’re making a plugin or a userplugin.

Plugin
UserPlugin

If this is your first time contributing, you will first have to add yourself to the Devs object. It should already be imported, so just jump to its definition and add yourself to the obejct. Now, set authors to the new property!

export default definePlugin({
    name: "MyCoolPlugin",
    description: "I am very cute!",
    authors: [Devs.YourName],
});

Just set it to a plain object with your info:

export default definePlugin({
    name: "MyCoolPlugin",
    description: "I am very cute!",
    authors: [{ name: "Your Name", id: 1234567890n }],
});

Save your file and it should automatically format it and insert the following license header on the top.

/*
 * Vencord, a Discord client mod
 * Copyright (c) 2024 Vendicated and contributors*
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

If you want, you can change it from Vendicated and contributors to your own name. But this is not strictly necessary, you own the code either way (and are already included in the “contributors” part).

This is all of the boilerplate needed for a Vencord plugin. You can now start making your plugin!