[PR #225] [MERGED] feat: add support for transparent terminal background rendering #1159

New issue

Closed

opened 2026-03-14 09:21:35 +03:00 by kerem · 0 comments

kerem commented

2026-03-14 09:21:35 +03:00

Owner

📋 Pull Request Information

Original PR: https://github.com/anomalyco/opentui/pull/225
Author: @KeremP
Created: 10/22/2025
Status: ✅ Merged
Merged: 10/25/2025
Merged by: @kommander

Base: main ← Head: main

📝 Commits (5)

1579cb9 feat: add transparent background support and improve dev linking
06793dc revert example back
1bce96f revert example
bf35e85 cleanup
d2714e5 make transparent background default. run prettier

📊 Changes

3 files changed (+55 additions, -8 deletions)

View changed files

📝 packages/core/src/renderer.ts (+3 -2)
📝 packages/core/src/zig/renderer.zig (+13 -6)
📝 scripts/link-opentui-dev.sh (+39 -0)

📄 Description

This addresses https://github.com/sst/opentui/issues/184 by defaulting to terminal background if renderer alpha channel is 0.

The transparent background can be set by using renderer.setBackgroundColor("transparent") for example in packages/react/examples/basic.tsx.

import { bold, fg, italic, t, TextAttributes } from "@opentui/core"
import { render, useKeyboard, useRenderer } from "@opentui/react"
import { useCallback, useState } from "react"

export const App = () => {
  const renderer = useRenderer()
+  renderer.setBackgroundColor("transparent")
  const [username, setUsername] = useState("")
  const [password, setPassword] = useState("")

Example in ghostty

_{🔄 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/225 **Author:** [@KeremP](https://github.com/KeremP) **Created:** 10/22/2025 **Status:** ✅ Merged **Merged:** 10/25/2025 **Merged by:** [@kommander](https://github.com/kommander) **Base:** `main` ← **Head:** `main` --- ### 📝 Commits (5) - [`1579cb9`](https://github.com/anomalyco/opentui/commit/1579cb956a5b36c6e9fa474fd933d7b2beaec0fa) feat: add transparent background support and improve dev linking - [`06793dc`](https://github.com/anomalyco/opentui/commit/06793dc730b4723f6075cf122a69476f3a7790f3) revert example back - [`1bce96f`](https://github.com/anomalyco/opentui/commit/1bce96f08782eb257d9b54add0c26e6abaa98f29) revert example - [`bf35e85`](https://github.com/anomalyco/opentui/commit/bf35e85ddb29e177921eec88a7f8ae6be7264bb8) cleanup - [`d2714e5`](https://github.com/anomalyco/opentui/commit/d2714e5b57580a37eeff381808eee17518a02a8f) make transparent background default. run prettier ### 📊 Changes **3 files changed** (+55 additions, -8 deletions) <details> <summary>View changed files</summary> 📝 `packages/core/src/renderer.ts` (+3 -2) 📝 `packages/core/src/zig/renderer.zig` (+13 -6) 📝 `scripts/link-opentui-dev.sh` (+39 -0) </details> ### 📄 Description This addresses https://github.com/sst/opentui/issues/184 by defaulting to terminal background if renderer alpha channel is 0. The transparent background can be set by using `renderer.setBackgroundColor("transparent")` for example in `packages/react/examples/basic.tsx`. ```diff import { bold, fg, italic, t, TextAttributes } from "@opentui/core" import { render, useKeyboard, useRenderer } from "@opentui/react" import { useCallback, useState } from "react" export const App = () => { const renderer = useRenderer() + renderer.setBackgroundColor("transparent") const [username, setUsername] = useState("") const [password, setPassword] = useState("") ``` Example in ghostty <img width="852" height="670" alt="image" src="https://github.com/user-attachments/assets/658703ad-77a6-4624-b07c-5a24bbf8447c" /> --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>