Localhost Development

Once you’re past the “hello world” stage, re-zipping and re-uploading every time you change a line gets old fast. The localhost pattern gives you a much tighter feedback loop: your extension loads from a local server, so you just save and refresh.

How it works

Instead of bundling your files in a zip, you:

Run a local web server that serves your extension files
Create a manifest that points baseUrl at your local server
Upload just that manifest file to Extension Manager
Edit your code, refresh the panel, see changes immediately

Step 1: Set up your files

You’ll need at minimum:

index.html (your extension UI and code)
manifest.json (pointing at localhost)

For example, reuse the index.html from the hand-coded tutorial.

Step 2: Create a localhost manifest

Your manifest’s baseUrl points to your local server instead of a relative path:

{
  "manifestFormatVersion": "1.0.0",
  "id": "my-extension-dev",
  "name": "My Extension (Dev)",
  "baseUrl": "https://localhost:9000/",
  "mainFile": "index.html",
  "window": {
    "type": "floating",
    "width": 400,
    "height": 500
  },
  "commands": {
    "open": {
      "title": "My Extension (Dev)"
    }
  },
  "menuItems": [
    { "type": "item", "commandId": "open" }
  ]
}

Step 3: Start a local server

Any server that can serve static files over HTTPS will work. Here are a few options:

Python (with the CORS/SSL script from Local Development):

python3 server.py 9000 su-extension.pem su-extension-key.pem

npx serve (if you have Node.js):

npx serve -l 9000 --ssl-cert su-extension.pem --ssl-key su-extension-key.pem --cors

Vite (for framework-based projects):

npx vite --port 9000 --https

Step 4: Install the manifest

Drag your manifest.json into the Extension Manager the same way you would a full extension. SketchUp will load your extension from localhost instead of from the zip contents. (You can find a complete example localhost manifest from the getting-started repo.)

Step 5: Develop!

Now the workflow is:

Edit your index.html (or whatever files your server is serving)
Right-click in your extension iframe → Reload Frame
See your changes immediately

No re-zipping, no re-uploading.

What’s next?

Set up SSL certificates and the Python CORS server: Local Development
Add TypeScript and a build step: TypeScript + npm tutorial