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 server
const { url } = await devui.start()
console.log(`DevUI at ${url}`)
// => DevUI at http://localhost:4242/__surf
Β 
// Option 2: Mount as Express middleware
import express from 'express'
const app = express()
app.use(devui.middleware()) // Mounts at /__surf
app.use(surf.middleware()) // Surf routes
app.listen(3000)
Β 
// Stop standalone server
await 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