Devlog #007 — Top Toolbar

In this stage I focused on creating the top toolbar for the editor. The goal was to introduce a central place for tools that interact with the canvas and begin shaping the overall workflow of the application.

Most of the core structure for the toolbar is now in place and it already integrates nicely with the rest of the interface.

Current Features

At this point the toolbar is mostly functional:

• Top toolbar layout – the toolbar is implemented and positioned at the top of the editor.
• Tool system – tools can now be added and managed from the toolbar.
• Canvas integration – the toolbar interacts properly with the canvas.

One thing that is still missing is the Select tool, which hasn’t been implemented yet.

There’s still a lot of good work ahead of me, but with every devlog I can clearly see the progress.

Devlog #006 — Canvas Rendering

In this stage I started working on the rendering layer for the canvas. The goal was to finally have a place where the visual side of the project could be tested and iterated on more easily.

General Idea

The main focus of this step was getting the canvas to render properly and creating a simple entry point so it can be tested independently. Until now most of the work was focused on logic, so this part was about actually seeing things on the screen and interacting with them.

Current Features

At this point the canvas already supports a few basic interactions:

• Drawing – it is now possible to render and draw elements on the canvas.
• Zooming – the view can be zoomed in and out.
• Grid rendering – a visible grid is displayed to make positioning easier.
• Undo / Redo system – actions can be reverted and restored.

Technically the undo/redo system is already implemented, although in the demo video I forgot to actually rebuild the project after adding it, so it doesn’t appear there. Classic moment.

What’s Next (idk lol)

In the next stage I’ll move on to creating a prototype toolbar. The idea is to start introducing basic tools that interact with the canvas so the editor can slowly take shape.

Devlog #005 — feat: useWhiteboard Hook

In this stage I worked on a custom React hook called useWhiteboard to handle the whiteboard state.

The hook keeps state in a few parts:

• elements – all the drawn stuff (lines, shapes, etc.)
• camera – position and zoom of the whiteboard view
• tool – the current tool (like “pen”)
• color – current drawing color
• strokeWidth – line thickness

History is handled with useHistory so we can undo/redo and know if it’s possible (canUndo / canRedo).

Functions to manipulate the board:

• addElement – add a new element
• deleteElement – remove an element by id
• clearAll – remove everything
• loadElements – load elements and set camera (handy when restoring a saved board)

The hook returns everything you need: elements, camera, tool, color, stroke width, plus all the functions for adding, deleting, clearing, undo/redo.

Next step: move the Renderer out of the component into pure functions and start doing simple tests.

Devlog #004 — feat: useHistory Hook

This stage was about making a custom React hook called useHistory for undo/redo.

The hook keeps state in three parts:

• past – previous values
• present – current value
• future – values for redo

When you call set:

• current present goes to past
• new state becomes present
• future is cleared
• history is capped at 50 steps

Undo moves the last item from past to present and pushes the previous present into future.
Redo does the opposite.

The hook returns the current state, plus set, undo, redo functions, and canUndo / canRedo flags.

Next step: creating hooks for the whiteboard to manage central state for elements, camera, tools, and colors.

Devlog #003 — feat: Math Parser

In this stage, I worked on adding a math parser to the project. This parser allows the app to take text input representing a mathematical expression, convert it to proper JavaScript syntax, and evaluate the result.

General Idea

The parser lets the user enter a mathematical expression, like 2^3 + sqrt(16), and optionally provide a value for x. The program then calculates the result and returns it.

How It Works

• Readline Import – used to get input from the console.

• REPLACEMENTS Array – a set of text replacements that convert input into JavaScript Math function calls:

  • ^ → ** for exponentiation
  • sqrt(x) → Math.sqrt(x)
  • sin, cos, tan, asin, acos, atan → corresponding Math functions
  • pi → Math.PI
  • e → Math.E
  • Other math functions: abs, floor, ceil, round, sign, max, min, log, ln, exp

• evaluate(expr, x) Function:

  • Replaces all patterns in the input according to the REPLACEMENTS array.
  • Dynamically creates a function using new Function("x", ...) to evaluate the expression.
  • Returns NaN if the result is not a valid number or is infinite.

Devlog #002 — feat: Core Types & .wth File Format

In this stage, I made a pretty significant decision — I removed the landing page entirely.

After thinking about it, I realized that no one really cares how the landing page looks. What actually matters is how the product works. The real value is in functionality, not marketing visuals.

So instead of polishing sections that don’t move the project forward, I decided to focus on the core logic and technical foundations.

Removing the Landing Page

The landing page was a good design exercise, but it didn’t contribute to the core experience. I want to build something real — something that works — and validate the idea through functionality, not aesthetics.

So I deleted it and moved straight to the essence of the project.

Creating fileFormat.ts and whiteboard.ts

I started working on the core structure of the app ;)

im sending photo of my inspiration

Devlog #1 – Project Setup & Hero Section

In the first stage, I created the project and built the initial Hero section.
At the beginning it looked pretty bad, but after several iterations and adjustments it now looks clean and much more polished.

I decided to go with a dark design direction, using purple and dark green tones as the main accent colors. The goal was to create a modern and slightly moody visual style that fits the overall vibe of the product.

Below is the current look of the Hero section in the beta web version.

In the next devlogs, I’ll continue building out the remaining parts of the landing page.

ps - tell me what should i change here ;))