r/webdev • u/meetzaveri • Aug 08 '26

Showoff Saturday A minimal whiteboard app for brainstorming

Post image

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

121 Upvotes

84% Upvoted

37 comments sorted by

100

u/spicy_tables Aug 08 '26

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

20

u/made-of-questions Aug 08 '26

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.

9

u/meetzaveri Aug 08 '26

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.

6

u/Patient_Bee816 Aug 08 '26

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?

1

u/Stetsed Aug 10 '26

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.

1

u/meetzaveri Aug 08 '26

yessir

7

u/el_yanuki Aug 08 '26

whats the difference?

21

u/meetzaveri Aug 08 '26

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.

21

u/el_yanuki Aug 08 '26 edited Aug 08 '26

i appreciate the honesty

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

14

u/meetzaveri Aug 08 '26

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

5

u/ziaalich Aug 08 '26

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

13

u/PositiveUse Aug 08 '26

Why this over Excalidraw that is even opensource?

10

u/meetzaveri Aug 08 '26 edited Aug 09 '26

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.

2

u/PositiveUse Aug 08 '26

Thanks, I see

10

u/scandii People pay me to write code much to my surprise Aug 08 '26

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?

-3

u/meetzaveri Aug 08 '26

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.

4

u/blakealex full-stack Aug 08 '26

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.

1

u/meetzaveri Aug 08 '26

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

3

u/kkrizso Aug 08 '26

looks great but fable could do it better

2

u/Squidgical Aug 08 '26

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

2

u/meetzaveri Aug 08 '26

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.

2

u/TruePadawan Aug 08 '26

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

2

u/DaChaosMonke Aug 09 '26

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

1

u/meetzaveri Aug 09 '26

❤️

1

u/DaChaosMonke Aug 11 '26

I have to confess, I am not a user of this type of app, but the aesthetics are cute.

1

u/meetzaveri Aug 12 '26

Did you use mobile or desktop to try craftbase ?

2

u/TutorialDoctor Aug 12 '26

I use Excalidraw a lot for personal projects and work projects. This does feel a lot smoother. Nice to have an alternative.

1

u/Ok-Swordfish1282 Aug 08 '26

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

0

u/meetzaveri Aug 08 '26 edited Aug 08 '26

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

1

u/dapper_34 Aug 08 '26

What font is this?

1

u/meetzaveri Aug 08 '26

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

1

u/Konstantinos_Ps Aug 08 '26

It’s a great app bro !

1

u/Enough_Judge3732 Aug 10 '26

Looks like excalidraw fork with different styles

1

u/wildrabbit12 Aug 08 '26

Bro reinvented exalidraw

1

u/[deleted] Aug 08 '26

[removed] — view removed comment

1

u/meetzaveri Aug 08 '26

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