Tooling
DevUI
Interactive dashboard for exploring and testing commands
DevUI#
A drop-in interactive dashboard for exploring and testing your Surf commands in the browser. Ships as a self-contained HTML page with no external dependencies.
typescript
import { createSurf } from '@surfjs/core'import { createDevUI } from '@surfjs/devui'Β const surf = await createSurf({ name: 'My App', commands: { /* ... */ },})Β const devui = createDevUI(surf, { port: 4242, // Standalone server port (default: 4242) host: 'localhost', // Bind host (default: 'localhost') path: '/__surf', // Mount path (default: '/__surf') title: 'My App Dev', // Override title})Β // Option 1: Standalone serverconst { url } = await devui.start()console.log(`DevUI at ${url}`)// => DevUI at http://localhost:4242/__surfΒ // Option 2: Mount as Express middlewareimport express from 'express'const app = express()app.use(devui.middleware()) // Mounts at /__surfapp.use(surf.middleware()) // Surf routesapp.listen(3000)Β // Stop standalone serverawait devui.stop()The DevUI includes:
- β Command sidebar with search and namespaced grouping
- β Parameter form with type-aware inputs (select for enums, checkbox for booleans)
- β One-click command execution with auth token support
- β Request log with syntax-highlighted JSON and timing
- β Keyboard shortcuts: / to search, βEnter to execute