My take on a whiteboard

FINAL DEVLOG BEFORE SHIP. (I spent 47 hours teaching myself to build a whiteboard this week 😭)

Thats not a problem, I didn’t have anything to do anyway.

Okay, what i’ve done. First off I did the PDF export but then I realized that its not helpful at all to have a static image of an infinite zoom whiteboard, so I made an adjustment to an HTML export.

(this took quite a while because i’ve never implemented an export before so I had quite a bit of debugging to do, excerpt of the script below.)

I also added the right click.

Anyway, pushing to vercel and finalizing github now.

Okay, so what I realized is that you can’t navigate the whiteboard using anything, so I added right-click scroll.

More detailed devlog later once I finish up the Export.

got a lot done today.

Devlog #7 or 8?

Anyway, I took some time to fix the sticky note issue.

addNote mixed units. When centering a new note, it subtracted a screen-pixel offset (NOTE_WIDTH/2) directly from a world-space coordinate instead of dividing it by scale first.

CSS transform: scale() made text blurry. My first attempt at “scale with zoom” applied a single CSS scale() transform to the whole notes layer.

So those issues were fixed and the sticky notes scale with zoom.

I then ran into the issue of not being able to find sticky notes zoomed in alot, so I made a minimap to find your notes. (I think its getting really complex)

Anyway…

Added a small canvas, bottom-right corner, that:

• Computes the bounding box of all your strokes + notes (reusing the same bounds logic as “Fit content”), unioned with your current viewport so the indicator is always inside the map.
• Fits that box into a 200×140px canvas and redraws it every frame: strokes as thin dark lines, notes as colored rectangles.
• Draws your current viewport as a purple rectangle with a translucent fill and a 14px minimum size, so it doesn’t shrink to invisibility when you’re zoomed in a lot.
• Is clickable: clicking anywhere on it pans the main view to that spot (inverting the same fit-to-box math used to draw it).

Now, last addition I want to do is add PDF export, and I think this is ready to ship.

Images attached of progress!

See ya in the next one.

Okay – productive day today (i think)

Unfortunately, I tried to implement sticky notes but I got pretty frustrated becasue I couldn’t get them to scale with the zoom of the whiteboard (super complex for some reason), so i am going to put more time into and see what I can do. It’s pretty late so expect a more detailed devlog tomorrow.

I’m back.

Devlog 6.

Heres what i’ve done:
Added a partial eraser that removes the point under the cursor and splits the stroke into remaining pieces.

Effectively unlimited zoom now added, range widened from 0.0005×–2000× to 1e-6×–1e6× (true infinity isn’t representable in floating point, but this is far beyond any practical drawing scale).

Fit content button now allows you to not lose your notes in the big space… computes the bounding box of everything drawn and animates the view to frame it all, so no matter how far you’ve zoomed in or out, you can always snap back and find your notes instead of losing them in empty space

What to do:

Lessen the speed of zoom

Add more features.

Images are the partial eraser working

Okay, so today I took some time to fix things from yesterdays devlog

Oh wait, Devlog #5 (i think)

Here’s what I did:
pointermove now pulls getCoalescedEvents() to capture every sub-frame sample the browser batched (previously only the latest position per frame was used, which is what caused faceting on fast circular motion). Also added a small minimum-distance filter (~1.2 screen px) to suppress mouse-sensor jitter without losing shape on fast strokes.

wheel input now updates a targetView and a requestAnimationFrame loop eases the actual view toward it (lerp factor 0.3) instead of snapping instantly. Panning or hitting Reset cancels any in-flight zoom animation and re-syncs the target so it doesn’t jump afterward.

Same issue with the infinite zoom is only about 20000x so I think by slowing the zoom increments will give the illusion of more “infinite zoom”. Also, things will get small so you can lose notes so I am going to try and workshop some solutions. Overall, progress being made.

Okay, so devlog #4, and probably the last one for today…

Here is what i’ve done:

1. Infinite zoom, scale range widened from 0.1×–8× to 0.0005×–2000× (effectively unbounded for practical use), plus an adaptive dot grid that keeps spacing readable at any zoom level so the space still feels navigable instead of a blank void. Added a live zoom-% readout and a “Reset view” button in the toolbar. (Screenshots below)

– Also, infinite zoom not totally infinite yet, but its more “infinite” than the last devlog, also need to workshop this.

1. Smoother strokes, replaced straight lineTo segments between raw pointer samples with quadraticCurveTo through midpoints, so fast circular motions render as smooth curves instead of jagged polygons. (Before and After below) – Honestly, its still kinda sucky, and maybe even worse then before, so I have to workshop this a little bit over the next few devlogs…

Added reset view and view UI buttons, but not working yet, so this will be done next as well.

Things left to do (aside from whats highlighted above):
Add more features
Make it more quirky
Make it less boring
Collaborative whiteboard??? (probably not.)

First three kinda the same lol.

Devlog #4 – I think?

What I’ve done:

Calibrated the mouse tool

Created a stroke eraser (not semi)

What to do?

Stroke semi-eraser

Infinite zoom

Add various features as I think them up

Devpost 3!

What I’ve Done:

After a bit of learning, I was able to build the initial whiteboard and deploy it in my browser. I was also able to afix a drawing tool to it, so you can draw things.

Things I need to do:
Draw tool is not calibrated correctly with mouse (see attachment below; black point represents where my mouse is clicking)

Can’t zoom infinitely

Your ideas are permanent (which is not ideal), so I will make an erase feature.

Overall, its very barebones and boring.

As always, I’ve attached a sample of the code I’ve added.

Hi Everyone! Devlog #2 for my own whiteboard project…

So far what i’ve been able to to do is 2 things, I removed the boilerplate assets from the Vite setup and I had App.tsx render a bare resizable to serve as the base for my whiteboard… Attached is an image of the base whiteboard script…

Learned about Vite frontend which is a software to build things like whiteboards with the features that I want, and built the scaffolding… took a bit of debugging but I figured it out.