Interface Plugin

An interface plugin runs inside the DARTWIC interface. It uses the host’s React runtime and SDK to add views; it does not create a separate application or engine connection.

Start from the example plugin. For UI only, set contains_engine_plugin to false and contains_interface_plugin to true in plugin.json. Keep minInterfaceVersion and the bundled SDK aligned with your target host.

1. Add a resource

Replace interface/src/plugin.jsx with a small resource. This example uses the starter’s unchanged ID:

import React from "../sdk/react.ts";
import { definePlugin } from "../sdk/index.ts";

function TestNotes() {
    return (
        <section className="p-4 space-y-2">
            <h2 className="text-lg font-semibold">Test notes</h2>
            <p>Select a run and record your observations here.</p>
        </section>
    );
}

export default definePlugin({
    id: "example_device_plugin",
    name: "Example Device Plugin",
    register(registry) {
        registry.addResource({
            id: "test_notes",
            name: "Test Notes",
            label: "Test Notes",
            type: "component",
            component: TestNotes,
            show_in_resource_tabs: true,
        });
    },
});

The starter’s interface/src/index.jsx exports this definition. Its build entry registers the bundle with the host. Keep that wrapper: placing arbitrary React output in ui/index.js does not register a plugin.

Import React and UI helpers from the bundled SDK, as the example does. Bundling another React runtime or importing private interface source can break hooks and compatibility.

2. Build and inspect

npm ci
npm run build
npm run verify
npm run package

The built entry is plugin/interface/example_device_plugin/ui/index.js. Install it using Packaging and Installation, reload the interface, and look for Test Notes in the resource navigation.

Choose a contribution

Contribution IDs are local to the plugin. Match a task or module UI ID to the engine registration it represents. Task cards display and command runtime state; configuration editors modify task configuration through the host bridge.

Use the existing connection

The SDK’s useDartwic exposes the host connection. Use its operations and subscription helpers instead of constructing another client. Balance channel subscriptions when a component mounts and unmounts, handle operation errors, and show stale or missing values explicitly.

A React render or telemetry handler runs asynchronously relative to the engine. Put timing-sensitive calculations and event reactions in DCode or a native engine implementation.

Reference

The Interface SDK reference contains the complete contribution types. Start with plugin registration, resources, tasks, or schematic nodes.

If the plugin is installed but no view appears, check that the manifest enables the interface side, the IDs match, ui/index.js exists, and the definition uses the current definePlugin({ register }) contract.