probe-web

Appearance

probe-web / @probe-web/ui

@probe-web/ui ​

Framework-agnostic web components (Lit) for flashing and debugging embedded targets from a browser, built on @probe-web/client. Each element takes a client, session or debugger property, works on its own, and reports what happens through DOM events, which bubble and cross shadow roots.

sh
npm install @probe-web/ui
ElementPurposeKey events
<probe-device-picker>List the client's probes; authorize a new WebUSB deviceprobe-selected, device-authorized
<probe-target-picker>Search the chip registry; import target YAML, CMSIS .pack or .FLMchip-selected, family-imported, svds-found
<probe-flash-panel>Pick or watch an image, flash with live progress, verify, eraseflash-done, flash-failed, verify-done, erase-done, artifact-changed
<probe-rtt-terminal>xterm.js terminal running the monitor loop: RTT (String or defmt), semihosting; typed input to down channel 0monitor-event, monitor-exit
<probe-semihosting-console>Semihosting stdout/stderr and exit status, fed from an RTT terminalnone
<probe-serial-monitor>WebSerial console for UART-bridge boardsserial-line, serial-state
<probe-core-controls>Continue, pause, step, reset, vector catch; core statedebug-error
<probe-registers>Core registers, changes highlighted, editable when haltednone
<probe-callstack>Stack at the current stopframe-selected
<probe-variables>Scopes, variables and watches for a frame, editablenone
<probe-breakpoints>Source and address breakpointsnone
<probe-disassembly>Instructions around the PC; gutter toggles breakpointsnone
<probe-memory-view>Hex/ASCII memory, grouping, edit, variable highlights, Intel HEX exportnone
<probe-peripherals>CMSIS-SVD peripherals → registers → fields, read livenone
<probe-test-runner>List and run an embedded-test suitetests-finished
<probe-rtt-plot>Live line plot of a binary RTT channelchannel-changed

Usage ​

ts
import '@probe-web/ui'; // or one element: import '@probe-web/ui/flash-panel'
import { Client, type Wire } from '@probe-web/client';

const client = await Client.connect({ kind: 'webusb' });
const picker = document.querySelector('probe-device-picker')!;
picker.client = client;
picker.addEventListener('probe-selected', async (e) => {
  const session = await client.attach({ probe: (e as CustomEvent<Wire.DebugProbeEntry>).detail });
  document.querySelector('probe-flash-panel')!.session = session;
  document.querySelector('probe-core-controls')!.debugger = session.debugger();
});

Bundling ​

The package ships TypeScript source. Bundlers must compile it with experimentalDecorators (and useDefineForClassFields: false); a tsconfig.json ships in the package for Vite/esbuild.

Documentation ​

Classes ​

Interfaces ​

Type Aliases ​

Variables ​

Functions ​