BrowserCAD

A 2D CAD application that runs entirely in the browser — an AutoCAD LT-style drafting tool in the same spirit that Photopea is a browser-based Photoshop. Pure HTML/CSS/JavaScript with zero dependencies and no build step: everything renders on a single <canvas> and all work stays on your machine.

Run it

Serve the folder with any static file server and open index.html:

npx http-server -p 8080      # or: python3 -m http.server 8080
# then visit http://localhost:8080

No compilation, no install. (Classic <script> tags are used precisely so it works from any plain static host — GitHub Pages included.)

Features

Drafting

• Line, Polyline, Circle (center-radius / 2P / 3P), Arc (3-point / center), Rectangle, Polygon, Ellipse, Point, single-line Text, MTEXT multiline text with an in-canvas editor (double-click to edit)
• Hatching of closed boundaries (diagonal lines, crosshatch, or solid fill)
• Blocks: define a block from a selection (BLOCK/B, re-using a name redefines it everywhere), insert references with scale + rotation (INSERT/I), edit in place (BEDIT/BE or double-click an insert, BCLOSE to finish — every insert updates), explode back to geometry
• Linear (horizontal/vertical), aligned, radius, diameter, and angular dimensions with arrowheads and live measured values; Continue (DCO) and Baseline (DBA) dimension chains; Leaders with text (LE); DIST measuring tool

Editing

• Move, Copy (repeating), Rotate and Scale (incl. Reference option), Mirror, Offset (line/circle/arc/polyline), Trim (all objects act as cutting edges), Extend (to the nearest boundary), Break (incl. split-at-point), Join (lines/polylines/arcs → one object), Stretch (crossing-window vertex editing), Fillet (radius or sharp corner), Chamfer (two distances), Array (rectangular and polar), Explode, Erase
• Grip editing: drag the blue grips of any selected entity — endpoints, midpoints, centers, quadrants, vertices — with object snaps active
• Unlimited-ish undo/redo (snapshot based, Ctrl+Z / Ctrl+Y)
• Properties panel for editing geometry, layer, and color of the selection

Precision input — the AutoCAD way

• Command line with command names and classic aliases: L, PL, C, A, REC, M, CO, RO, SC, MI, O, TR, F, X, E, DLI, DAL, DI, Z …
• Coordinate entry: 10,20 absolute · @10,20 relative · @15<45 polar · bare length = direct distance toward the cursor
• Architectural lengths everywhere (1 unit = 1"): type 3'6, 3'-6 1/2", 18", 6 1/2 for any distance, radius, offset, spacing, or coordinate; dimensions and the coordinate readout display feet-inches (3'-6") by default — UNITS toggles back to decimal
• Dynamic input (F12): a live distance<angle tooltip follows the cursor for every point prompt — dimension distances appear before the second click
• Polar tracking (F10): the cursor locks onto 45° increment rays with a dashed tracking line and a live distance<angle readout — aim, type 3'6, Enter, exactly like AutoCAD direct distance entry
• Object snaps with glyph markers: endpoint □, midpoint △, center ○, quadrant ◇, intersection ✕, perpendicular ⊾, tangent ⊙, nearest ⧖ (F3)
• Object snap tracking (F11): pause on an osnap to acquire a point, then align along dotted horizontal/vertical rays — AutoCAD's OTRACK
• Angle override: type <30 to lock the next point to an exact bearing
• Command autocomplete: type and Tab/↑↓/Enter through matching commands
• Dimension style (D): text height, arrow size, extension lines, precision
• Ortho mode (F8, mutually exclusive with polar) — hold Shift while drawing to constrain a single point to ortho momentarily (flips the F8 state); grid + grid snap (F7/F9), crosshair cursor with pickbox
• Right-click = Enter; Enter on an empty command line repeats the last command
• Window (drag →, blue) vs crossing (drag ←, green) selection, Shift to deselect

Organization & files

• Layers: color, show/hide, lock, linetype (dashed/hidden/center/dot) and lineweight per layer — entity colors default to ByLayer
• Save / open native .json drawings (blocks included)
• DXF R12 export (LINE, CIRCLE, ARC, POLYLINE, POINT, TEXT, layer table; dimensions/hatches/blocks are exploded for compatibility) — opens in AutoCAD, LibreCAD, QCAD…
• DXF import (R12 + LWPOLYLINE, TEXT/MTEXT, layers)
• Plot to PDF (PLOT): true vector PDF output — extents or window area, A4/A3/Letter with auto-orientation, fixed plot scales (1:50, 1/4 for 1/4" = 1'-0"…) or fit-to-paper, layer linetypes/lineweights honored, white-paper color mapping
• Autosave to localStorage — reopen the tab and your drawing is still there

Paper space & sheets

• Layout tabs (Model / Layout1 / ＋) below the canvas; paper sizes from Letter to ARCH-D with orientation toggle
• Viewports (MV): windows into model space at standard scales (1:48, 1/4 = 1/4"=1'-0", Fit); dimensions keep their true measurements and plot at the correct paper text size
• Annotation scale (ANNOSCALE, status-bar chip): sizes dims/leaders for the target viewport scale, AutoCAD CANNOSCALE-style
• Template import (File → Import Template): export your AutoCAD .dwt once as DXF — each template layout becomes its own tab at the sheet size declared in the template (ANSI A-E, ARCH A-E, ISO A0-A4, or custom sizes), with title-block coordinates preserved, block definitions and layers included
• Layout plotting: PLOT in a layout produces a 1:1 vector PDF of the sheet with viewport contents clipped and scaled

Viewport

• Wheel zoom at cursor, middle-mouse pan, Z zoom-extents, adaptive grid, HiDPI-crisp rendering

Layout

Area	Purpose
Left toolbar	Draw / Annotate / Modify tools
Right sidebar	Layers panel + Properties panel
Bottom	Command history, command line, status toggles (GRID·SNAP·ORTHO·OSNAP)

Press F1 in the app for the full command reference.

See docs/AUTOCAD-LT-PARITY.md for the AutoCAD LT feature inventory, the parity status of every feature, and the MVP roadmap order.

Architecture

index.html          shell + script load order
css/style.css       dark workbench theme
js/geometry.js      vector math, intersections, arcs, bboxes   (headless)
js/units.js         length parsing/formatting incl. feet-inches (headless)
js/entities.js      entity model: hit-test, snap, transform,
                    dimension geometry, explode                (headless)
js/document.js      entities + layers + selection + undo/redo  (headless)
js/viewport.js      world(Y-up) <-> screen mapping, zoom/pan
js/snap.js          OSNAP / grid snap / ortho resolution
js/renderer.js      canvas drawing: grid, entities, previews, markers
js/dxf.js           DXF R12 writer + tolerant reader           (headless)
js/pdf.js           minimal vector PDF writer for plotting     (headless)
js/tools.js         tool state machines + command registry
js/ui.js            toolbar, menus, layers/properties panels, help
js/main.js          app object, input routing, command line, file I/O
tests/smoke.js      Node tests for the headless core

Entities are plain JSON-serializable objects (line, circle, arc, polyline, point, text, dim) dispatched through ENT.* functions, which keeps undo (snapshots), autosave, and file formats trivial. Tools are small state machines fed by both mouse clicks and command-line input through the same code path.

Tests

node tests/smoke.js

Covers geometry primitives, entity transforms/hit-testing, undo/redo, JSON round-trip, and a full DXF export→import round-trip.

Roadmap ideas

See docs/AUTOCAD-LT-PARITY.md — next up (P2b): polyline arc segments + PEDIT Join, hatch pattern library, DXF R2000, paper-space layout with viewports.