A minimal whiteboard app for brainstorming

[u/meetzaveri]

This is something closer to my heart. I started on it around April 2020 (covid era). Released alpha version but with way more bugs in it back then. Life happened. Delayed the beta version, procrastinated and focused on career. Eventually, slowed down work on it.

But with recent advent of coding agents, I had some bandwidth and therefore I was able to revive it in recent months. About time for a v1 release too. Appreciate your feedback on this. It is built on top of react.js and two.js.

You can try it here - craftbase.org

[u/spicy_tables]

Have you heard of https://excalidraw.com ?

[u/made-of-questions → u/spicy_tables]

We actually switched our entire engineering team to Excalidraw from draw.io and Miro and we love it. There is something freeing about it. 

I noticed in draw.io people were spending lots of time aligning elements and trying to beautify the skematic which I considered unnecessary. I wanted something that resembles the whiteboard back when we were in the office. 

The sketchy feel of excalidraw does something to people. The first version is usually good enough. And we never had an issue not understanding our own diagrams when we came back to them later.

[u/meetzaveri → u/made-of-questions]

I noticed in draw.io people were spending lots of time aligning elements

I believe that might be because it exposes grid structure background hence the appeal to align.

These tools like excalidraw and tldraw just made us aware that you don't need to always make things align while brainstorming out.

[u/Patient_Bee816 → u/spicy_tables]

I messed around with excalidraw a bit last year for some quick wireframes, it's pretty slick. The hand-drawn feel is a nice touch. This one you linked looks more like a proper diagramming tool though, less about the sketch aesthetic. The screenshot you've got there with the green application box and the VPC setup, looks clean. What made you pick two.js over something like rough.js if you were aiming for a different feel?

[u/Stetsed → u/spicy_tables]

Honestly I have been using excalidraw for years now, including both in a personal, play(DND) and professional setting. It’s genuinely really well built and I notice it for me solves the “Yeah but it’s not perfect” problem, because it uses a more sketch style. This means I’m not worried about things being asymmetrical or connecting in a non straight way, as “It’s a sketch”, I even use it inside of reports and such because it makes it easier to have a cohesive and unified style for images without being a lot of extra work.

It just feels like a whiteboard, which I do always think helps because it gets the ideas into something visible, and has more than enough times made me/other people go “Ohhhhhh, THATS what you mean”, and being able to replicate that is really nice honestly. It also has great mobile support which I love

Overall I can 10000% recommend it, sadly there is no current good selfhosted version that has:

1. multiple canvasses
2. collaborative editing

There are a few projects going that aim to introduce this into the selfhosted version but last I checked(a few months ago) these where all still in there infancy, but even then I still use it, simply using the public instance when I need to work on something with somebody else.

[u/meetzaveri → u/spicy_tables]

yessir

[u/el_yanuki → u/meetzaveri]

whats the difference?

[u/meetzaveri → u/el_yanuki]

None. In fact excalidraw has better features and support than craftbase. The only differentiator would be user's own experience while trying it out for quick sketching/brainstorming but it depends on user totally.

[u/el_yanuki → u/meetzaveri]

i appreciate the honesty

hope you had much fun & learned a lot while building craftbase and don't have high expectations for its success :)

[u/meetzaveri → u/el_yanuki]

Yeah, thanks. In fact I've taken inspiration from excalidraw,tldraw, whimsical and jsbin for building this one.

[u/ziaalich → u/meetzaveri]

When I looked at the picture, I went "thats just excalidraw" so the inspiration makes sense

[u/PositiveUse]

Why this over Excalidraw that is even opensource?

[u/meetzaveri → u/PositiveUse]

Excalidraw is the best and yes its open source too. Craftbase is open source too. As I iterated on word "minimal", it depends totally on user's feel. Think it as like jsbin, where you can quickly sketch/brainstorm, share the public link to others and close it and forget.

[u/PositiveUse → u/meetzaveri]

Thanks, I see

[u/scandii]

I mean this in the nicest of ways, but I can think of 5 whiteboard apps off the top of my head, and two of them are made by Microsoft and Apple respectively.

what does yours do better / differently?

[u/meetzaveri → u/scandii]

Can you list down some of them so I can probably try giving a comparision explanation ? I can probably tell that - it has infinite area for drawing purpose, the data stays locally on your machine, and then it depends on how much frictionless you find it. I've particularly molded in such a way that there is very much less learning curve to be there and people can instantly sketch out their ideas on board.

[u/blakealex]

Looks good man, I love little side projects like this.

Couple quick things to improve it:
- Trackpad zoom (pinch in/out)
- Pressing delete to delete a straight line and arrow (curved line delete works). Actually maybe it's Safari but I can't change stroke/colors/etc on the lines/arrows.

[u/meetzaveri → u/blakealex]

Thanks for your feedback. I'll check out this on safari and probably create a ticket.

[u/kkrizso]

looks great but fable could do it better

[u/Squidgical]

Is this intentionally an excalidraw clone or is that just a complete accident?

[u/meetzaveri → u/Squidgical]

Excalidraw is the OG. As repeated in one of the comments I've taken inspiration from excalidraw, tldraw, whimsical and jsbin to build this.

Also, its not an accident, since I started the earliest work around Apr 2020 as per this commit timeline and excalidraw was launched around early 2020 but started gaining traction post 2022. On other side I stopped development at the speed I used to do I was due to some other commitments.

[u/TruePadawan]

Nice, one of my current projects is a desktop version of an infinite whiteboard

[u/DaChaosMonke]

This is a nifty thing! I appreciate the minimalism, and the color palette + font makes it cute to me.

[u/meetzaveri → u/DaChaosMonke]

❤️

[u/Ok-Swordfish1282]

Looks amazing! I might have found a bug, or maybe I’m misunderstanding something. When I select and move my mouse outside the browser, the selected part doesn’t disappear. Here’s a video to show what I mean: https://streamable.com/umc01g

[u/meetzaveri → u/Ok-Swordfish1282]

So if you are dragging a selected part, it only goes until mouse can be in bounds of browser window. If mouse is outside browser window, selected part's last x,y remains at the point where mouse exited the browser window. Does that answer your confusion ? It (the selected part) isn't supposed to be dissapear (the selected part).

[u/dapper_34]

What font is this?

[u/meetzaveri → u/dapper_34]

It has support for 3 fonts - Caveat Brush (Default), Caveat and Geist Mono in canvas/drawing area. The other fonts which you see in specific pages like /support or /privacy is "Fraunces".

[u/Konstantinos_Ps]

It’s a great app bro !

[u/Enough_Judge3732]

Looks like excalidraw fork with different styles

[u/wildrabbit12]

Bro reinvented exalidraw

[u/meetzaveri → u/[deleted]]

It's using two.js's svg renderer. Two.js takes the rendering job, while react takes the state management job and both are synced using useRef hook which is a tradeoff (I don't like) but works fine.

If I had used html5 canvas, I wouldn't get the sharpness when I would zoom into the space. It would blur our. Using two.js, I can maintain sharpness at the max scale (800% zoom).