docwright

automate your application's UI documentation

docwright is a library that generates UI documentation from Playwright-style test scripts. It automates the process of documenting your application's user interface.

Read API

Quick Start

1. Install docwright

   bun install @docwright/core

   Due to Node.js's limitations, docwright currently only works with Bun. Read more

2. Create a docwright.config.ts file.

   bunx docwright init

   Example docwright.config.ts

3. Run docwright

   bunx docwright generate

Create your first scenario

Create a file matching your docwright.config.ts glob pattern.

Example: portfolio.docwright.ts

import {
  describe,
  scenario,
  text,
  screenshot,
  highlight,
} from "@docwright/core";

describe("suiram.dev portfolio", () => {
  scenario("How to book a call", async ({ page }) => {
    await text("Navigate to https://suiram.dev");
    await page.goto("https://suiram.dev");
    await text("Click the book a call button");
    await highlight(
      page.locator("a[href='https://calcom.suiram.dev/suiramdev/30min']")
    );
    await screenshot(page);
  });
});

Credits

Thanks to:

• @yanndarwish
• @aziv7