DEV Community: kulman Lab

Building a CAD app in the browser

kulman Lab — Mon, 19 Oct 2026 08:00:38 +0000

Kulman is a 2D CAD editor that runs entirely in the browser. It's an Angular app drawing onto a single <canvas>, with no backend at all: drawings live in IndexedDB, and files come in and go out as DXF, the format most CAD tools can exchange.

Over the last two months it got about 490 commits. This is a tour of what changed and what I learned. Some of it is new features, but a good part is the unglamorous work of making a canvas app survive real drawings and real browsers.

Splines you can actually edit

Splines used to be something you could draw and look at. Now you can trim them, trim other things against them, extend lines to them, and hatch inside them, even when a spline crosses itself.

The interesting decision was how to cut one. The obvious approach is to sample the curve and fit a new spline to each remaining piece, but then the trimmed piece is only close to where the original was. Instead, a cut is knot insertion: the piece is the same B-spline restated over less of its parameter range, exact to floating-point rounding, and it only costs a few array splices however long the spline is.

Finding where things meet works the way it does elsewhere in the app: intersections are found on the curve's chords, then pulled onto the true curve with Newton's method. Chords alone miss one case: a curve that dips through a shape and comes back out between two chord ends. Those get followed on the true curve too.

Performance was the other half. One spline with 5,000 control points used to cost about 150 ms per mouse move to pick and 180 ms per frame to draw, partly because evaluation scanned for the knot span instead of bisecting. The chords now sit in a tree of boxes in the order they run, so a pick or an intersection costs what's near it rather than the whole curve.

Hatching that finds its own boundary

Hatch asks for a point and fills whatever region encloses it. Four separate lines that meet at their ends enclose a region just as a closed polyline does, and anything closed inside becomes an island.

Instead of computing every face of the drawing, the tracer shoots a ray to the first wall and then hugs it, always taking the first turn clockwise, until it's back where it started. Only geometry the walk actually touches is looked at, so a simple region traces in under a millisecond whether the drawing has 1,000 entities or 100,000. This round it learned to find the wall past whatever stands in the way, to get past fillets that touch a line without ending on it, and to work inside self-crossing splines. Hatches now also export to DXF.

Drawing 125,000 entities without melting

Zoomed all the way out on a large drawing, almost every entity is a few pixels across, yet each one was still drawn in full: text laid out letter by letter, dimensions given arrowheads and labels, splines traced point by point.

Three changes fixed most of it:

Sketches. Every renderer gained a renderSketch: what an entity looks like from afar, without the detail that costs. Text becomes a bar over each row of lettering, a dimension its extension lines and a block where the label goes, a hatch its area filled flat, a whole ellipse an octagon. Lines, arcs, circles, polylines and splines are already about as cheap as any sketch of them would be, so they're drawn as they are.
Rectangles below 5 px. Anything whose bounds are under 5 px on screen is drawn with a single fillRect in its colour. On a 125,000-entity drawing seen whole, the full path took about 670 ms a frame. On their own, 125,000 tiny fillRects take about 37 ms.
Cached bounds. The render loop computed every entity's bounds every frame just to cull what's off screen, and text had to be measured on a canvas to do it. Bounds are now cached per entity and dropped whenever the drawing changes. On 100,000 entities that took bounds from about 70 ms a frame to 2–4 ms, and a medium-zoom frame from 84 ms to 20 ms.

Selecting everything also stopped being expensive: past 100 selected entities, grips aren't drawn or hit-tested at all, just the selection colour.

More to draw and annotate with

Arcs can be drawn the usual ways: start/centre/end, by angle, by chord length, by radius, by tangent direction, or centre first. When the numbers can't make an arc, the terminal says why.
Regular polygons, from the centre or from an edge, inscribed or circumscribed.
Polar arrays with a fill angle, next to the grid array.
Dimension styles, alongside text styles and leader styles, each with a live preview and per-dimension unit formats. They read from and write back to DXF.
A Measure tool that reads what surrounds the cursor as you move: the distance to the nearest geometry in each direction, the length or radius of what it hits, and the angle where two lines meet. Click inside a closed area to get its area and perimeter.
Points. DXF POINT entities used to be dropped on import. They're now a real entity you can place, move, snap to and export, with a Divide command on the way that drops points at equal distances along a line, arc, circle, ellipse or polyline.
Copy and paste between tabs, and the app is now installable as a PWA.

33 languages, and prompts as data

The whole UI is now translated into 33 languages with Transloco, including the command line, which turned out to be the hard part.

Commands used to return their prompts as English strings with markers spliced in for the terminal to regex back out. Now a prompt is data: a translation key plus named values.

// before: the terminal had to parse this back apart
getPrompt(): string {
  return `Pick center or enter X,Y: {cursor}`;
}

// after: a key and the values the terminal needs to show what's being typed
getPrompt(): PromptMessage {
  return { key: 'command.circle.pickCenter.orXY', values: { inputPhase: 'x', inputX: '12' } };
}

Command names are translated too, so you can type Kreis in German or Коло in Ukrainian. Matching ignores diacritics. For scripts that need an IME (Hindi, Bengali, Punjabi, Thai, Chinese, Japanese, Korean), typing straight into a raw keydown command line isn't reliable, so those languages show "Circle 円" and accept the English word as input.

Every command also now writes what it did to an expandable terminal history, with coordinates highlighted.

What error reporting dug up

I added Sentry with tight defaults: errors only, no session replay, no user info, cookies, headers or console output, each distinct error at most once per session, and source maps uploaded from the production build. Within days it found bugs I would never have hit myself.

A blank page for people who block site data. When a browser is set to block storage for a site, indexedDB.open fails with "The user denied permission to access the database." Two APP_INITIALIZERs loaded stored fonts and hatch patterns from IndexedDB, and a rejected initializer aborts Angular's bootstrap. Those users got nothing at all. Now they get the app, working in memory, with every storage failure caught and reported instead of fatal.

A RangeError with no recursion in sight. "Maximum call stack size exceeded" came from this line in the snap index:

if (pts) result.push(...pts);

Spreading an array into a call passes every element as a separate argument, and arguments live on the call stack. In Node, the largest array I could spread into one push() was 110,153 elements; doubling the stack size raised the limit to 255,561. A drawing where hundreds of lines cross at one point puts that many intersections under a single coordinate, and moving the mouse near it crashed. A plain loop fixes it, and it turned out to be faster anyway.

What people actually open. The DXF parser now reports which entity types it couldn't read. By far the most common is block references (INSERT), followed by 3DFACE, SOLID and POINT. That last one is why points exist now, and it set the order of what's next.

What's next

Block references are first: every block exploded into its entities on import, with its own move, scale, rotation and mirror applied. Then SOLID and 3DFACE, which map neatly onto hatches and lines.

If you want to see where it's at, try it at kulmanlab.com. There's no account to create, since there's no server to keep one on; it works best with a mouse and keyboard. If you open a DXF that doesn't come through right, I'd love to hear about it.

From 0 to 500 DAU with Zero Marketing Budget: 4 Months Building a Web-Based 2D CAD

kulman Lab — Mon, 31 Aug 2026 15:26:33 +0000

Hey dev.to community! 👋

I'm Volodymyr, a Java Engineer with over 12 years of experience in coding and building distributed backend systems.

For the past 3+ years, alongside my full-time job, I've been building a side project called KulmanLab. It is a completely free, browser-based, offline-first 2D CAD editor for technical drawings built with Angular, TypeScript, and HTML5 Canvas.

A few months ago, I rolled out the core foundation. Today, I want to share an honest, transparent breakdown of what happened next: the architectural decisions, performance challenges, AI workflows, failed marketing experiments, and real user metrics.

If you are a developer looking to push a complex side project into production, building a micro-SaaS, or working with heavy client-side Canvas rendering, this is for you.

🏗 The Architecture: Why a Backend Developer Built a Serverless Web App

Here is the irony: Despite 12+ years specializing in Java, Spring, microservices, and databases, I deliberately chose a 100% Client-Side Only / Serverless architecture for KulmanLab.

I know firsthand how much maintenance, infrastructure, and operational effort backend services require. For a side project, I wanted zero server overhead.

Core Architecture Principles:

No Server Calculations: All geometry calculations, 2D vector pathing, state management, and rendering happen strictly in the browser.
Offline-First Storage: User project files and drawing history persist locally via IndexedDB.
Zero Onboarding Friction: No registration, no email verification, no trial paywalls. Users open the app and instantly start drawing.
Interoperability: Native import/export for CAD standards, including .dxf format support.

🛠 Features & Engineering Milestones

In the last four months alone, the project evolved from a basic line renderer to a capable technical drawing tool:

Rich Text Engine (MTEXT / TEXT): Handled parsing and rendering formatted CAD typography natively onto the HTML5 Canvas.
Vector Hatching Patterns (HATCH): Generates and fills complex closed boundaries with repeating vector patterns.
Dynamic Dimension Lines: Auto-calculates linear, angular, and radial dimensions with real-time vector alignment.
Layouts & Paper Space: Printing setup, view scaling, and readying blueprints for export.
AI-Assisted Iteration: Using tools like Claude Code accelerated feature shipping by up to 10x, though much of the day-to-day still comes down to deep code inspection, edge-case fixes, and Canvas performance optimization.

📊 Real Growth Metrics (No Fluff)

Initial user traction started in early May, but organic growth accelerated significantly through the summer:

Monthly Active Users (MAU): ~7,000 unique users / 30 days
Peak Daily Active Users (DAU): 520 DAU
Average Session Duration: 13–15 minutes (A critical engagement metric showing users actually complete technical drawings rather than bouncing).
Traffic Quality: 100% organic without paid ads.

Key Traffic Insights:

Organic Search (SEO): Moving the web application from the main domain root to app.kulmanlab.com and building a dedicated static landing page on kulmanlab.com provided the single biggest SEO boost.
Global Distribution: Broad global usage with steady engagement across Europe, North America, and Asia.
OS & Browsers: Heavily dominated by desktop Chrome and Edge users, fitting the B2B/engineering user persona.

📣 Marketing Experiments: What Worked vs. What Failed

As a solo engineer without a marketing budget, getting the word out was pure experimentation.

❌ What Didn't Work

Engineering & CNC Forums: Low reach, high risk of instant bans for self-promotion.
Cold Pitching Reviewers/Bloggers: Near 0% response rate.
Product Hunt: "Unfeatured" launch yielded virtually zero traffic or SEO indexation benefit.
Student Discord Servers & Social Media (X/Facebook): High time investment with minimal conversion for a specialized B2B tool.

✅ What Actually Worked

SEO Optimization & Landing Page Separation: Separating the landing marketing site from the functional app (app.kulmanlab.com) drastically improved Google indexing for CAD queries.
Building in Public & Developer Communities: Sharing genuine technical challenges, changelogs, and honest post-mortems on developer platforms created authentic organic word-of-mouth.

💡 Key Takeaways for Developers

Embrace Constraints: Eliminating the backend forced me to solve complex state and rendering logic on the client side, keeping infrastructure costs at $0 while delivering instant speed to users.
Focus on Time-to-Value: Removing logins, sign-ups, and paywalls created frictionless trial loops.
Listen to Local Storage: Using IndexedDB enabled an offline-first experience that users in low-connectivity environments deeply appreciate.

Try it out & feedback welcome!

You can test the app directly in your browser without creating an account:
🌐 Web App: kulmanlab.com

I'd love to hear your thoughts on building complex Canvas-based applications in Angular! How do you handle heavy client-side state and rendering performance in your own projects? Let's discuss in the comments below! 👇

Product Update: Vector Pins, Measurement Overhauls, and ALIGN Polish

kulman Lab — Sat, 11 Jul 2026 05:41:48 +0000

Hey everyone! We’ve been heads-down refining our canvas experience following the ALIGN milestone (July 8–10, 2026). This update brings highly requested

drafting precision, UX quality-of-life improvements, and a handful of crucial bug fixes.

Let’s dive into what’s new! 👇

✨ New Feature: Vector Pins (Object Snap Tracking)

We are incredibly excited to introduce Vector Pins, bringing powerful tracking points to your drafting workflow. Refined across 10 precise commits, this feature dramatically improves alignment accuracy without needing extra construction lines.

How it works: Hover over any grip point for 500ms to "pin" it. Each active pin projects dynamic horizontal and vertical reference lines that your cursor automatically snaps onto, complete with dashed guides and accent markers.
Angle-Locked Rays: Ortho and polar inputs now intelligently snap to intersections with pin reference lines. This is fully supported across line drawing, circle radii, arc picks, and polylines (which we ported onto DirectionalInputCommand to make this possible!).
Persistent Lifecycle: Pins survive across sequential actions so you can use them seamlessly with MOVE or COPY. However, to keep your canvas clean, they are automatically cleared when a brand-new command fires or when the active command finishes.
Under the Hood 🛠️: To keep our codebase maintainable, we decoupled the pin logic from CanvasComponent into a dedicated VectorPinsService. We also centralized the angle-lock anchor capture inside updateAngleLock, eliminating redundant per-command overrides.

📏 Revamped Measurement Tools

We’ve overhauled the DISTANCE and ANGLE tools to make taking quick canvas metrics much less frustrating.

Sticky Results: Measurement overlays now stay on your screen until you explicitly hit Escape, rather than vanishing the moment you move your mouse.
Endpoint Grips: The DISTANCE tool now displays interactive grips at both endpoints for better visual context.
Improved UI States: Both tools now leverage your system's accent color—rendering as dashed lines while actively picking, and turning solid once the measurement is locked.
Control Bar: Polished the ANGL display component in the control bar for better readability.

🧭 ALIGN Polish & UI Refinements

Following the initial rollout of the ALIGN command, we spent time ironing out the UX kinks:

Copy Consistency: Updated all prompt text to match our standard command vocabulary (e.g., using "pick" uniformly).
Icon Redesign: The Align toolbar icon underwent a beautiful 7-commit redesign. It now features clean grip-to-grip dashed connections, a perfectly vertical solid right boundary line, and a flipped layout to maximize visual clarity. Its dashed-line width now perfectly matches the Offset icon.
Layout Organization: Swapped the positions of Align and Fillet in the edit panel for a more intuitive tool grouping.

🐛 Fixes & Visual Tweaks

Viewport Isolation: Fixed a frustrating bug where model-space entities could accidentally be selected through layout viewports.
Color Standardization: Intersection X markers are now drawn in the system accent color instead of green, keeping our UI palette unified.

What do you think of the new Vector Pins? Let us know in the comments below or drop your feature requests! 🚀
https://kulmanlab.com

Overhauling a CAD Engine: Rebuilding Multileader Text Layout & Editor Mechanics

kulman Lab — Thu, 18 Jun 2026 07:15:50 +0000

Hey everyone! 👋

I just shipped a massive architectural overhaul to our Multileader (MLEADER) graphics engine alongside some long-overdue quality-of-life updates to our canvas Text Editor[cite: 1]. Here is a quick look at what changed, why I changed it, and how I solved it[cite: 1].

🛠 1. Moving to Structured Rich Text Data (`TextSegment[]`)

The Problem

Previously, multileaders treated text as a single string block[cite: 1]. This made formatting highly rigid and prone to failure when dealing with native DXF inline codes (\H, \f, \L, etc.)[cite: 1]. Worse yet, a legacy layout constraint meant that only the first line of text would actually render[cite: 1].

The Solution

I completely decoupled text storage from raw string fields[cite: 1]. Multileader content is now processed into an array of typed segments (TextSegment[]), bringing true multi-line and per-character rich text formatting support[cite: 1]. I also isolated the recursive parsing logic into a unified utility: text-parser-utils.ts[cite: 1].

🎨 2. Solving Variable Row Heights & Text Overlaps

The Problem

When text strings contain varying font sizes or special character drops (like g, j, p, y), standard static height offsets cause lines to overlap, clip, or look completely crushed[cite: 1].

The Solution

I migrated from a static "entity-wide" height constant to a dynamic per-row ribbon architecture[cite: 1]:

First-Row Scaling: The attachment offset is now dynamically scaled using the maximum character height of the first row only, preventing inconsistent alignment[cite: 1].
Per-Row Ribbon Bounds: Each row computes its own bounding box on layout passes[cite: 1]. Mixed font sizes on a single line will never bleed into adjacent rows[cite: 1].
Coordinate Tree Alignment: I aligned the rendering coordinate space to mirror our primary canvas Text entity[cite: 1]. This explicitly resolves selection box overflows for unusually tall or accented characters[cite: 1].
Line-Weight Inheritance: Underline thickness now dynamically inherits its thickness from the adjacent leader line weight[cite: 1].

🖱 3. Inline Canvas Text Editor Integration

Building a modern CAD experience means getting rid of modal popups or manual text prompt windows[cite: 1].

Double-Click-To-Edit: Users can now double-click a multileader to activate an in-place text editor directly on the canvas with real-time cursor tracking, character selection, and accurate hit-testing[cite: 1].
Creation Flow Hooks: The moment a user places the final point of a new leader, the application automatically kicks into the inline text editor state right at the text-placement position[cite: 1].
Layout Anchoring: The editor popup accurately anchors to the stub side of the leader[cite: 1]. Frame-resize handles (grips) allow word-wrap behaviors to scale exactly like standard canvas text bodies[cite: 1].

⚡ 4. General UX & Framework Refinements

I polished out some of the most annoying workflow friction points inside the core workspace:

Command Optimization: Commands like Leader+ or Leader- now check your active canvas selection first[cite: 1]. If a valid multileader is highlighted, it bypasses the manual item selection step[cite: 1].
Canvas Focus Locks: Pressing Enter while adjusting the text height input box immediately returns viewport focus back to the canvas context[cite: 1].
The Ghost Height Bug: Fixed a silent bug where modifying the font size on specific multileader elements would run fine but result in a no-op due to a missing internal text height setter[cite: 1].
Clean Closures: Clicking outside the boundaries of an active text editor gracefully closes out and saves the current state without accidentally registering a brand new selection window on your canvas[cite: 1].

Text Editor is live!

kulman Lab — Wed, 10 Jun 2026 13:40:28 +0000

Building a DXF-Compatible Rich Text Editor for a Web-Based CAD Tool

Last week I spent most of my time working on the text editor for my web-based CAD application, https://kulmanlab.com/.

This update was focused on improving DXF compatibility and making text editing more flexible, predictable, and closer to how modern design tools behave.

📌 DXF MText Support

First of all, MText from DXF is now fully supported.

This means you can:

Create your blueprint in any CAD tool of your choice
Export it as DXF
Import it into KulmanLab
And keep text styling preserved

This was an important milestone because DXF text handling is often inconsistent between tools. Preserving formatting improves interoperability and reduces manual rework.

🔄 Unifying Text: One Object Instead of Two

Previously, the system had two separate concepts:

Text
MText

I decided to simplify this.

Now everything is unified into a single Text object.

Why?

A "simple" text entity is essentially just a multiline text object with one line. Maintaining two separate implementations added complexity without much real benefit.

Unifying them makes the system:

Easier to maintain
More predictable
More extensible for future formatting features

✍️ Rich Text Editing Experience

The Text command now supports a more modern editing experience.

When placing text, you can:

Choose font family
Set font size
Apply styles:
- Bold
- Italic
- Strikethrough (more coming soon)

After placement, the text is rendered inside a blue bounding frame, which defines the wrapping area.

Interactive layout control

A live resize handle allows you to adjust wrapping width dynamically
Text reflows instantly as you resize the frame

This makes layout control much closer to what you'd expect from modern design tools rather than traditional CAD text input.

🧠 Smart Cursor & Formatting Behavior

One of the trickier parts was making the cursor behave correctly in a mixed-format text environment.

Now:

Cursor height adapts to the active character style
Cursor position reflects font size changes in real time
Mixed formatting doesn’t break alignment or insertion behavior

This ensures consistent editing even when different styles are applied within the same text block.

📍 Multiple Attachment Points

Text objects now support multiple attachment anchors:

Top-left
Top-right
Bottom-left
Bottom-right
Center (and others)

This makes positioning more flexible, especially in technical drawings where alignment matters.

🎨 Character-Level Styling

One of the more powerful features is fine-grained text styling.

You can now:

Bold individual words
Change font size per character
Mix fonts within a single text object
Combine multiple styles in one sentence

This moves the editor closer to a true rich-text system rather than a simple label tool.

📦 Frame Visibility & Layout Control

A frame toggle allows you to show or hide the bounding box around text.

This is useful for:

Layout debugging
Precise alignment
Clean final rendering

🚀 What’s Next

I believe the application is now usable enough for most basic workflows.

Next step is shifting focus toward:

SEO optimization
Landing page improvements
Product promotion and visibility

The core editing engine is becoming stable enough to support this transition.

💭 Closing Thoughts

Building a text system that behaves consistently across CAD + web constraints turned out to be more complex than expected.

But the result is a much more flexible foundation that should support future features without major rewrites.

If you're interested in web-based CAD or DXF tooling, feel free to check out:

👉 https://kulmanlab.com/

Building an Adaptive Grid & Smart Snapping System for Web CAD

kulman Lab — Tue, 02 Jun 2026 07:04:21 +0000

Hey dev community! 👋

I just rolled out a major feature update to our canvas-based editor: Grid & Snap.

Implementing a basic grid is easy, but making it feel intuitive, performant, and "smart" at any zoom scale requires a bit of math and careful UX prioritization. Here is a breakdown of how I tackled it.

📐 The Adaptive Grid

A major pain point with standard canvas grids is clutter. If you zoom out, the grid lines choke the screen; if you zoom in, they disappear.

To solve this, our new Grid toggle overlays dots or lines that adapt automatically as you zoom.

The Math: It dynamically scales to land on clean, round values (such as $1, 2, 5, 10$… at any power of ten).
The Result: The grid stays perfectly readable and uncluttered whether a user is looking at a macro layout or zooming into micro-details.

🧲 Smart Snapping (With a Hierarchy)

The Snap toggle locks the cursor to the nearest grid point during drawing or editing. However, blindly snapping to a grid can ruin precision when working near existing lines.

To fix this, I implemented a priority hierarchy:

Geometry always wins. Grid snapping only kicks in when the cursor is not already near an endpoint or intersection.

Additionally, I decoupled the features: the two toggles work independently (you can snap to an invisible grid if you prefer a clean UI), and user settings persist across sessions.

📄 Context-Aware Scaling

A grid shouldn't behave the same way in a design workspace as it does on a printable sheet. The system intelligently detects the active workspace mode:

Workspace Mode	Grid Behavior
Layout Mode	Clipped cleanly to the designated paper boundary area.
Inside Viewports	Dynamics shift to seamlessly follow the model's coordinate scale.

How would you approach this?

If you’ve built something similar, how did you handle performance when rendering thousands of grid points on a high-DPI canvas?

I'd love to hear your thoughts or answer any questions about the math behind the adaptive scaling! 👇

Building a Web CAD: How We Implemented Precise X,Y Coordinate Input

kulman Lab — Mon, 01 Jun 2026 08:26:22 +0000

Hey dev community! 👋

We’ve been working hard on kulmanlab.com, a browser-based CAD and drafting tool. One of the biggest challenges in building web-based design tools is matching the precision and keyboard-driven UX that engineers and designers expect from desktop software.

Today, we rolled out a major feature that addresses exactly that: Precise X,Y Coordinate Input.

Here is a look at how we designed the user experience, the logic behind the terminal inputs, and what commands now support it.

🧠 The UX Design: Fast, Keyboard-First Input
When you are deep in a drafting workflow, taking your hands off the keyboard to aim with a mouse ruins your momentum. We wanted a seamless transition between mouse-clicking and typing.

Now, whenever a command asks the user to "pick a point," the terminal prompt dynamically updates to display or enter X,Y.

Here is the exact state machine we implemented for the input flow:

X-Value Entry: The user types digits, decimals (.), or a leading negative sign (-).

The Switch: Pressing , (comma) or Space locks the X value and shifts focus to Y. The terminal UI updates to show [X], [cursor].

Commit: The user types the Y value and hits Enter or Space to instantly plot the point.

Smart Backspacing: Pressing backspace deletes the last digit. If the Y field is completely empty, hitting backspace automatically jumps the user back to editing the X value.

Graceful Cancellation: Pressing Escape clears the coordinate input buffer without breaking or canceling the active tool/command.

🛠️ Scaling It Across the Architecture
Instead of hardcoding this input logic into every single tool, we hooked it directly into our global point-snapping and input-resolution engine. Because of this architectural choice, we were able to instantly scale coordinate entry across almost every tool in the app:

Creation Tools: Line, Polyline, Arc, Circle, Ellipse, Rectangle, Spline (fit & CV), Text

Transformations: Move, Copy, Rotate, Scale, Mirror

Dimensions & Math: Leader, Dimension (linear, aligned, continue), Distance, Angle

Viewports: Rectangle & Copy viewports

Changelog: Streamlined Annotations, Sticky Commands, and UI Polish

kulman Lab — Sun, 31 May 2026 14:26:25 +0000

Hey everyone! We've been hard at work refining the workspace, fixing nagging bugs, and smoothing out user workflows. Here is a comprehensive breakdown of everything that went into the latest release. Check it out https://kulmanlab.com/

🎨 Annotation & Dimensions

Consistent Defaults

To keep your drawings looking uniform without manual tweaking, all dimensions and leaders now use standardized defaults out of the box:

Text height / Arrow size: 12
Text/landing gap: 1
Extension line offset/extension: 5

Fixes & Behavior

Toolbar Property Inheritance: Dimensions (linear, aligned, angular, radius, diameter) and leaders now correctly inherit color, linetype, and lineweight directly from the toolbar.
Under-the-Hood Cleanup: Leaders now extend LinearEntity instead of duplicating fields, keeping our codebase leaner.
Match Properties: This will no longer overwrite your text content (labels/custom text)—only style properties are transferred now.
Arc Command: Now correctly picks up lineweight from the toolbar.

↩️ Leader Editing Improvements

Working with leaders just got a lot more intuitive:

Text Input Navigation: Supports full cursor navigation using ← and → to move through text, and Delete to remove characters at the cursor.
Terminal Prompts: The locked length input is now clearly highlighted in the terminal prompt.
Leader+ (Chain Mode): Add multiple arms sequentially without having to restart the command every single time.
Leader− (Chain Mode): Remove multiple arms sequentially; simply hit Enter or Space to finish.

📋 Productivity & Copy Commands

What is "Sticky Mode"?
Instead of dropping a single object and ending the command, sticky mode keeps the tool active so you can stamp down multiple copies seamlessly.

ViewportCopy

Sticky Mode: Stays active after each copy so you can place multiple viewports consecutively.
Precise Placement: While angle-locked, you can now type a specific distance for exact placement.

Copy Command

Sticky Mode: Stays active after each copy until you manually exit by pressing Enter or Escape.

📐 Fillet & Chamfer

Fillet Persistence: The fillet radius now persists between uses and comes pre-selected so typing immediately replaces it.
Chamfer Persistence: Chamfer distances persist, and typing instantly replaces the pre-selected value.
Polyline Support: Chamfer now works perfectly on polyline corners, and the broken undo functionality has been fully resolved.

🖥️ UI Polish & Enhancements

Model Space & Navigation

Origin Marker: Added at (0,0) in model space, featuring a vibrant accent color and $2\times$ size for better visibility.
Dynamic Feedback: A dynamic angle readout is now shown in the terminal while you are picking your second point.
Layout Tabs: The active tab is now taller for better visual hierarchy, right-clicking opens a context menu, and navigation arrows move your selection.

Terminal & Typography

Terminal UI: Refined with a lighter history border, a full-white placeholder, and a panel-matched border.
Typography: Replaced the old monospace fonts with a clean Arial sans-serif across the entire application for improved readability.

Dialogs & Widgets

Page & Print Managers: Improved label sizes, border radiuses, and overall layout optimization.
Layer & Style Widgets: Updated with refined border radiuses and full-width fill to match modern UI standards.

What do you think of these workflow changes? Are there any specific commands you'd like to see get the "sticky" treatment next? Let us know in the comments below!

Building a Browser-Based 2d AutoCAD web app with Angular (And the Nightmare of DXF)

kulman Lab — Fri, 29 May 2026 13:21:47 +0000

Hey everyone!

My name is Volodymyr, and I’m one of those developers who didn’t just switch careers—I converted my entire past experience into code. Today, I work as a Java Backend Developer. But my degree says "Civil Engineer," and the years I spent hunching over drawings on traditional drafting tables (kulmans) and in AutoCAD eventually sparked my own passion project: Kulman.

From Civil Engineering to a DIY CNC Machine

My journey into IT started when I realized that civil engineering was becoming an endless routine of repetitive tasks that carried a massive amount of liability. And the financial compensation? Well, that's a whole different story. During my final year of university, I started learning Java, and about a year later, I landed my first job as a backend developer.

But that engineering itch never really went away. I fell down the rabbit hole of CNC machines and even ended up building my own custom laser cutter from scratch based on a Ruida controller. I went all-in with a bit of maximalism: I chose a high-power CO₂ laser tube, which meant the entire machine turned out to be quite massive.

Anyone who has ever dealt with laser cutting or CNC milling knows the struggle: the path from an idea to a finished product often forces you through "monstrous" software. You either have to shell out for an expensive AutoCAD or SolidWorks license, or suffer through free alternatives with terrible UX. My goal was to build a tool that opens in a single second, requires absolutely no registration, and lets you prepare a file for your machine directly in the browser.

Project Philosophy: The Power of Static Pages and IndexedDB

The core principle behind KulmanLab is maximum autonomy. The project is hosted on Firebase and runs purely as a static site.

Why skip the backend?

Privacy-First: Your drawings belong to you. They are never saved on a server or transmitted over the network. All processing happens locally on your machine.
Zero Maintenance Costs: Eliminating server-side logic means the project can exist entirely without annoying ad banners or paid subscriptions. My only ongoing cost is the domain name.
Offline-First: Using IndexedDB, I built a reliable autosave system. Even if you accidentally close your browser or experience a sudden power outage, your files and full edit history remain completely safe in your local browser storage. It’s essentially your own personal, local "cloud." The moment you open a new DXF file or start a project from scratch, everything loads instantly, and your previous work is always right there waiting for you.

To keep the UX familiar and efficient, I chose a classic AutoCAD-style interface: commands can be triggered directly from the keyboard, with prompts and inputs guided by a terminal at the bottom of the screen. While this command-line workflow might have a slight learning curve for total beginners, it drastically speeds up production for anyone used to drafting, as you don't have to constantly hunt for the right button on a toolbar.

Technical Challenges: Geometry and Performance

Three years ago, when I first started this journey, I became fascinated by applied geometry problems—things like finding the intersection point between two lines, or a line and an ellipse. I found myself diving deep into the mathematical functions of geometric shapes, deriving systems of equations, and translating them into code. The ability to immediately see the visual results of my math on the frontend was incredibly motivating. It was exactly the kind of instant gratification I felt was missing in backend development.

For development, I chose a combo of HTML5 Canvas + Angular. Why Angular? To be honest, I was completely disconnected from the mainstream frontend ecosystem at the time. With my backend background, TypeScript felt visually close to Java, and Angular’s structured component approach made it easy to isolate every single "button command." On top of that, two-way data binding dramatically simplified how real-time changes are mirrored on the screen while editing shapes. I know picking this specific stack might raise some eyebrows among frontend purists, but back then, I gave myself exactly 20 minutes to make a choice so I could just start building. My biggest fear was getting stuck in "paralysis by analysis" looking for the perfect tool and losing my momentum. Fortunately, it paid off—three years later, dedicating just a few hours a week, my passion for this hobby project is as strong as ever.

When I started, I expected the browser's hardware limitations to quickly become a bottleneck. When you have thousands of objects (lines, arcs, splines) rendering simultaneously, everything still needs to feel buttery smooth. However, I discovered that the ceiling for optimization is practically limitless. Today, I'm convinced that a mid-range laptop can comfortably crunch up to 1 million elements without breaking a sweat. Thanks to a series of foundational optimizations, KulmanLab can already handle upwards of 100,000 objects seamlessly.

The most exciting engineering challenges so far have been Grips (control points) and Snapping (object snaps). In CAD software, you can't just click "somewhere close"—the engine must instantly and precisely snap to the exact center of a circle, the endpoint of a spline, or the intersection of two lines. To keep this running fast on large-scale drawings, I implemented spatial indexing. Instead of looping through all 100,000 objects with every single pixel movement of the mouse, the engine queries sorted arrays across X and Y coordinates. This spatial lookup keeps the performance locked at a stable 60 FPS, even on highly complex layouts.

For insights, I rely on Google Analytics with custom events. This helps me track which tools and commands are used most frequently, completely respecting user privacy without ever touching or seeing the contents of their local files.

DXF: A File Format From Hell

A lot of developers assume that parsing a DXF file is the hardest part. In reality, reading it is the easy piece. The true nightmare begins when you have to export it—generating a perfectly valid file that won't throw errors in AutoCAD or cause a notoriously picky CNC controller to crash.

To give you an idea, here is a snippet of a valid DXF structure. The format is a legacy, strict sequence of key-value pairs where every single key and value must occupy its own separate line. For instance, you might have a key of 4 with an empty value, followed by key 1001 paired with the value AcadAnnotative.

0
STYLE
5
DC
330
3
100
AcDbSymbolTableRecord
100
AcDbTextStyleTableRecord
2
Annotative
70
0
40
0.0
41
1.0
50
0.0
71
0
42
0.2
3
arial.ttf
4
1001
AcadAnnotative
1000
AnnotativeData
1002
{
1070
1
1070
1
1002
}

As you can see, Autodesk has absolutely no problem duplicating identical keys for a single object, and empty rows acting as values are practically a "standard." The order of the entries matters—except when it doesn't. The whole format feels incredibly chaotic and unpredictable.

Why is this so difficult? The real trap of DXF lies in its group codes. The exact same code can mean an X-coordinate for a line, a radius for a circle, or a layer name, completely depending on the context and the section you are in. On top of that, AutoCAD is notoriously sensitive to the sequence of these codes. If you accidentally mix up the order of parameters in the HEADER or TABLES section, your file instantly turns into garbage that no CAD editor on earth will open.

Another massive challenge is supporting Splines. While a basic line is defined by just two points, splines require control vertices (CVs), knot vectors, and weights. Autodesk’s official documentation covers this only superficially. In practice, I’ve had to do a lot of reverse-engineering on native AutoCAD files to figure out why a spline that renders flawlessly in my browser turns into a chaotic, mangled curve after being exported.

What KulmanLab Can Do Today: From MVP to a Working Tool

Here is what is fully functional right now:

Full 2D Primitive Support: Straight lines, circles, arcs, ellipses, and polylines. Text rendering hasn't received as much attention yet, because handling fonts accurately in CAD engines is a whole separate rabbit hole. I plan to tackle that down the road.
Complex Splines: This was my own little engineering victory. I implemented two curve-building modes: Fit points (where the curve passes exactly through the specified coordinates) and Control Vertices (CV) (where you shape the curve using a control polygon). This is absolutely critical for modeling intricate paths meant for laser cutting.
Transformation Tools: The classic design toolkit you can't live without—Move, Copy, Scale, Mirror, and Rotate. Every single one of them hooks perfectly into the object snapping logic.
Project Structuring: Full support for Layers. You can manage visibility, assign distinct colors, and set line types. This makes it easy to work on complex drawings where you need to separate your laser cutting profiles from engraving lines.
Precision and Insights: The engine automatically calculates geometric intersection points and allows for precision scaling—essential baseline features for getting a drawing production-ready.

What’s Next? (The Roadmap)

The project evolves alongside my primary backend job, but the roadmap is ambitious:

Enhanced Snapping: Making object snaps even smarter and faster, including adding polar tracking.
SVG Export: While the primary focus remains DXF generation for machinery, being able to quickly save a blueprint as a SVG for printouts or documentation reports is an essential feature.
UX Refinements: I regularly analyze anonymized custom events in Google Analytics to see exactly where users stumble so I can continually streamline the workflow.

Primary Use Cases: Who is this for?

KulmanLab isn't trying to kill off AutoCAD. My goal is to provide a fast, nimble "Swiss Army knife" for people who just need to get a specific job done right here, right now, without waiting for a heavy engineering suite to load.

I see two primary user bases:

The CNC and Laser Cutting Community: Makers, hobbyists, and shop operators who just need to quickly open a DXF file, verify dimensions, tweak a boundary, or clean up stray lines before sending the file to their machine controller.
Students and Technical Education: Picture a student who needs to quickly draft an engineering schema for a lab report or term project. Instead of hunting down pirated software or jumping through hoops for a one-semester student license, they can just open their browser, sketch the diagram, and instantly export it as a high-resolution PNG or JPEG. It's incredibly fast and frictionless.

Why it fits the workflow:

Zero Latency: You open the URL and you are drafting a second later.
Versatile Exports: In addition to clean DXF output, you can generate crisp raster images to paste directly into report documents like Word or Google Docs.
Zero Barriers: No sign-ups, no email verification, and no credit cards.

AI as a Catalyst and Looking Ahead

While KulmanLab has been in development for three years, the last six months have been a massive turning point. Leveraging modern AI coding assistants has drastically accelerated my output. For a solo developer, AI acts as a true force multiplier, turning what used to be a grueling, isolated grind into a fast-paced sprint toward new releases.

Over-engineering and attempting to be everything to everyone is how good software becomes bloated and frustrating to use. Because of that, KulmanLab will stay true to its core philosophy: strictly 2D, strictly fast, and strictly in the browser. No forced registration, no ad banners—just a clean, distraction-free tool that works.

Try it out out here: kulmanlab.com

I would love to hear feedback from fellow developers and engineers in the comments! Have you ever had to wrestle with the DXF format in your own projects? What tools do you typically use when you just need to make a quick, painless edit to a drawing?

DEV Community: kulman Lab

Building a CAD app in the browser

Splines you can actually edit

Hatching that finds its own boundary

Drawing 125,000 entities without melting

More to draw and annotate with

33 languages, and prompts as data

What error reporting dug up

What's next

From 0 to 500 DAU with Zero Marketing Budget: 4 Months Building a Web-Based 2D CAD

🏗 The Architecture: Why a Backend Developer Built a Serverless Web App

Core Architecture Principles:

🛠 Features & Engineering Milestones

📊 Real Growth Metrics (No Fluff)

Key Traffic Insights:

📣 Marketing Experiments: What Worked vs. What Failed

❌ What Didn't Work

✅ What Actually Worked

💡 Key Takeaways for Developers

Try it out & feedback welcome!

Product Update: Vector Pins, Measurement Overhauls, and ALIGN Polish

✨ New Feature: Vector Pins (Object Snap Tracking)

📏 Revamped Measurement Tools

🧭 ALIGN Polish & UI Refinements

🐛 Fixes & Visual Tweaks

Overhauling a CAD Engine: Rebuilding Multileader Text Layout & Editor Mechanics

🛠 1. Moving to Structured Rich Text Data (TextSegment[])

The Problem

The Solution

🎨 2. Solving Variable Row Heights & Text Overlaps

The Problem

The Solution

🖱 3. Inline Canvas Text Editor Integration

⚡ 4. General UX & Framework Refinements

Text Editor is live!

Building a DXF-Compatible Rich Text Editor for a Web-Based CAD Tool

📌 DXF MText Support

🔄 Unifying Text: One Object Instead of Two

Why?

✍️ Rich Text Editing Experience

Interactive layout control

🧠 Smart Cursor & Formatting Behavior

📍 Multiple Attachment Points

🎨 Character-Level Styling

📦 Frame Visibility & Layout Control

🚀 What’s Next

💭 Closing Thoughts

Building an Adaptive Grid & Smart Snapping System for Web CAD

📐 The Adaptive Grid

🧲 Smart Snapping (With a Hierarchy)

📄 Context-Aware Scaling

How would you approach this?

Building a Web CAD: How We Implemented Precise X,Y Coordinate Input

Changelog: Streamlined Annotations, Sticky Commands, and UI Polish

🎨 Annotation & Dimensions

Consistent Defaults

Fixes & Behavior

↩️ Leader Editing Improvements

📋 Productivity & Copy Commands

ViewportCopy

Copy Command

📐 Fillet & Chamfer

🖥️ UI Polish & Enhancements

Model Space & Navigation

Terminal & Typography

Dialogs & Widgets

Building a Browser-Based 2d AutoCAD web app with Angular (And the Nightmare of DXF)

From Civil Engineering to a DIY CNC Machine

Project Philosophy: The Power of Static Pages and IndexedDB

Technical Challenges: Geometry and Performance

DXF: A File Format From Hell

What KulmanLab Can Do Today: From MVP to a Working Tool

What’s Next? (The Roadmap)

Primary Use Cases: Who is this for?

Why it fits the workflow:

AI as a Catalyst and Looking Ahead

🛠 1. Moving to Structured Rich Text Data (`TextSegment[]`)