Skip to main content

Getting Started

In this guide you'll install the LiveDoc Viewer, start the dashboard, connect it to your test framework, and watch test results appear in real time — all in under five minutes.

What You'll Build​

By the end of this page you will have:

  • The LiveDoc Viewer running at http://localhost:3100
  • A test reporter sending results to the viewer
  • A live dashboard showing features, scenarios, and step results as tests execute

Prerequisites​

  • Node.js 18+ installed
  • A project using @swedevtools/livedoc-vitest or LiveDoc.xUnit (.NET)

Step 1: Install the Viewer​

npm install -g @swedevtools/livedoc-viewer

Step 2: Start the Viewer​

livedoc-viewer

The viewer opens your default browser at http://localhost:3100 and waits for incoming test results.

Custom port

If port 3100 is taken, pick another:

livedoc-viewer --port 8080

See CLI Options for all flags.

Step 3: Connect Your Test Framework​

Add the LiveDocViewerReporter to your Vitest configuration:

// vitest.config.ts
import { defineConfig } from 'vitest/config';
import {
  LiveDocSpecReporter,
  LiveDocViewerReporter,
} from '@swedevtools/livedoc-vitest/reporter';

export default defineConfig({
  test: {
    include: ['**/*.Spec.ts'],
    globals: true,
    reporters: [
      new LiveDocSpecReporter({
        detailLevel: 'spec+summary+headers',
        postReporters: [
          new LiveDocViewerReporter({
            server: 'http://localhost:3100',
            project: 'my-project',
          }),
        ],
      }),
    ],
  },
});

Alternatively, use LiveDocServerReporter for auto-discovery — it finds a running viewer automatically and silently disables itself when none is available:

import LiveDocServerReporter from '@swedevtools/livedoc-vitest/reporter';

reporters: [
  new LiveDocSpecReporter({ detailLevel: 'spec+summary+headers' }),
  new LiveDocServerReporter(),
],

Step 4: Run Your Tests​

npx vitest run

Switch to your browser — the viewer dashboard updates in real time as each scenario and step completes.

The Workflow​

  1. Start the viewer — livedoc-viewer
  2. Run your tests — npx vitest run (or dotnet test)
  3. Reporter posts results — each scenario streams to the viewer as it finishes
  4. Dashboard updates live — features, scenarios, and steps appear in real time
  5. Debug failures — click any failed step to see the error message and stack trace

Recap​

  • Install with npm install -g @swedevtools/livedoc-viewer
  • Start with livedoc-viewer (opens at http://localhost:3100)
  • Connect via LiveDocViewerReporter (explicit) or LiveDocServerReporter (auto-discovery)
  • Run tests and watch results stream into the browser

Next Steps​