Plugin SystemExamples

Plugin Examples

Here are two example plugins to help you get started with NetPad plugin development.

1. Simple Transformation Node

A plugin that uppercases input text.

manifest.json

{
  "name": "uppercase-node",
  "version": "1.0.0",
  "displayName": "Uppercase Node",
  "description": "Transforms text to uppercase",
  "author": "dev@company.com",
  "category": "utility",
  "scope": "private",
  "nodeConfig": {
    "gradientColors": ["#2196F3", "#21CBF3"],
    "primaryColor": "#2196F3",
    "badgeText": "UPPER",
    "description": "Uppercase transformation node",
    "category": "utility"
  },
  "files": {
    "runner": "./runner.js",
    "shape": "./shape.js",
    "icon": "./icon.svg"
  }
}

runner.js

module.exports = async function (input, context) {
  return { result: String(input.text).toUpperCase() };
};

shape.js

import React from 'react';
export default function UppercaseNodeShape({ shape }) {
  return <g><text x={10} y={30} fontFamily="Inter" fontSize={16}>UPPERCASE</text></g>;
}

2. API Integration Node

A plugin that fetches data from an external API.

manifest.json

{
  "name": "fetch-api-node",
  "version": "1.0.0",
  "displayName": "Fetch API Node",
  "description": "Fetches data from an API",
  "author": "dev@company.com",
  "category": "integration",
  "scope": "private",
  "permissions": {
    "network": ["api.example.com"]
  },
  "nodeConfig": {
    "gradientColors": ["#4CAF50", "#81C784"],
    "primaryColor": "#4CAF50",
    "badgeText": "API",
    "description": "API fetch node",
    "category": "integration"
  },
  "files": {
    "runner": "./runner.js",
    "shape": "./shape.js",
    "icon": "./icon.svg"
  },
  "dependencies": {
    "axios": "^1.0.0"
  }
}

runner.js

const axios = require('axios');
module.exports = async function (input, context) {
  const { url } = input;
  const response = await axios.get(url);
  return { data: response.data };
};

shape.js

import React from 'react';
export default function FetchApiNodeShape({ shape }) {
  return <g><text x={10} y={30} fontFamily="Inter" fontSize={16}>API FETCH</text></g>;
}
Development WorkflowMigration Guide