[PR #574] [MERGED] add captureSpans and getSpanLines for styled terminal output capture #628

New issue

Closed

opened 2026-03-02 23:47:25 +03:00 by kerem · 0 comments

kerem commented

2026-03-02 23:47:25 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/574
Author: @remorses
Created: 1/23/2026
Status: ✅ Merged
Merged: 1/25/2026
Merged by: @kommander

Base: main ← Head: capture-spans-upstream

📝 Commits (7)

b35b422 add captureSpans and getSpanLines for styled terminal output capture
d280a03 remove unused VTermData import
b340c0f format
3d253be refactor: use RGBA class and rgbToHex from lib instead of inline function
1dd866c refactor: use existing types instead of VTerm types, add RGBA.equals()
1136691 style: format
31303e0 Merge branch 'main' into capture-spans-upstream

📊 Changes

5 files changed (+237 additions, -1 deletions)

View changed files

📝 packages/core/src/buffer.ts (+53 -1)
📝 packages/core/src/lib/RGBA.ts (+5 -0)
➕ packages/core/src/testing/capture-spans.test.ts (+147 -0)
📝 packages/core/src/testing/test-renderer.ts (+13 -0)
📝 packages/core/src/types.ts (+19 -0)

📄 Description

Uses the same VTerm data structures from #440 to expose terminal buffer content as structured span data.

Adds getSpanLines() to OptimizedBuffer and captureSpans() to test renderer.

Use case: render opentui output to web pages or images. You can render a TUI in a test renderer, extract the spans, and serialize them for web rendering or image generation.

import { createTestRenderer } from "@opentui/core/testing"

const { renderer, renderOnce, captureSpans } = await createTestRenderer({ 
  width: 80, 
  height: 24 
})

// render your components...
await renderOnce()

const data = captureSpans()
// data.lines contains styled spans with text, fg, bg, and style flags
// serialize to JSON, render to canvas, generate SVG, etc.

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/anomalyco/opentui/pull/574 **Author:** [@remorses](https://github.com/remorses) **Created:** 1/23/2026 **Status:** ✅ Merged **Merged:** 1/25/2026 **Merged by:** [@kommander](https://github.com/kommander) **Base:** `main` ← **Head:** `capture-spans-upstream` --- ### 📝 Commits (7) - [`b35b422`](https://github.com/anomalyco/opentui/commit/b35b422acbc1dd6e1e8b70f39f194e9f3ff0eca5) add captureSpans and getSpanLines for styled terminal output capture - [`d280a03`](https://github.com/anomalyco/opentui/commit/d280a034dcb3144318bb2aae7368fa09443ae6ba) remove unused VTermData import - [`b340c0f`](https://github.com/anomalyco/opentui/commit/b340c0f0cf715094d0b0e66a27422a97779bbc67) format - [`3d253be`](https://github.com/anomalyco/opentui/commit/3d253bebe1635925a9b14c5002e7d9883a00ef01) refactor: use RGBA class and rgbToHex from lib instead of inline function - [`1dd866c`](https://github.com/anomalyco/opentui/commit/1dd866cfcfcbff58b761e569624999cd196b27ec) refactor: use existing types instead of VTerm types, add RGBA.equals() - [`1136691`](https://github.com/anomalyco/opentui/commit/113669146d0b2eb39d108ccc0ade30fa9c032180) style: format - [`31303e0`](https://github.com/anomalyco/opentui/commit/31303e00f0c98ee9310ebec99bf2f731547403be) Merge branch 'main' into capture-spans-upstream ### 📊 Changes **5 files changed** (+237 additions, -1 deletions) <details> <summary>View changed files</summary> 📝 `packages/core/src/buffer.ts` (+53 -1) 📝 `packages/core/src/lib/RGBA.ts` (+5 -0) ➕ `packages/core/src/testing/capture-spans.test.ts` (+147 -0) 📝 `packages/core/src/testing/test-renderer.ts` (+13 -0) 📝 `packages/core/src/types.ts` (+19 -0) </details> ### 📄 Description Uses the same VTerm data structures from #440 to expose terminal buffer content as structured span data. Adds `getSpanLines()` to `OptimizedBuffer` and `captureSpans()` to test renderer. Use case: render opentui output to web pages or images. You can render a TUI in a test renderer, extract the spans, and serialize them for web rendering or image generation. ```ts import { createTestRenderer } from "@opentui/core/testing" const { renderer, renderOnce, captureSpans } = await createTestRenderer({ width: 80, height: 24 }) // render your components... await renderOnce() const data = captureSpans() // data.lines contains styled spans with text, fg, bg, and style flags // serialize to JSON, render to canvas, generate SVG, etc. ``` --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>