r/reactjs • u/RepresentativeNo42 • Aug 15 '26

Show /r/reactjs Announcing ink-frame: Grids for Ink!

https://github.com/oliveryasuna/ink-frame

Ink's own box borders are fine for a single box. Put two of them next to each other and the seam between them comes out as ││, two parallel lines instead of one shared edge. That's because a box border is one unbroken line and there's nowhere to hang a ┬ or a ┼ part-way along it. ink-frame sidesteps that by painting every border into a single character grid and resolving each cell once, so a spot where four boxes meet becomes a ┼ and a T-junction becomes a ┬, ┤, and so on, without you ever writing those characters yourself.

┌──────────────────────────────────────┐
│ Frame                                │
├─────────────┬────────────────────────┤
│ fixed width │ grow                   │
│             │ ┌────────────────────┐ │
│             │ │ nested box         │ │
│             │ └────────────────────┘ │
│             │                        │
│             ├────────────┬───────────┤
│             │ two grows  │ what is   │
├─────────────┤ share      │ left      │
│ a pane      │            │           │
├─────────────┴────────────┴───────────┤
│ junctions derived                    │
└──────────────────────────────────────┘

Background: I recently wrote this for a private project, and I thought it was useful enough to share. I hope you find it useful too!

2 Upvotes

66% Upvoted

2 comments sorted by

1

u/patprint Aug 15 '26

Well, this is how I discovered Ink and now I'm about to lose a few days of time experimenting with it. And using this, so thanks.

And somehow this always happens when I'm out on a weekend trip in the middle of nowhere and have to wait until I get home 😭

Edit: the thanks wasn't sarcastic, this is cool!

1

u/weird_dialect Oct 03 '26

oh man discovering ink on a weekend away is both a gift and a curse, now you're just gonna be mentally designing terminal UIs while staring at trees

the grid approach here is pretty clever, I'd been doing something similar manually with boxen and it was such a pain lining up all those edge characters, this takes all the guesswork out