@nwire/studio

Nwire Studio — visual companion for the framework. Vue 3 + Vite + shadcn-vue + VueFlow. System topology, action runner, actor browser, projection viewer, DLQ inspector.
3,126
vue devtools vueflow shadcn studio nwire
Install
npm install @nwire/studio
Latest Version:0.16.1
Vue:3
License:MIT
Last Updated:Aug 20, 2026
Links: npm
Maintainer: alquist42

@nwire/studio

Vue 3 dev-time control plane for any Nwire app — static topology + live traces + a kernel-backed Run page.

A Vite + Vue 3 + Tailwind 4 + VueFlow SPA that reads .nwire/manifest.json (emitted by @nwire/scan) and /__nwire/* middleware on a running wire to render the system as it's actually wired. Designed to ship as the default dev surface — not a separate dashboard you have to spin up.

Install

Usually launched via the CLI rather than installed standalone.

nwire studio
# → http://localhost:7777

Quick start

From any Nwire repo with a .nwire/ cache and (optionally) a running app:

nwire cache    # rebuild .nwire/*.json from source
nwire studio   # open browser to :7777

Studio reads the cache + live runtime over /__nwire/* middleware exposed by the Vite dev server (manifest, telemetry stream, run supervisor, dispatch).

Pages

The nav is grouped into Map (the live system), Run (operate it), Inspect (browse the static surface). Screenshots are captured live against examples/moderation-queue — see docs/concepts/studio for the annotated tour.

Group Page Reads Renders
Projects localStorage catalog Catalog of every workspace Studio has ever opened.
Home manifest.json + live telemetry Per-project dashboard — recent failures, boot summary, composition stats.
Map Topology manifest + graph.events VueFlow graph — apps as nodes with their plugins + sinks inline, cross-app event edges.
Map Trace /__nwire/telemetry/stream (SSE) Causation tree per correlationId; Play Trace replays telemetry across canvas with amber-glow per sticky.
Map Stream /__nwire/events/stream (SSE) Live event firehose.
Run Try /__nwire/dispatch Form-from-Zod-schema action dispatch against the live wire.
Run Processes /__nwire/run/* (supervisor) Start dev with custom port + env, stream stdout, recognise external nwire dev processes via .nwire/processes/*.
Run Commands /__nwire/run/commands Operator defineCommand entries with run buttons.
Run Workflows workflows Workflow defs with subscribed events and dispatched actions.
Inspect Apps apps + plugins + sinks Every App with its plugin stack, primitive counts, and outbound sinks.
Inspect Actions actions Searchable list + detail panel: schema, retry, persona, journey, SLO, source link.
Inspect Events events + graph.events Catalog with the .public() gate badge + per-event producer/consumer flow.
Inspect Projections projections CQRS read models; each fold with the events it listens to and the queries reading it.
Inspect Queries queries Read endpoints — projection-backed or direct-handler.
Inspect Sinks sinks Outbound delivery chain — every stage by position (early / middle / terminal).
Inspect Plugins plugins Installed plugins per app — bundle-mode forge, sub-plugins, custom.
Inspect Hooks hooks Every materialised framework hook slot and its chain length.

Surface (programmatic)

Export / route Role
nwire studio CLI command Boots the Studio Vite dev server.
/__nwire/manifest Serves the disk cache.
/__nwire/run/* Start/stop/list processes; SSE for live stdout (kernel-driven).
/__nwire/telemetry/* recent + stream over the runtime's onTelemetry stream.
/__nwire/events/* Domain-event tail.
Reusable shadcn-vue lib Buttons, badges, tables, ErrorBoundary used across pages.

Related

  • @nwire/scan — produces every JSON file Studio reads at boot.
  • @nwire/cli — nwire studio is its entry point.
  • @nwire/runner — supplies the RunnerSupervisor that backs the Run page.
  • @nwire/hooks — Studio's Hooks page is a thin reflection of listHooks() + .tap().
  • @nwire/mcp — the same /__nwire/* surface AI clients reach via MCP.

Status

v0.x — pages are stable; cache schema is treated as the contract. A separate cloud product (@nwire/studio-cloud) layers history, multi-deploy diffing, AI debug, and team affordances on top — shipped separately.

Related Packages

@tanstack/vue-devtools

TanStack Devtools is a set of tools for building advanced devtools for your Vue...

100,583 507
devtools vue
@nuxthq/studio-edge
3,025
studio nuxt
@ibizstudio-ex/dynamic-form-design

表单设计

380
studio ibiz
@devframes/vite

Vite plugin for mounting a devframe inside any Vite-based host (Astro, SolidStar...

1,088,260 667
devtools devframe vite
@devframes/nuxt

Nuxt module that exposes a Nuxt app as a devframe client.

12,385 670
devtools devframe nuxt

Version History

Version Released Vue License
0.16.1 ^3.5.13 MIT
0.16.0 ^3.5.13 MIT
0.15.1 ^3.5.13 MIT
0.14.1 ^3.5.13 MIT
0.14.0 ^3.5.13 MIT