[GH-ISSUE #184] Support Renderer background alpha (current render buffer) #39

New issue

Closed

opened 2026-03-02 23:44:03 +03:00 by kerem · 1 comment

kerem commented

2026-03-02 23:44:03 +03:00

Owner

Originally created by @macklinu on GitHub (Sep 26, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/184

Hello, RGBA seems to be working for border styles but not for the background color of a <box> or as set through the renderer.

Steps to reproduce

bun create tui --template react /tmp/opentui-background-alpha
cd /tmp/opentui-background-alpha
bun i

For example, my terminal has a dark blue background:

If I run bun src/index.tsx, I see a black background color (nothing is set by default in the generated @opentui/react from what I can tell).

Next, add a background color with 100% opacity (I believe 255 is the right value?).

diff --git a/src/index.tsx b/src/index.tsx
index 78dc356..cd91a8e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,9 +1,14 @@
-import { TextAttributes } from "@opentui/core";
+import { RGBA, TextAttributes } from "@opentui/core";
 import { render } from "@opentui/react";
 
 function App() {
   return (
-    <box alignItems="center" justifyContent="center" flexGrow={1}>
+    <box
+      alignItems="center"
+      justifyContent="center"
+      flexGrow={1}
+      backgroundColor={RGBA.fromInts(30, 0, 0, 255)}
+    >
       <box justifyContent="center" alignItems="flex-end">
         <ascii-font font="tiny" text="OpenTUI" />
         <text attributes={TextAttributes.DIM}>What will you build?</text>

Next, change the alpha channel to 0:

diff --git a/src/index.tsx b/src/index.tsx
index fa3696c..9400c49 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -7,7 +7,7 @@ function App() {
       alignItems="center"
       justifyContent="center"
       flexGrow={1}
-      backgroundColor={RGBA.fromInts(30, 0, 0, 255)}
+      backgroundColor={RGBA.fromInts(30, 0, 0, 0)}
     >
       <box justifyContent="center" alignItems="flex-end">
         <ascii-font font="tiny" text="OpenTUI" />

Expected: I would see a terminal with my blue terminal theme background
Actual: I see a black background (below)

I've also tried the following but they don't achieve the desired result.

const renderer = useAppRenderer()
useEffect(() => {
   renderer.setBackgroundColor(RGBA.fromInts(0, 0, 0, 0))
}, [])

// and
render(<App />, {
  postProcessFns: [(buffer) => buffer.setRespectAlpha(true)],
});

Versions

@opentui/core 0.1.25
@opentui/react 0.1.25
bun 1.2.22
iterm 3.5.14, ghostty 1.2.0
MacOS 26.0

Originally created by @macklinu on GitHub (Sep 26, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/184 Hello, RGBA seems to be working for border styles but not for the background color of a `<box>` or as set through the renderer. ## Steps to reproduce ```sh bun create tui --template react /tmp/opentui-background-alpha cd /tmp/opentui-background-alpha bun i ``` For example, my terminal has a dark blue background: <img width="1512" height="949" alt="Image" src="https://github.com/user-attachments/assets/6483afa8-eb1d-4f62-8971-e97597637ba4" /> If I run `bun src/index.tsx`, I see a black background color (nothing is set by default in the generated `@opentui/react` from what I can tell). Next, add a background color with 100% opacity (I believe 255 is the right value?). ```diff diff --git a/src/index.tsx b/src/index.tsx index 78dc356..cd91a8e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,9 +1,14 @@ -import { TextAttributes } from "@opentui/core"; +import { RGBA, TextAttributes } from "@opentui/core"; import { render } from "@opentui/react"; function App() { return ( - <box alignItems="center" justifyContent="center" flexGrow={1}> + <box + alignItems="center" + justifyContent="center" + flexGrow={1} + backgroundColor={RGBA.fromInts(30, 0, 0, 255)} + > <box justifyContent="center" alignItems="flex-end"> <ascii-font font="tiny" text="OpenTUI" /> <text attributes={TextAttributes.DIM}>What will you build?</text> ``` <img width="1512" height="949" alt="Image" src="https://github.com/user-attachments/assets/2e334365-19df-4491-9c1d-eb1c144d75ca" /> Next, change the alpha channel to 0: ```diff diff --git a/src/index.tsx b/src/index.tsx index fa3696c..9400c49 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -7,7 +7,7 @@ function App() { alignItems="center" justifyContent="center" flexGrow={1} - backgroundColor={RGBA.fromInts(30, 0, 0, 255)} + backgroundColor={RGBA.fromInts(30, 0, 0, 0)} > <box justifyContent="center" alignItems="flex-end"> <ascii-font font="tiny" text="OpenTUI" /> ``` **Expected**: I would see a terminal with my blue terminal theme background **Actual**: I see a black background (below) <img width="1512" height="949" alt="Image" src="https://github.com/user-attachments/assets/6dc0d716-64bb-4c67-92b3-e6e5916695e8" /> I've also tried the following but they don't achieve the desired result. ```tsx const renderer = useAppRenderer() useEffect(() => { renderer.setBackgroundColor(RGBA.fromInts(0, 0, 0, 0)) }, []) // and render(<App />, { postProcessFns: [(buffer) => buffer.setRespectAlpha(true)], }); ``` ### Versions ``` @opentui/core 0.1.25 @opentui/react 0.1.25 bun 1.2.22 iterm 3.5.14, ghostty 1.2.0 MacOS 26.0 ```

kerem

2026-03-02 23:44:03 +03:00

closed this issue
added the
feature

core
labels

kerem commented

2026-03-02 23:44:04 +03:00

Author

Owner

@kommander commented on GitHub (Sep 26, 2025):

Yes, that is a known limitation at the moment. It will support that moving forward.

Edit: Box over box or other things works, but not with alpha on the lowest level showing the terminal background.

@kommander commented on GitHub (Sep 26, 2025): Yes, that is a known limitation at the moment. It will support that moving forward. Edit: Box over box or other things works, but not with alpha on the lowest level showing the terminal background.

kerem referenced this issue

2026-03-02 23:45:35 +03:00

[PR #39] [MERGED] Setup build script for solid package #242

kerem referenced this issue

2026-03-14 09:14:18 +03:00

[PR #39] [MERGED] Setup build script for solid package #1022