DEV Community: Billy

I Built an Excalidraw Clone in Under 3 Hours — Here's How and Why

Billy — Fri, 06 Jun 2025 12:18:26 +0000

Sometimes the best projects are born from creative chaos and time limits.

I recently challenged myself to build an Excalidraw-style drawing tool — from scratch — in under 3 hours.
The result? Freehand — a fast, lightweight, and expressive tool for creating hand-drawn diagrams in the browser.

In this post, I’ll walk through how I built it, what tech powers it, and what I learned along the way.

What is Excalidraw?

Excalidraw is a popular open-source whiteboard tool that lets you draw diagrams with a hand-drawn look. It’s used by developers, designers, and educators to visualize ideas quickly, collaboratively, and with charm.

It features:

🖊️ Hand-drawn-style elements
🧠 Collaborative editing
🧰 Shapes, arrows, freehand, and text
📦 Export to PNG/SVG
⚡ Offline-first, local storage support

Excalidraw is simple, yet powerful — and the sketchy aesthetic makes it more human and fun.

What is Freehand?

Freehand is my attempt to reimagine the core ideas of Excalidraw — built in under 3 hours.

It’s not meant to replace it, but rather to explore how much you can build with the right tools, the right mindset, and a self-imposed time limit.

It lets you:

Draw freehand lines ✏️
Create shapes (rectangle, circle, etc.)
Select, move, and delete elements
Undo / Redo with keyboard shortcuts 🔄
Save/Open drawings
Export drawings as images
Library that lets you save drawn items, and add them as you need

Libraries Used

Libraries that make the magic happen:

Zustand
Handles all the app's state—elements, selections, undo/redo, and more—without breaking a sweat.
Rough.js
Draws shapes with that hand-drawn, wobbly look that makes everything feel playful and alive.
perfect-freehand
Turns your mouse or stylus scribbles into beautiful, natural-looking freehand lines.

Architecture in a Nutshell

User Action --> Zustand State Update --> Canvas Re-render --> Rough.js + Path Render

The app maintains a elements[] array representing lines, rectangles, or freehand strokes. Drawing, editing, and deleting elements trigger a redraw of the entire canvas with new strokes.

Timeline Breakdown

5 mins - Setup: Vite + Canvas + Rough.js
30 mins - Shapes drawing engine
30 mins - Freehand pen stroke logic
30 mins - Element interaction (select/move/delete)
30 mins - Zustand refactor + Undo/Redo
30 mins - Polish UI & fix edge cases

Source code: https://github.com/tomlin7/Freehand

So HOW TO... BUILD IT?

The heart of a this drawing app is the HTML canvas. We’ll use the HTML <canvas> element and handle mouse/touch events to draw.
- Supports multiple shapes: rectangles, ellipses, diamonds, arrows, lines, pencil (freehand), text, and images.
- Integrates with roughjs for hand-drawn style rendering.
- Handles zoom, pan, and multi-layer drawing.
- Implements a local "library" for saving and reusing element groups. Exposes methods for exporting the canvas as an image and saving/loading as JSON.

Here is a simple minimal example:

import React, { useRef, useEffect, useState } from "react";

const Canvas: React.FC = () => {
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [drawing, setDrawing] = useState(false);

  useEffect(() => {
    const canvas = canvasRef.current;
    if (canvas) {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    }
  }, []);

  const startDrawing = (e: React.MouseEvent) => {
    setDrawing(true);
    const ctx = canvasRef.current?.getContext("2d");
    if (ctx) {
      ctx.beginPath();
      ctx.moveTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
    }
  };

  const draw = (e: React.MouseEvent) => {
    if (!drawing) return;
    const ctx = canvasRef.current?.getContext("2d");
    if (ctx) {
      ctx.lineTo(e.nativeEvent.offsetX, e.nativeEvent.offsetY);
      ctx.stroke();
    }
  };

  const stopDrawing = () => {
    setDrawing(false);
  };

  return (
    <canvas
      ref={canvasRef}
      className="border w-full h-full"
      onMouseDown={startDrawing}
      onMouseMove={draw}
      onMouseUp={stopDrawing}
      onMouseLeave={stopDrawing}
    />
  );
};

export default Canvas;

Full version here: src/components/Canvas.tsx

All drawing state is managed with Zustand (src/store/index.ts). The store tracks:
- elements: All drawn shapes and objects
- selectedElements: Currently selected items
- mode: Current tool (e.g., selection, rectangle, pencil)
- strokeColor, fillColor, strokeWidth, fillStyle, opacity: Style settings
- canvasBg: Canvas background color
- history: Undo/redo stack

The store exposes actions for adding, updating, selecting, deleting, duplicating, and reordering elements, as well as for undo/redo and style changes.

A toolbar for tool selection + a Library src/components/Toolbar.tsx
- Tool Buttons: Switch between selection, shapes, pencil, text, and image tools.
- Tool Lock: Option to stay in the current tool after use.
- Library: Save the element to library, to reuse later.
A sidebar that contains styling and layer controls src/components/Sidebar.tsx
- Stroke and Fill Color Pickers: Choose colors for outlines and fills.
- Fill Style: Solid, hachure (sketchy), or none.
- Stroke Width: Select line thickness.
- Opacity Slider: Adjust transparency.
- Layer Controls: Move elements up/down in the stack.
Add a cool command palette for quick commands like open, save, export, reset, and theme switching. It’s accessible via keyboard shortcuts.
Add keyboard shortcuts for picking tools easily, and managing elements - src/utils/keyboard.ts
Enhance the canvas
- Undo/Redo: Managed via the store’s history stack.
- Layering: Bring-to-front/send-to-back actions.
- Export/Import: Download as PNG or JSON, load from file.

That's about it

There are still many features missing out in Freehand, and Excalidraw is still the GOAT. This challenge was only to see how hard it can be to build something like that.

There are multiple ways we can go about enhancing this tiny thing and creating something really cool though. Brainstorm and find out, and let me know!

Future Writing Challenge

Billy — Wed, 19 Mar 2025 19:09:17 +0000

This is a submission for the Future Writing Challenge: How Technology Is Changing Things.

Dear Friends,

I hope this letter finds you well! I wanted to take a moment to talk about something that's changing the world around us every day—technology. You may not notice it as much since it's sneaky, creeping into our lives bit by bit, but I thought I’d share some thoughts on how it’s reshaping everything from the way we live to the way we connect. And don’t worry—I’ll keep it simple and fun!

Remember when we had just a regular TV? Now, we’ve got “smart” TVs, “smart” fridges, and even “smart” lights! Everything’s getting smarter. Imagine your refrigerator telling you when the milk is about to expire or your TV suggesting what you might want to watch next. Technology is making everyday things better at helping us out.

But here's the cool part—things will keep getting smarter. One day, your house might adjust its temperature on its own, knowing exactly how warm or cool you like it at different times of the day. We’re already halfway there with devices like Alexa and Siri! These little changes will soon be so normal, we won’t even think about them.

You’ve probably heard of robots, right? While we might not all have robots running around like in the movies, they’re already helping in a lot of ways. There are robots in factories making cars, robots in hospitals assisting doctors, and even tiny robots cleaning up after us (looking at you, Roomba!).

Soon, we’ll see more robots doing things we don’t want to do—like cleaning windows or mowing the lawn. It might sound a bit scary, but the idea is to give us more time to do what we enjoy, whether it’s spending time with loved ones or following hobbies.

This is where things are getting really interesting. Not so long ago, if you wanted to talk to someone far away, you wrote a letter. Then came phones, and now we have video calls and social media. We can talk to anyone, anytime, anywhere. But this is just the beginning!

Technology is bringing us closer in ways we couldn’t have imagined. With virtual reality (VR), soon we’ll be able to “visit” each other without ever leaving the house. Imagine putting on special glasses and suddenly being in the same room as someone across the world! And it won’t stop there—new ways of connecting will keep popping up, blurring the lines between “real” and “virtual.”

Now, let’s think about what all this means for how we interact with each other. Remember when people would sit together and talk over dinner? Well, now we often see folks glued to their phones. That’s one way technology has changed things, for better or worse.

Technology might help us connect in new ways, but it can also make us feel a little more distant from the people right next to us. It's important to find a balance—to use tech to stay close to those far away, but also to stay present with the people who are in front of us.

For those of us still working or entering the workforce, things are changing quickly. Automation and artificial intelligence (AI) are taking over some jobs, while creating new ones we haven’t even thought of yet. Maybe one day, your job will involve working alongside an AI or using technology that doesn’t exist today. It’s like being part of a big experiment where everything is always evolving.

For kids growing up, this might seem normal. They’ll be learning how to code, how to use new gadgets, and how to navigate a world where things move faster and faster. It’s an exciting time, but it’s also one where we’ll need to stay curious and always be learning!

At the end of the day, even with all this cool technology, what matters most is us. Technology should help make our lives better—whether it’s helping us stay healthy, keeping us connected, or giving us more time for the things we love. But we need to be careful not to let it take over the things that make us human, like our relationships, our creativity, and our ability to feel empathy.

So, as technology keeps growing, let’s grow with it. Let’s use it to improve our lives, but let’s also remember to unplug once in a while, spend time with loved ones, and keep our human connections strong.

Thanks for reading, and I hope you’re as excited as I am to see where technology takes us next!

Warmly,

Billy

Additional Prize Categories

Explain Like I'm Five and Ripple Effects

KeePassDiff: A diff/merge tool for KeePassXC databases

Billy — Sun, 08 Dec 2024 10:01:40 +0000

I started using KeePass back in 2021 and I have been using it since then to store my passwords. But I didn't set up a proper way to sync the database between my devices. So I ended up with multiple databases with different passwords and entries. I wanted to sort of diff the databases and merge them into one, like git diff -- resolving conflicts, reverting, etc. Well, KeePass doesn't provide a way to diff two databases. Hence this project.

Usage

Open two KeePass databases in diff.
See the differences and conflicting entries between the two databases.
Then using merge left, merge right options decide which entries or groups to keep and which to discard.
Finally, export the merged database.

Installation

pip install keepassdiff

Run kpd or kpdiff to run the tool.

Features

Following is a tracker for all the features I'm aiming for the project.
If you are interested in giving me a hand, check the github repo

✅ Support for KeePassXC databases
✅ Uploading and unlocking two KeePass databases
✅ Supports both password and keyfile authentication
✅ Visual diff of entries and groups
✅ Support for entry groups
✅ Hierarchical view of database contents
✅ Merging individual entries and groups between databases
✅ Exporting the final merged database
⏺️ Resolving conflicting entries with preferred ones
⏺️ Command-line interface for batch processing
⏺️ Copying passwords to clipboard, clearing clipboard after timeout

Security

All database handling is done locally and no data is stored or transmitted. Temporary files are securely deleted after use, passwords are not stored.

Development

git clone https://github.com/tomlin7/KeePassDiff.git
cd KeePassDiff
pip install -e .
kpd

AI Research Assistant with Semantic Document Search System

Billy — Sat, 09 Nov 2024 10:49:42 +0000

This is a submission for the Open Source AI Challenge with pgai and Ollama

What I Built

This is an AI based research assistant with a semantic document search system for smart document storage and retrieval using natural language queries. Ollama is integrated into the assistant to summarise, and generate sentiment analysis, key points, related topics for provided content. Streamlit is used to provide a minimalistic user interface.

You can use natural language to search data stored in the PostgreSQL database. Uses pgvector for vector similarity search, pgai through TimescaleDB for search AI features. It is very helpful in cases where you have to manage and search through large collections of documents based on meaning rather than just keywords.

Key Features:

Summarize docs, and generate sentiment analysis, key points, and related topics
Semantic search & insights using document embeddings
Batch document processing (directly upload CSV files)
User-friendly interface
Rich metadata and insights for categorization
Scalable vector search using both IVFFlat and pgvectorscale

Although initially the idea was to develop a semantic document search tool, later on I decided to extend this to an AI research assistant featuring the same document search system along with Ollama integration.

Demo

Because of problems with hosting Ollama along with the assistant app, only the semantic document search tool demo is hosted. 😅

Thanks to Streamlit community cloud, visit the demo ⭐

tomlin7 / AI-research-assistant

Semantic document search system with pgvector and PGAI

AI Research Assistant with Semantic Document Search System

This is a submission for the Open Source AI Challenge with pgai and Ollama

What I Built

You can use natural language to search data stored in the PostgreSQL database. Uses pgvector for vector similarity search, pgai through TimescaleDB for search AI features. It is very helpful in cases where you have to manage and search through large collections of documents based on meaning rather than just keywords.

Key Features:

Uses Ollama to summarise docs, and generate sentiment analysis, key points, and related topics
Semantic search capability using document embeddings, powered…

View on GitHub

Tools Used

Ollama + pgvector + pgai + Streamlit

Ollama is integrated into the assistant to summarise, and generate sentiment analysis, key points, related topics for provided content.
TimescaleDB (PostgreSQL) for primary database (can be configured for self hosted psql as well)
pgvector for efficient vector similarity search
pgai through TimescaleDB for AI
Streamlit for the web interface

Key Technologies

Database Layer
- pgvector extension for vector operations
- pgai extension for AI features
- IVFFlat indexing for efficient similarity search
- JSONB data type for flexible metadata storage
Machine Learning
- Sentence-Transformers (all-MiniLM-L6-v2 model)
- 384-dimensional embeddings for semantic representation
Backend
- Python 3.12+
- psycopg2 for PostgreSQL interaction
Frontend
- Streamlit for the web interface
- Pandas for data display

Final Thoughts

This project is about integrating AI vector search features with traditional databases (which are hard to get used to). The same tool is used to create an AI research assistant with Ollama integration. This is a very helpful tool for content management systems where you need to manage and search through large collections of documents. Integration of pgvector and pgai provides a strong solution.

TODO

⏺️ Better visualization of results using charts and stuff
✅ Batch document processing (import CSV)
⏺️ Delete, update documents functionality
⏺️ Filtering based on metadata as well
⏺️ More use cases of pgai

Hello world

Billy — Wed, 17 Nov 2021 17:10:03 +0000

This is my first DEV post :)

I got to know about this community from hacktoberfest 2021.
I like talking about python, c#, cpp, unity, tkinter, machine learning, data science, etc.

That's all!

print("Hello, DEV!")