Inkscape Web UI Boilerplate

This repository provides a solid, modern, and reusable boilerplate for building Inkscape extensions with advanced HTML/CSS/JavaScript User Interfaces (UI).

By utilizing GTK+ 3 and WebKit2, this boilerplate embeds a native web browser engine directly within your Inkscape extension, allowing you to build beautiful, responsive, and complex interfaces that circumvent Inkscape's limited native inkex parameters dialogs.

Features

• Modern UI Stack: Write your extension interface in pure HTML, CSS, and JS.
• Native Window Feeling: Renders a fixed-size, system-native GTK window that feels like a standalone desktop app.
• Asynchronous Communication: Implements a local HTTP Server inside Python that communicates with the JS frontend via the Fetch API.
• Dynamic UI State: The included example (Basic Shape Inserter) showcases responsive UI updates (e.g., hiding/showing inputs dynamically without page reloads).
• Background Processing: SVG generation is offloaded to a background thread, while the UI displays a realtime responsive loading bar via polling (/status).
• Auto-Cleanup: The built-in HTTP server and GTK loops tear down cleanly upon UI closure.

Directory Structure

ink_web_ui_boilerplate/
├── ink_web_ui.inx         # Inkscape Extension Definition file (XML)
├── ink_web_ui.py          # Main Python Backend (inkex logic + HTTP Server)
└── ui/                    # Frontend Web Assets
    ├── index.html         # Main UI layout
    ├── style.css          # Premium Dark Mode CSS (Flexbox, custom native selects)
    └── app.js             # Client-side API fetch logic and status polling

How It Works (Technical Overview)

1. Initialization: When the extension is invoked from Inkscape (via ink_web_ui.inx), Inkscape launches ink_web_ui.py.
2. Server Spin-up: The WebUIExtension class (inheriting from inkex.EffectExtension) dynamically finds an open TCP port and starts Python's http.server.SimpleHTTPRequestHandler in a daemon background thread.
3. GTK WebKit Rendering: The script invokes a native GTK Window and loads a WebKit2.WebView bound to http://localhost:<port>/index.html.
4. UI Interaction (Frontend): The user interacts with the UI. Upon clicking "Submit", app.js bundles the form values into a JSON object and POSTs it to the /submit endpoint.
5. Processing (Backend):
   • The Python backend accepts the POST request, replies with HTTP 200 {"status": "started"}, and spawns a background threading.Thread targeting process_background().
   • process_background() holds the actual inkex drawing logic. It can safely modify the SVG document. It updates self.status_data with progress percentages and messages.
   6. Polling: Meanwhile, app.js runs a setInterval loop polling the /status GET endpoint every 500ms to update the HTML Progress Bar.
6. Termination: Once process_background() finishes producing the SVG output, it sends a command to terminate the GTK Main loop, closes the server, and returns control to Inkscape to apply the SVG modifications.

How to Build Your Own Extension

To use this boilerplate for your own Inkscape tools:

1. Rename the ID/Name: Edit ink_web_ui.inx to give your extension a unique <id> and <name>.
2. Update the UI: Modify ui/index.html to include the form inputs you need. Adjust the styling in style.css if desired.
3. Process Output: In ink_web_ui.py, navigate to the process_background(self, data) method.
   • The data variable is a Python dictionary containing all the form fields passed from JavaScript.
   • Delete the boilerplate "Basic Shape Inserter" logic inside this function.
   • Retrieve your current layer with layer = self.svg.get_current_layer().
   • Construct your new SVG objects (e.g., inkex.PathElement(), Text, etc.) and append them to the layer.
   • Update self.status_data throughout your long-running loops for a great user experience.

Requirements

• Inkscape 1.2+ (Uses the modern inkex API extension classes).
• OS with GTK+ 3 and WebKit2Gtk installed (Standard on almost all modern Linux distributions. On Windows/macOS, it automatically falls back to opening the system's default web browser).

Disclaimer

We don't guarantee anything about this tool/extension, so please use it at your own risk. We can't give 24/7 support if you have a problem when using this boilerplate.

If you feel that this tool has helped you to create, feel free to donate a cup of coffee on the Support Dev :")

License

This project is licensed under the GNU General Public License v3.0 (GPLv3). See the LICENSE file for details.