# How to Extend DrawDB Functionality: A Developer's Guide to Custom Extensions

> Extend DrawDB functionality with custom React components and functions using the ExtensionsContext API. A developer's guide to adding powerful new features without touching core code.

- Repository: [drawDB/drawdb](https://github.com/drawdb-io/drawdb)
- Tags: how-to-guide
- Published: 2026-08-14

---

**Developers can extend DrawDB by using the `ExtensionsContext` API to inject custom React components and functions at predefined hook points without modifying core source files.**

DrawDB is a browser-based database diagramming tool built with React that's designed with extensibility in mind. The project provides a clean **slot-based extension system** that lets you add custom UI panels, toolbar buttons, canvas overlays, or even replace built-in functionality like AI-powered SQL import. This guide shows you exactly how to leverage the extension architecture as implemented in the [drawdb-io/drawdb](https://github.com/drawdb-io/drawdb) repository.

## DrawDB Extension Architecture Overview

The extension system centers on two pieces: `ExtensionsContext` and the `Slot` component. Both are defined in [[`src/context/ExtensionsContext.jsx`](https://github.com/drawdb-io/drawdb/blob/main/src/context/ExtensionsContext.jsx)](https://github.com/drawdb-io/drawdb/blob/main/src/context/ExtensionsContext.jsx).

- **ExtensionsContext** – A React context that stores an object mapping slot names to extension values (React elements or functions).
- **Slot component** – A helper that looks up a slot by name and renders whatever extension was registered, or returns `null` if empty.

The provider wraps the entire application in [[`src/App.jsx`](https://github.com/drawdb-io/drawdb/blob/main/src/App.jsx)](https://github.com/drawdb-io/drawdb/blob/main/src/App.jsx), making extensions available throughout the component tree.

## Key Extension Hook Points in DrawDB

The DrawDB UI exposes numerous named slots where you can inject custom content. These are scattered across major components:

| Slot Name | Typical Location | Use Case |
|-----------|----------------|----------|
| `header-actions-start` / `header-actions-end` | [`EditorHeader/ControlPanel.jsx`](https://github.com/drawdb-io/drawdb/blob/main/EditorHeader/ControlPanel.jsx) | Toolbar buttons |
| `canvas-overlay` | [`EditorCanvas/Canvas.jsx`](https://github.com/drawdb-io/drawdb/blob/main/EditorCanvas/Canvas.jsx) | Floating badges or guides |
| `right-panel` | [`Workspace.jsx`](https://github.com/drawdb-io/drawdb/blob/main/Workspace.jsx) | Custom sidebar panels |
| `share-modal-top` | Share dialog | Extra sharing options |
| `importSqlWithAi` | Functional hook | Override AI SQL import |

You can discover additional slots by searching for `<Slot name="..." />` usages throughout the codebase.

## How to Add a Custom Extension to DrawDB

Follow these steps to inject your own functionality without touching core files.

### Step 1: Create Your Extension Component

Build a standard React component that uses DrawDB's hooks if needed:

```jsx
// src/custom/MyExportButton.jsx
import { useDiagram } from "../hooks/useDiagram";

export default function MyExportButton() {
  const { exportDiagram } = useDiagram();
  
  return (
    <button
      className="btn btn-primary"
      onClick={() => exportDiagram("png")}
    >
      Export PNG
    </button>
  );
}

```

### Step 2: Register in ExtensionsContext.Provider

Edit [[`src/App.jsx`](https://github.com/drawdb-io/drawdb/blob/main/src/App.jsx)](https://github.com/drawdb-io/drawdb/blob/main/src/App.jsx) to include your extension:

```jsx
import ExtensionsContext from "./context/ExtensionsContext";
import MyExportButton from "./custom/MyExportButton";

const extensions = {
  // Insert button at end of header actions
  "header-actions-end": <MyExportButton />
};

function App() {
  return (
    <ExtensionsContext.Provider value={extensions}>
      <MainAppRoutes />
    </ExtensionsContext.Provider>
  );
}

export default App;

```

### Step 3: Access Extensions Programmatically (Optional)

For functional extensions, use the `useExtensions` hook:

```jsx
import { useExtensions } from "../context/ExtensionsContext";

function MyComponent() {
  const { importSqlWithAi } = useExtensions();
  // Call the possibly-overridden function
  const result = await importSqlWithAi(userPrompt);
}

```

## Practical DrawDB Extension Examples

### Example 1: Custom Sidebar Panel

Add a notes panel to the right side of the workspace:

```jsx
// src/custom/NotesPanel.jsx
export default function NotesPanel() {
  return (
    <aside className="notes-panel">
      <h3>My Custom Notes</h3>
      <textarea placeholder="Diagram notes..." />
    </aside>
  );
}

// In App.jsx
const extensions = {
  "right-panel": <NotesPanel />
};

```

### Example 2: Override Built-in AI Import

Replace DrawDB's default AI SQL generation with your own service:

```jsx
// src/custom/aiImport.js
export async function myImportSqlWithAi(prompt) {
  const response = await fetch("/api/my-ai", {
    method: "POST",
    body: JSON.stringify({ prompt })
  });
  const data = await response.json();
  return data.sql;
}

// In App.jsx
const extensions = {
  importSqlWithAi: myImportSqlWithAi
};

```

### Example 3: Canvas Overlay Badge

Display a "Beta" indicator over the diagram canvas:

```jsx
// src/custom/CanvasBadge.jsx
export default function CanvasBadge() {
  return (
    <div className="canvas-badge" style={{
      position: "absolute",
      top: 8,
      right: 8,
      background: "#f59e0b",
      padding: "4px 12px",
      borderRadius: 4
    }}>
      Beta
    </div>
  );
}

// In App.jsx
const extensions = {
  "canvas-overlay": <CanvasBadge />
};

```

## Critical Files for DrawDB Extension Development

| File | Purpose |
|------|---------|
| [[`src/context/ExtensionsContext.jsx`](https://github.com/drawdb-io/drawdb/blob/main/src/context/ExtensionsContext.jsx)](https://github.com/drawdb-io/drawdb/blob/main/src/context/ExtensionsContext.jsx) | Core API: context, `useExtensions()` hook, and `Slot` component |
| [[`src/App.jsx`](https://github.com/drawdb-io/drawdb/blob/main/src/App.jsx)](https://github.com/drawdb-io/drawdb/blob/main/src/App.jsx) | Where you register extensions via the provider |
| [[`src/components/Workspace.jsx`](https://github.com/drawdb-io/drawdb/blob/main/src/components/Workspace.jsx)](https://github.com/drawdb-io/drawdb/blob/main/src/components/Workspace.jsx) | Primary consumer of slot components |
| [[`src/hooks/useDiagram.js`](https://github.com/drawdb-io/drawdb/blob/main/src/hooks/useDiagram.js)](https://github.com/drawdb-io/drawdb/blob/main/src/hooks/useDiagram.js) | Useful hook for diagram operations in custom extensions |

## Summary

DrawDB's extension system enables powerful customization through a **slot-based React context pattern**:

- **ExtensionsContext.Provider** accepts a plain object mapping slot names to React elements or functions
- **`<Slot name="..." />`** components render injected content at predefined UI locations
- **Functional overrides** like `importSqlWithAi` let you replace core behavior without source modification
- Your custom code lives in separate files, ensuring clean upgrades when DrawDB releases updates

This architecture makes DrawDB adaptable for enterprise workflows, third-party integrations, and community plugins while maintaining its lightweight, open-source foundation.

## Frequently Asked Questions

### What types of extensions can I add to DrawDB?

You can add **React components** for UI elements (buttons, panels, overlays) and **functions** for behavior overrides. The `ExtensionsContext` accepts any valid React element or JavaScript function as a slot value. Common extensions include custom export buttons, AI service integrations, documentation panels, and workflow-specific tools.

### Do I need to modify DrawDB's core files to create extensions?

No core modifications are required. You only need to edit [`src/App.jsx`](https://github.com/drawdb-io/drawdb/blob/main/src/App.jsx) (or create a wrapper) to pass your extensions to `ExtensionsContext.Provider`. All custom code lives in separate files, which preserves your changes when updating to new DrawDB versions.

### How do I find all available extension slots in DrawDB?

Search the codebase for `<Slot name=` to discover every hook point. The most frequently used slots are `header-actions-start`, `header-actions-end`, `canvas-overlay`, `right-panel`, and `share-modal-top`. More slots may be added in future releases, so checking [`Workspace.jsx`](https://github.com/drawdb-io/drawdb/blob/main/Workspace.jsx) and [`ControlPanel.jsx`](https://github.com/drawdb-io/drawdb/blob/main/ControlPanel.jsx) directly is recommended.

### Can I override DrawDB's AI SQL import feature with my own implementation?

Yes. Supply a function under the `importSqlWithAi` key in your extensions object. DrawDB's core code checks for this extension and calls it instead of the built-in implementation. Your function should accept a prompt string and return an object with a `sql` property containing the generated SQL.