
Show HN: Box Line Text – A simple whiteboarding tool for screencasts - jncraton
https://github.com/jncraton/box-line-text
======
krat0sprakhar
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](https://excalidraw.com)

[1] [https://github.com/jncraton/box-line-
text/blob/master/src/in...](https://github.com/jncraton/box-line-
text/blob/master/src/index.html#L34-L85)

~~~
luckman212
Excalidraw is super smooth! Thanks for sharing.

------
montroser
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](https://miro.com), and then moved to
[https://beta.plectica.com](https://beta.plectica.com) for our diagrams /
whiteboarding. Both are pretty great...

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

~~~
montroser
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.

------
zoom6628
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.

~~~
jncraton
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. :)

------
PureParadigm
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.

~~~
jncraton
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.

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

~~~
jncraton
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.

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

------
pX0r
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.

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

Anyone have any suggestions?

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

------
nvr219
Love it! Simple and to the point.

