Building Inkline: A Local-First Drawing App with a Smart Pen & Layers

y.v.v. satyanarayana — Fri, 05 Jun 2026 11:54:02 +0000

Hey fellow builders! 👋

I wanted to share a desktop drawing/whiteboard application I've been building called Inkline.

It’s built with Electron, Vanilla JavaScript, and the HTML5 Canvas API, designed to be a local-first, lightweight desktop tool for sketching notes, diagramming, and exporting visuals.

Why I Built Inkline

There are many great whiteboard tools out there (like Excalidraw or Figma), but I wanted a local-first desktop app that focuses on simplicity, speed, and clean exports without heavy web interfaces or account requirements.

I decided to build it from scratch using plain JavaScript and Electron to keep it fast, native, and customizable.

Key Features
• Smart Pen (Shape Recognition): Automatically detects and snaps freehand drawings into clean shapes (circles, rectangles, diamonds, arrows, and lines).
• Figma-style Layers: A custom layers panel to organize, rename, and arrange elements.
• Sketchy Chart Generator: Insert custom bar, line, and pie charts with a hand-drawn look.
• Templates: Built-in canvas templates for Kanban boards, SWOT analysis, mindmaps, and flowcharts.
• Local-First & Export: Fast pan/zoom, custom rules, grid snapping, save/load to JSON, and high-quality PNG export.

Behind the Scenes: How the Smart Pen Works

One of the most fun features to build was the Smart Pen shape recognizer. Instead of using heavy machine learning models, it uses lightweight geometry and coordinate math:

Straight Lines: It compares the start and end points of a stroke. If the average deviation of all drawn points from the straight line chord is very small, it snaps it into a perfect line.

Arrows: It analyzes the last 25% of the stroke points. If they backtrack at an angle relative to the first 75% of the stroke, it detects it as an arrowhead and draws a snapping arrow.

Closed Loops (Circles, Rectangles, Diamonds): If the start and end points of the stroke are close, it calculates the bounding box. It then computes the average error of the points against an ideal ellipse equation, a diamond equation, and a rectangle. The shape with the lowest error is selected and snapped!

The Tech Stack
• Frontend: HTML5 Canvas API, CSS Variables, and Vanilla JavaScript (No framework!).
• Desktop Shell: Electron (with preload scripts and custom borderless window frame controls).
• Release Packaging: Electron Builder.

Try it Out
• GitHub Repository: https://github.com/yvvsatyanarayana-dev/Inkline
• Downloads: Installers for Windows, Linux (AppImage) are available in the Releases section.

If you like the project, please consider giving it a Star on GitHub! It helps a lot.
Let me know what you think or what features you would like to see next in the comments!

DEV Community: y.v.v. satyanarayana

Building Inkline: A Local-First Drawing App with a Smart Pen & Layers