Repository navigation
feat(core): add MarkdownRenderable with automatic table alignment - #433
Conversation
…kdown types to react and solid
There was a problem hiding this comment.
Pull request overview
This PR adds a new MarkdownRenderable component that extends the rendering capabilities of OpenTUI with markdown-specific features. The implementation uses the marked library to parse markdown and renders tables with automatic column sizing through a BoxRenderable-based layout system.
Key changes:
- Introduces
MarkdownRenderableclass with support for tables, code blocks, headings, lists, blockquotes, and inline formatting - Implements a conceal mode that hides markdown formatting markers (e.g.,
**,*,`) while preserving styled text - Adds comprehensive test coverage with 32 test cases covering various markdown features
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/core/src/renderables/Markdown.ts | New MarkdownRenderable implementation with table rendering, inline formatting, and concealment logic |
| packages/core/src/renderables/tests/Markdown.test.ts | Comprehensive test suite covering tables, formatting, code blocks, and conceal modes |
| packages/core/src/renderables/index.ts | Exports the new Markdown renderable |
| packages/core/src/examples/markdown-demo.ts | Interactive demo showcasing markdown features with theme switching |
| packages/react/src/types/components.ts | TypeScript types for React MarkdownRenderable component |
| packages/solid/src/types/elements.ts | TypeScript types for Solid MarkdownRenderable component |
| packages/core/package.json | Adds marked@^17.0.1 dependency |
| bun.lock | Lock file updates for marked dependency |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
Uhh looks good! I need to work through that. |
|
It currently does not support streaming markdown properly. I can look into that. It needs an |
|
I made it update the tables in-place instead of recreating all elements, which is somewhat better. I found that when streaming a lot of markdown (endless mode in the demo), it becomes slower and slower. Seems like something is resetting the I wonder if there is a better way to render tables, without relying on yoga layout, as for large tables it would be quite a lot of nested nodes. |
|
Thank you for fixing the reset. I think using Yoga is completely fine. I noticed no lags rendering a lot of tables in opencode with the markdown renderable. |
Screen.Recording.2025-12-29.at.11.32.01.movCheck the "Overall" render time in the stats, it should be low and stable, but it increases the more content is being streamed. In the markdown demo when I set stream speed to fastest and shift+E for endless stream (which can be stopped with shift+X again). |
|
I found what was the issue with the lower FPS when the is content growing, the issue is layout recalculations Every time a yoga node changes we also mark the parents dirty, so yoga calls measure functions again which can be slow when there are a lot of nodes Using bun-yoga makes this problem less noticeable but does not remove it To make layout calculation faster during streaming with a lot of content there would need to be a way to cache layout for nodes if content did not change like the browser does 
|
|
Adding a cache for |
Switch to this OpenTUI PR with built-in Markdown rendering: anomalyco/opentui#433 Also there were an increasing number of hard to nail down layout/rendering issues - text overlapping other text, random characters not getting cleared, etc. I had Claude remove a bunch of functionality and then gradually add things back in. Rendering seems solid now but some features are missing.
|
I'll do the performance improvements this week and then this should be good. |
|
Hope this can be merged soon |
@opentui/core
@opentui/react
@opentui/solid
@opentui/core-darwin-arm64
@opentui/core-darwin-x64
@opentui/core-linux-arm64
@opentui/core-linux-x64
@opentui/core-win32-arm64
@opentui/core-win32-x64
commit: |
Two issues fixed: 1. Use --all flag to enable Zig cross-compilation for all platforms (darwin, linux, windows) instead of only building for the CI runner's platform (linux) 2. Fix the native package paths - packages are scoped under @opentui/ (e.g., @opentui/core-darwin-arm64) not flat opentui-* directories Co-Authored-By: Claude Opus 4.5 <[email protected]>
|
I still have some concerns about performance with marked, the current incremental parsing seems to not properly work. Will merge this anyway now and we can iterate on it. I would put it into opencode with a flag to roll it out to a broader audience with the ability to switch back and forth should it not behave as expected. |
MarkdownRenderablethat extendsCodeRenderablewith markdown-specific featuresmarkedto parse markdown and automatically align table columns based on content widthTables are rendered via flexbox boxes: