Built-in features - BetterDiscord

BetterDiscord comes with many built-in features that enhance Discord without requiring additional plugins. These features are implemented as “builtins” that can be toggled on or off.

What are builtins?

Builtins are internal modules that extend BetterDiscord’s functionality. They follow the same pattern as plugins but are part of the core application:

// From src/betterdiscord/structs/builtin.ts
export default class BuiltinModule {
    get name() { return "Unnamed Builtin"; }
    get collection() { return "settings"; }
    get category() { return "general"; }
    get id() { return "None"; }
    
    async initialize() {
        // Enable if setting is on
        if (Settings.get(this.collection, this.category, this.id)) {
            await this.enable();
        }
        
        // Listen for setting changes
        Events.on("setting-updated", (collection, category, id, enabled) => {
            if (this.matches(collection, category, id)) {
                if (enabled) this.enable();
                else this.disable();
            }
        });
    }
    
    async enabled() {}
    async disabled() {}
}

Categories of builtins

Builtins are organized into several categories:

General features

These features enhance everyday Discord usage.

Custom CSS

Write custom CSS to style Discord:

// From src/betterdiscord/builtins/customcss.ts
export default new class CustomCSS extends Builtin {
    get name() { return "Custom CSS"; }
    get category() { return "customcss"; }
    get id() { return "customcss"; }
    
    async enabled() {
        // Register settings panel
        SettingsStore.registerPanel(this.id, "Custom CSS", {
            order: 2,
            element: () => <CSSEditor />
        });
        
        // Load and apply CSS
        this.loadCSS();
        this.insertCSS(this.savedCss);
        
        // Watch for file changes
        this.watchContent();
    }
}

Features:

Live editor with syntax highlighting
Auto-save and file watching
Detached window support
Native editor integration

Access Custom CSS via Settings → Custom CSS or use the /customcss command.

Voice disconnect

Automatically disconnect from voice when closing Discord:

// From src/betterdiscord/builtins/general/voicedisconnect.ts
export default new class VoiceDisconnect extends Builtin {
    get name() { return "VoiceDisconnect"; }
    get category() { return "general"; }
    get id() { return "voiceDisconnect"; }
    
    async enabled() {
        window.addEventListener("beforeunload", this.beforeUnload);
    }
    
    beforeUnload() {
        // Disconnect from voice before closing
        DiscordModules.ChannelActions?.selectVoiceChannel(null, null);
    }
}

Media keys

Disable Discord’s media key capture:

// From src/betterdiscord/builtins/general/mediakeys.ts
export default new class MediaKeys extends Builtin {
    get name() { return "DisableMediaKeys"; }
    get category() { return "general"; }
    get id() { return "mediaKeys"; }
    
    async enabled() {
        this.showModal(); // Requires restart
    }
}

Enabling or disabling media keys requires a full Discord restart to take effect.

Adds BetterDiscord options to Discord’s settings cog menu:

// From src/betterdiscord/builtins/general/contextmenu.tsx
export default new class BDContextMenu extends Builtin {
    async enabled() {
        this.patch = ContextMenu.patch("user-settings-cog", (retVal) => {
            // Add BetterDiscord menu items
            const bdMenu = (
                <ContextMenu.Item label="BetterDiscord" id="BetterDiscord">
                    {/* Settings categories */}
                    {/* Plugin toggles */}
                    {/* Theme toggles */}
                </ContextMenu.Item>
            );
            
            // Insert into Discord's menu
            target.push(bdMenu);
        });
    }
}

Provides quick access to:

Toggle settings
Enable/disable plugins and themes
Open plugin settings (Shift+Click)
Navigate to BetterDiscord pages

Theme attributes

Adds data attributes to help themes target specific areas of Discord.

Developer features

Tools for debugging and development.

React DevTools

Integration with React Developer Tools:

// From src/betterdiscord/builtins/developer/reactdevtools.ts
export default new class ReactDevTools extends Builtin {
    get name() { return "ReactDevTools"; }
    get category() { return "developer"; }
    get id() { return "reactDevTools"; }
    
    async initialize() {
        super.initialize();
        
        // Preserve $type utility
        let originalType = window.$type?.__originalFunction || window.$type;
        Object.defineProperty(window, "$type", {
            get: () => originalType,
            set: (v) => { originalType = v?.__originalFunction || v; }
        });
    }
}

React DevTools must be installed as a browser extension separately. This builtin enables compatibility.

DevTools listener

Opens Chrome DevTools automatically for debugging.

Inspect element

Adds “Inspect Element” to context menus.

Debug logs

Enables additional logging for troubleshooting.

Recovery mode

Provides a recovery UI if BetterDiscord fails to load:

// Catches errors and shows recovery options
// - Disable all plugins
// - Disable all themes
// - Reset settings
// - Safe mode

Stop DevTools warning

Removes Discord’s console warning about the self-bot risk.

Window features

Customize Discord’s window appearance and behavior.

Window transparency

Enables window transparency for themes:

// From src/betterdiscord/builtins/window/transparency.ts
export default new class WindowTransparency extends Builtin {
    get name() { return "WindowTransparency"; }
    get category() { return "window"; }
    get id() { return "transparency"; }
    
    async enabled() {
        document.body.classList.add("bd-transparency");
        this.showModal("Transparency enabled. Restart to apply.");
    }
    
    async disabled() {
        document.body.classList.remove("bd-transparency");
        this.showModal("Transparency disabled. Restart to apply.");
    }
}

Window transparency requires a full Discord restart to take effect.

Remove minimum size

Allows resizing Discord’s window below the default minimum size.

Native frame

Toggles between Discord’s custom frame and the OS native window frame.

Slash commands

BetterDiscord adds several slash commands to Discord:

/plugin

Manage plugins:

// From src/betterdiscord/builtins/commands/addons.ts
buildAddonCommand("plugin") {
    return {
        id: "plugin",
        name: "plugin",
        description: "Manage your plugins",
        options: [
            {
                type: OptionTypes.STRING,
                name: "action",
                description: "Action to perform",
                required: true,
                choices: [
                    { name: "Enable", value: "enable" },
                    { name: "Disable", value: "disable" },
                    { name: "Toggle", value: "toggle" }
                ]
            },
            {
                type: OptionTypes.STRING,
                name: "plugin",
                description: "Which plugin?",
                required: true,
                get choices() {
                    return pluginManager.addonList.map(p => ({
                        name: p.name,
                        value: p.id
                    }));
                }
            }
        ]
    };
}

Usage: /plugin enable PluginName

/theme

Manage themes: Usage: /theme enable ThemeName

/settings

Quickly toggle BetterDiscord settings:

// From src/betterdiscord/builtins/commands/settings.ts
export default {
    id: "settings",
    name: "settings",
    description: "Enable or disable your settings",
    options: [
        {
            type: OptionTypes.STRING,
            name: "action",
            description: "Action to take",
            required: true,
            choices: [
                { name: "Enable", value: "enable" },
                { name: "Disable", value: "disable" }
            ]
        },
        {
            type: OptionTypes.STRING,
            name: "setting",
            description: "Which setting to modify?",
            required: true,
            get choices() {
                // Dynamically generate from available settings
                return Settings.collections[0].settings
                    .map(c => c.settings.filter(s => s.type === "switch"))
                    .flat()
                    .map(s => ({ name: s.name, value: `${c.id}-${s.id}` }));
            }
        }
    ],
    execute: async (data) => {
        const action = data.find(o => o.name === "action").value;
        const [catId, settingId] = data.find(o => o.name === "setting").value.split("-");
        
        Settings.set(catId, settingId, action === "enable");
        return { content: `Setting ${action}d!` };
    }
}

Usage: /settings enable voiceDisconnect

/restart

Restart Discord with or without BetterDiscord:

// From src/betterdiscord/builtins/commands/restart.ts
export default {
    id: "restart",
    name: "restart",
    description: "Restart Discord with or without BetterDiscord",
    options: [
        {
            type: OptionTypes.BOOLEAN,
            name: "vanilla",
            description: "Should Discord be relaunched without BetterDiscord?",
            required: true
        }
    ],
    execute: async (data) => {
        const vanilla = data.find(o => o.name === "vanilla").value;
        ipc.relaunch(vanilla ? ["--vanilla"] : []);
    }
}

Usage:

/restart vanilla:True - Restart without BetterDiscord
/restart vanilla:False - Restart with BetterDiscord

/debug

Get debug information for support:

// From src/betterdiscord/builtins/commands/debug.ts
export default {
    id: "debug",
    name: "debug",
    description: "Gets debug information useful for support",
    options: [
        {
            type: OptionTypes.BOOLEAN,
            name: "send",
            description: "Should the info be sent in public chat?",
            required: true
        }
    ],
    execute: async (data, { channel }) => {
        const shouldSend = data.find(o => o.name === "send").value;
        const info = getDebugInfo();
        
        if (!shouldSend) {
            return { content: `\`\`\`md\n${info}\n\`\`\`` };
        }
        
        const file = new File([info], "debug.md", { type: "text/markdown" });
        DiscordModules.promptToUpload?.([file], channel, 0);
    }
}

Usage:

/debug send:False - Show debug info privately
/debug send:True - Send as file in chat

/customcss

Open the Custom CSS editor.

/support

Get links to BetterDiscord support resources.

Addon store

Browse and install plugins and themes from within Discord:

// From src/betterdiscord/builtins/store/addonstore.ts
export default new class AddonStore extends Builtin {
    get name() { return "AddonStore"; }
    get category() { return "store"; }
    get id() { return "bdAddonStore"; }
    
    async enabled() {
        // Add store UI to plugin and theme panels
        // Fetch addon listings
        // Provide install functionality
    }
}

The addon store feature allows easy discovery and installation of community-created plugins and themes without leaving Discord.

Creating custom builtins

While builtins are part of BetterDiscord core, the pattern can be useful for understanding how to structure plugins:

import Builtin from "@structs/builtin";

export default new class MyFeature extends Builtin {
    get name() { return "MyFeature"; }
    get category() { return "general"; }
    get id() { return "myFeature"; }
    
    async enabled() {
        // Feature is turned on
        this.log("Enabled");
    }
    
    async disabled() {
        // Feature is turned off
        this.log("Disabled");
    }
}

Builtin features:

Automatic setting integration
Event listening for setting changes
Patcher integration
Command registration
Logging utilities

Next steps

Architecture overview

Understand BetterDiscord’s structure

Creating plugins

Build your own plugins

BdApi reference

Explore the plugin development API

Documentation Index

​What are builtins?

​Categories of builtins

​General features

​Custom CSS

​Voice disconnect

​Media keys

​Context menu integration

​Theme attributes

​Developer features

​React DevTools

​DevTools listener

​Inspect element

​Debug logs

​Recovery mode

​Stop DevTools warning

​Window features

​Window transparency

​Remove minimum size

​Native frame

​Slash commands

​/plugin

​/theme

​/settings

​/restart

​/debug

​/customcss

​/support

​Addon store

​Creating custom builtins

​Next steps

Architecture overview

Creating plugins

BdApi reference

What are builtins?

Categories of builtins

General features

Custom CSS

Voice disconnect

Media keys

Context menu integration

Theme attributes

Developer features

React DevTools

DevTools listener

Inspect element

Debug logs

Recovery mode

Stop DevTools warning

Window features

Window transparency

Remove minimum size

Native frame

Slash commands

/plugin

/theme

/settings

/restart

/debug

/customcss

/support

Addon store

Creating custom builtins

Next steps