add word wrap to code viewer #2027

Activity

1. gameroman commented on Mar 15, 2026

   

   gameroman

   on Mar 15, 2026

   Last edited by gameroman

   Member

   More actions

   Also I think it should be an option/toggle, because sometimes you don't want code to be wrapped

   Can also add a shortcut for the toggle, for example Alt + Z
2. stephansama commented on Mar 15, 2026

   

   stephansama

   on Mar 15, 2026

   Author

   More actions

   Also I think it should be an option/toggle, because sometimes you don't want code to be wrapped

   Can also add a shortcut for the toggle, for example Alt + Z

   my implementation has a button i can add the keyboard shortcut

   👍React with 👍1Reacted by Roman
3. thegreatalxx

   added 2 commits that reference this issue on Mar 22, 2026

   feat: add word wrap toggle to code viewer (npmx-dev#2027)

   ebc0cb3

   feat: add word wrap toggle to code viewer (npmx-dev#2027)

   30111f3
4. knowler commented on Mar 23, 2026

   

   knowler

   on Mar 23, 2026

   Last edited by knowler

   Member

   More actions

   Some thoughts here:

   • It would be good to use CSS to do the actual line wrapping.
   • We’ll need to ensure the line numbers remain accurate when lines wrap. So far I think all of the solutions don’t do this. To do this, I think we need to create a CSS grid further up the tree, so that the line numbers are in one column and the code is in the other, so that the entire row grows when the line wraps.
   • There likely already are performance issues with the existing code viewer and any JS wrapping solution will likely accentuate those problems. Even with using CSS I’d expect to run into problems after a certain amount of lines. We’ve already run into issues with CSS grid with a large amount of items in Firefox.
   • We could use content-visibility: auto to tell the browser to skip rendering of lines that aren’t “relevant”. We could also integrate that into whatever we use for syntax highlighting by leveraging the contentvisibiilityautostatechange event (yes… that’s the longest event name), though that would require the highlighter to require line-by-line highlighting. Since it applies strict containment (i.e. size, layout, paint, and style) that will affect the scrollbars (they’ll be jumpy) and so we’ll need to manually set the intrinsic size of the line ourselves which is a guess. Setting it to 1 line is a fairly reasonable guess.

   I expect all of this will require a fair bit of prototyping all of the various parts before we converge on a solution.

   ❤️React with ❤️1Reacted by Arturo Fonseca

   👀React with 👀1Reacted by Roman
5. serhalp

   added the

   Feature

   issue type on Apr 10, 2026
6. gameroman

   added

   needs discussionAn idea that needs more discussion to understand the scope and impact.An idea that needs more discussion to understand the scope and impact.

   on Aug 4, 2026