Show HN: Box Line Text – A simple whiteboarding tool for screencasts | Hacker News Reader

Show HN: Box Line Text – A simple whiteboarding tool for screencasts

github.com

132 pointsjncraton22 comments

Looks pretty great but IMHO whiteboarding without arrows is not super ideal. While I'd still prefer Excalidraw for screencasts, its nice to see how much can be done in a few lines of JS[1]

[0] https://excalidraw.com

[1] https://github.com/jncraton/box-line-text/blob/master/src/in...

Excalidraw is super smooth! Thanks for sharing.

I appreciate that you took the time to look at the code. I like the app itself well enough, but I especially like that it's just 100 lines of HTML/CSS/JS.

Thanks for sharing excalidraw as well. That looks great.

This is a cool start. There is quite a lot you can express with boxes and arrows that doesn't really lend itself nearly as well to any other format.

That said, in real-world video calls I've found that having the whiteboard be collaborative is essential. Being able to see a colleague's mouse cursor as they're asking a question out loud, or someone else being able to draw a little alternate part of the diagram right there -- this stuff can make technical planning discussions way more productive.

We started with https://miro.com, and then moved to https://beta.plectica.com for our diagrams / whiteboarding. Both are pretty great...

Do you remember why you moved away from Miro? (I am developing a whiteboard software)

We found that we were often essentially making lists inside of top-level boxes.

With Miro you basically just get bulleted text lists, which is fine but only gets you so far.

With Plectica you can nest cards inside of cards, which means you can drag drop to re-order, give nested cards their own tags, etc.

So for things like modeling a db schema (lists of columns in tables, each column with its own attributes) or planning user stories (lists of tasks to support use cases, each task with its own parameters etc), Plectica is just really flexible / extensible.

It's certainly helpful to see more of the great tools in this space, and I appreciate you sharing those.

I prefer collaborative editing for meetings as well, but my use case for this is more academic. I'm using it as a stand-in for a board that I'd usually use at the front of the classroom to make a quick diagrams or notes during a lecture, so collaboration isn't especially important to me. I simply wanted something clean and distraction-free.

It'd be sweet to add collaboration to this, but that's obviously an order of magnitude more complicated than what I've built. Perhaps I'll get around to it eventually.

Curious to know - why did you move from Miro to Plectica?

This is amazing - it is sort-of the OneNote notetaking metaphor but simple. This will be excellent as a simple shared note taking tool for meetings.....Im going to use this today (I only have 7 zoom session on my calendar - gotta love Mondays!) to take notes instead of writing pen and paper. What i like the most is it doesnt required 13,000 files and a front-end framework that makes the Titanic look like a sailing dinghy.

Thanks! I enjoyed the challenge of keeping this lean. It's fun to build a web app where the favicon is the bulk of the bytes on the wire. :)

I realize the point of this is to be simple, but I can't see myself using it unless there is some way to delete elements after they have been created (maybe dragging a diagonal line with right click should delete anything in the box defined).

I know you can use Ctrl-Z but if I want to change a box I made early on then this doesn't work because I'd have to basically start over from scratch.

Deleting is definitely the feature I'd most like to have.

I don't generally love the idea of taking over right click behavior, but I've pushed out a patch to allow removing elements using right click. This is an admittedly poor solution (especially for lines, as they are very small click targets). Hopefully I'll have a chance to develop a more robust way to delete elements such as the box method that you described.

Back when I used to work with cad software, you could select elements by using a drag box, but interestingly there were two kinds. I'm gonna call them inclusive and exclusive because idk what they're actually called, but dragging the region one way created a selection of contents completely contained in the region. The other way would create a selection of any object partly contained in that region. It was an interesting way to deal with large amounts of intersecting objects and selecting the correct one

Awesome! Another option if you don't want to take over right-click behavior could be shift-click (holding shift and clicking), or similar.

I like that idea. I've changed to using shift for deletion. I've also enabled deleting on both mouse clicks and movement, so you can hold down shift and wiggle the mouse around like an eraser. This makes it much easier to delete lines.

Thanks! I like that you can delete on mouse movement -- I think it's actually better and more intuitive than my original suggestion.

It seems that vertical lines can only be erased when mouse moves vertically or almost vertically while holding shift.

You can right-click to delete a box and redraw it (works for lines too).

edit: author just changed it to shift-click

Good starter project to flex your JS muscle. But other than that - Zoom's built-in whiteboard is pretty feature-rich and meets my use-cases perfectly. My use-cases -: brainstorming with colleagues, interviews.

> It doesn't provide touch or pen support. There are much better tools available for that type of interface.

Anyone have any suggestions?

It would be cool to be able to click on the end of a line one drawn and toggle through some arrow ends.

Love it! Simple and to the point.

Reply on news.ycombinator.com