Extending NetPad

NetPad's extension system allows you to add custom functionality through modular, independently deployable packages. Extensions can provide API routes, UI components, services, middleware, and more.

Looking for the full documentation?

The complete Extensions Developer Guide has moved to its own section:

• Extensions Overview - Introduction to extensions
• Extension Architecture - System internals
• Building Extensions - Step-by-step tutorial
• API Reference - Complete API docs
• Example: Collaborate Extension - Real-world walkthrough

Quick Start

1. Create an Extension Package

mkdir -p packages/my-extension
cd packages/my-extension
npm init -y

2. Define Your Extension

// src/index.ts
import { NextRequest, NextResponse } from 'next/server';

export const myExtension = {
  metadata: {
    id: 'my-extension',
    name: 'My Extension',
    version: '1.0.0',
  },
  features: ['custom:my_feature'],
  routes: [
    {
      path: '/api/ext/my-extension/hello',
      method: 'GET',
      handler: async () => NextResponse.json({ message: 'Hello!' }),
    },
  ],
  initialize: async () => {
    console.log('Extension initialized!');
  },
};

export default myExtension;

3. Enable the Extension

# .env.local
NETPAD_EXTENSIONS=@myorg/my-extension

4. Test It

curl http://localhost:3000/api/ext/my-extension/hello
# {"message":"Hello!"}

Learn More

See the Extensions documentation for complete guides on:

• Extension architecture and lifecycle
• Creating routes, middleware, and services
• Building React components
• Testing and publishing extensions