starred/opentui

Fork 0

mirror of https://github.com/anomalyco/opentui.git synced 2026-04-25 13:06:00 +03:00

[GH-ISSUE #438] Bug: nested <text> elements not supported. #113

New issue

Open

opened 2026-03-02 23:44:38 +03:00 by kerem · 5 comments

kerem commented

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

Owner

Originally created by @dhleong on GitHub (Dec 22, 2025).
Original GitHub issue: https://github.com/anomalyco/opentui/issues/438

Originally assigned to: @kommander on GitHub.

I would expect to be able to do something like this:

function App() {
  return (
    <box alignItems="center" justifyContent="center" flexGrow={1}>
      <box justifyContent="center" alignItems="flex-end">
        <ascii-font font="tiny" text="OpenTUI" />
        <text attributes={TextAttributes.DIM}>What will you
          <text attributes={TextAttributes.UNDERLINE}>build?</text>
        </text>
      </box>
    </box>
  );
}

and have the build? text show both dim and underlined, but instead I get an error that:

Error: TextNodeRenderable only accepts strings, TextNodeRenderable instances, or StyledText instances

Is there an expected way to compose text like this? The error message suggests this should work, though peeking in briefly it seems that the react module is using a TextBufferRenderable and not a TextNodeRenderable....

Originally created by @dhleong on GitHub (Dec 22, 2025). Original GitHub issue: https://github.com/anomalyco/opentui/issues/438 Originally assigned to: @kommander on GitHub. I would expect to be able to do something like this: ```tsx function App() { return ( <box alignItems="center" justifyContent="center" flexGrow={1}> <box justifyContent="center" alignItems="flex-end"> <ascii-font font="tiny" text="OpenTUI" /> <text attributes={TextAttributes.DIM}>What will you <text attributes={TextAttributes.UNDERLINE}>build?</text> </text> </box> </box> ); } ``` and have the `build?` text show both dim and underlined, but instead I get an error that: ``` Error: TextNodeRenderable only accepts strings, TextNodeRenderable instances, or StyledText instances ``` Is there an expected way to compose text like this? The error message *suggests* this should work, though peeking in briefly it seems that the react module is using a `TextBufferRenderable` and not a `TextNodeRenderable`....

kerem added the

feature

core

bug

labels

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

kerem commented

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

Author

Owner

@msmps commented on GitHub (Dec 22, 2025):

Is there an expected way to compose text like this? The error message suggests this should work, though peeking in briefly > it seems that the react module is using a TextBufferRenderable and not a TextNodeRenderable....

This is expected 👍

<text attributes={TextAttributes.DIM}>
  What will you{" "}
  <span attributes={TextAttributes.UNDERLINE}>build?</span>
</text>

<text attributes={TextAttributes.DIM}>
  What will you{" "}
  <u>build?</u>
</text>

@msmps commented on GitHub (Dec 22, 2025): > Is there an expected way to compose text like this? The error message _suggests_ this should work, though peeking in briefly > it seems that the react module is using a `TextBufferRenderable` and not a `TextNodeRenderable`.... This is expected 👍 ```tsx <text attributes={TextAttributes.DIM}> What will you{" "} build? </text> ``` or ```tsx <text attributes={TextAttributes.DIM}> What will you{" "} build? </text> ```

kerem commented

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

Author

Owner

@msmps commented on GitHub (Dec 22, 2025):

There are more examples here

@msmps commented on GitHub (Dec 22, 2025): There are more examples [here](https://github.com/sst/opentui/blob/main/packages/react/examples/text.tsx)

kerem commented

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

Author

Owner

@dhleong commented on GitHub (Dec 22, 2025):

I see, thanks! This design does make composition problematic: a component that returns a <text> component may not be composed into another that wants to render that <text> inline, but a component that returns a  cannot itself be directly rendered—the caller must wrap it in a <text> (which, then, means the caller couldn't in turn be composed inside another <text>!).

I'm curious about the purpose of this separation? Ink, for example, just has <Text> which can both compose other Text elements and be rendered on its own.

@dhleong commented on GitHub (Dec 22, 2025): I see, thanks! This design does make composition problematic: a component that returns a `<text>` component may not be composed into another that wants to render that `<text>` inline, but a component that returns a `` cannot itself be directly rendered—the caller must wrap it in a `<text>` (which, then, means the caller couldn't in turn be composed inside another `<text>`!). I'm curious about the purpose of this separation? [Ink](https://github.com/vadimdemedes/ink), for example, just has `<Text>` which can both compose other Text elements and be rendered on its own.

kerem commented

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

Author

Owner

@kommander commented on GitHub (Dec 23, 2025):

That is due to how text rendering works with StyledText chunks. I want to refactor that to be closer to the actual text buffer rope segments/chunks, using highlights. Also the TextNode's which are currently the stylable children of Text should be just Text instances, which should support nesting, flattening to the outer most Text parent.

It will be supported, I just didn't have the time to do that yet, as it's quite a large core change.

@kommander commented on GitHub (Dec 23, 2025): That is due to how text rendering works with `StyledText` chunks. I want to refactor that to be closer to the actual text buffer rope segments/chunks, using highlights. Also the `TextNode`'s which are currently the stylable children of Text should be just Text instances, which should support nesting, flattening to the outer most Text parent. It will be supported, I just didn't have the time to do that yet, as it's quite a large core change.

kerem commented

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

Author

Owner

@lukeed commented on GitHub (Feb 2, 2026):

Having  children can cover all the styling needs of nested texts, but there's currently no way to have mouse handlers for nested subtexts

@lukeed commented on GitHub (Feb 2, 2026): Having `` children can cover all the styling needs of nested texts, but there's currently no way to have mouse handlers for nested subtexts

kerem referenced this issue

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

[PR #113] [MERGED] feat(solid): add extend ability to align with @opentui/react #297

kerem referenced this issue

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

[PR #113] [MERGED] feat(solid): add extend ability to align with @opentui/react #1080