TikZ Draw

A browser-based visual editor for creating TikZ diagrams. Draw geometric shapes, add LaTeX labels, and export clean TikZ code for use in LaTeX documents.

Features

• Visual Drawing Tools: Point, Line, Vector, Circle, Arc, Rectangle, Path, Bézier Curve, Label, and Grid
• Multi-Select: Select multiple objects with click-to-toggle or drag-to-select box
• Select & Move Tools: Select objects with inside-click detection, or use Move tool for independent movement
• Rotate Tool: Rotate objects interactively with visual feedback (5° snap) or input exact angles
• Multi-Object Operations: Delete, move, rotate, copy/paste, and nudge multiple objects together
• LaTeX Support: Full MathJax rendering for labels and annotations
• Pattern Support: 12 TikZ patterns (horizontal/vertical lines, grid, dots, stars, bricks, etc.) for filled objects
• Copy/Paste: Duplicate single or multiple objects with all properties and relationships preserved (Ctrl+C/Ctrl+V)
• Undo/Redo: Full undo/redo support with 50-state history (Ctrl+Z/Ctrl+Y)
• Arrow Key Nudging: Precise positioning with 0.1 unit (normal) or 0.01 unit (Shift) increments
• Clean TikZ Export: Generates well-formatted, readable TikZ code
• Project Save/Load: Save your work as JSON and continue later
• Customizable Styling: Colors, line styles, thicknesses, arrow types, patterns, and more
• Snap to Grid: Configurable grid snapping for precise positioning (0.25 units)
• Pan & Zoom: Navigate large diagrams easily

Getting Started

Simply open tikz-draw.html in a modern web browser. No installation or server required. Try the demo.

# Clone the repository
git clone https://github.com/keplerg/tikz-draw.git

# Open in browser
open tikz-draw.html
# or
xdg-open tikz-draw.html  # Linux
start tikz-draw.html      # Windows

Tools

Basic Workflow

1. Create Points: Select the Point tool § and click on the canvas to place coordinate points. Each point gets a unique name (A, B, C, etc.)

2. Draw Shapes: Use Line (L), Vector (A), Circle ©, or other tools. Most shapes reference existing points by name.

3. Add Labels: Use the Label tool (T) to add text or LaTeX math at any point. Labels support full LaTeX syntax: $\frac{a}{b}$, $\alpha + \beta$, etc.

4. Style Objects: Click inside any object to select it, then edit its properties in the right panel - colors, line styles, thickness, patterns, etc.

5. Select Multiple Objects: With Select tool (V):

   • Ctrl+click objects one-by-one to build selection (Ctrl+click again to deselect)
   • OR drag a box around objects to select all within the box
   • Click empty space to clear selection

6. Move & Adjust: Use the Move tool (M) to reposition objects, or use arrow keys to nudge selected objects for precise positioning. Works with single or multiple objects!

7. Rotate Objects: Use the Rotate tool (O) to rotate objects around their center. Click and drag in a circular motion to rotate interactively (snaps to 5°), or hold Ctrl for finer 1° snapping. Note: Rectangles cannot be rotated.

8. Copy & Duplicate: Copy objects with Ctrl+C and paste with Ctrl+V. Works with single or multiple objects - relationships are preserved!

9. Export TikZ: Click “Export TikZ” (or Ctrl+E) to generate LaTeX code you can copy into your document.

Navigation

• Pan: Click and drag on empty canvas, or use arrow keys
• Zoom: Mouse wheel, or use +/- buttons in the status bar
• Snap: Adjust grid snap size in the status bar (click the snap value)

Properties Panel

Select any object to view and edit its properties:

• Points: Position (x, y), name, visibility, color, label for export
• Lines/Vectors: Start/end points, color, thickness, line style, embedded labels
• Circles: Center, radius, stroke color, fill color, opacity, pattern
• Rectangles: Corners, stroke color, fill color, opacity, pattern
• Paths: Points, closure, stroke color, fill color, opacity, pattern, line style
• Labels: Position, text content, anchor position, color

Embedded Labels

Lines and vectors can have labels attached directly to them:

1. Select a line or vector
2. Click “+ Add Label” in the properties panel
3. Click on the label entry to edit: text, position along the line (0-1), anchor, font size, color

Line Styles

Available line styles for all stroke objects:

• solid, dashed, dotted
• dashdotted, dashdotdotted
• loosely dashed, densely dashed
• loosely dotted, densely dotted
• loosely dashdotted, densely dashdotted

Patterns

TikZ pattern library support for filled objects (Circle, Rectangle, Path):

• Solid - Standard fill (no pattern)
• Horizontal Lines - Horizontal line pattern
• Vertical Lines - Vertical line pattern
• NE Lines - Diagonal lines (northeast)
• NW Lines - Diagonal lines (northwest)
• Grid - Grid pattern
• Crosshatch - Crossed lines
• Dots - Dot pattern
• Crosshatch Dots - Dots with crosshatch
• Stars - Five-pointed stars
• 6-Point Stars - Six-pointed stars
• Bricks - Brick pattern

Patterns use the fill color for pattern color. Export automatically includes \usetikzlibrary{patterns} note.

Arrow Types (Vectors)

• Stealth, latex (arrow head styles)
• Start, end, or both ends
• Adjustable arrow size

LaTeX Labels

Labels support full LaTeX math notation via MathJax:

$\alpha$                           % Greek letters
$\frac{a}{b}$                      % Fractions
$\sqrt{x^2 + y^2}$                 % Square roots
$\int_0^\infty e^{-x} dx$          % Integrals
$\left[\frac{a}{b}\right]$         % Auto-sized brackets

Export Format

The exported TikZ code is clean and well-organized:

% Note: If using patterns, add to preamble: \usetikzlibrary{patterns}

\begin{tikzpicture}

% Coordinates
\coordinate (A) at (0, 0);
\coordinate (B) at (3, 4);
\coordinate (C) at (6, 0);
\coordinate (D) at (3, 0);

% Visible Points
\fill (A) circle (2pt);
\fill (B) circle (2pt);

% Segments
\draw (A) -- (B);
\draw[thick, dashed, red] (B) -- (C);

% Vectors
\draw[-Stealth] (A) -- (C);

% Circles
\draw[fill=blue, fill opacity=0.3, pattern=horizontal lines, pattern color=blue] (D) circle (1.5);

% Labels
\node[above] at (B) {$P$};

\end{tikzpicture}

Keyboard Shortcuts

Tools

Editing

Multi-Select (with Select tool V)

Nudging (when objects selected)

Navigation

File Operations

Note: On macOS, use Cmd instead of Ctrl for all shortcuts.

Toolbar Buttons

The toolbar at the top of the application provides quick access to common operations:

• ↶ Undo - Undo last action (disabled when nothing to undo)
• ↷ Redo - Redo last undone action (disabled when nothing to redo)
• 📋 Copy - Copy selected object (disabled when no object selected)
• 📄 Paste - Paste from clipboard (disabled when clipboard empty)
• 📂 Open - Load a saved project file
• 💾 Save - Save project as JSON file
• 📤 Export TikZ - Export as TikZ code

Button states update automatically based on current selection and clipboard status.

Project Files

Save your work as JSON files to continue editing later:

• Save: Click “Save” to download a .json file
• Open: Click “Open” to load a previously saved project

Project files preserve all objects, positions, styles, and view settings.

Tips

Selection

• Inside-Click Selection: Click anywhere inside objects (circles, rectangles, closed paths) to select them - no need to click on borders
• Multi-Select on Canvas: Hold Ctrl (or Cmd on Mac) and click objects one-by-one to build a selection, or drag a box around objects to select them all
• Toggle Selection: Ctrl+click a selected object again to deselect it while keeping other selections
• Box Select: Drag on empty canvas to select all objects within the rectangle
• Object List Multi-Select: Hold Ctrl (or Cmd on Mac) and click objects in the object list to add/remove them from selection
• Clear Selection: Click on empty space (without dragging) or press Escape

Movement & Positioning

• Move Tool: Use the Move tool (M) to move single or multiple objects. Click any selected object to drag the entire group
• Smart Coordinate Handling: When moving multiple objects, shared coordinates within the group move together. Coordinates shared outside the group are automatically cloned
• Arrow Key Nudging: Works with single or multiple selected objects - nudge all together (0.1 units normal, 0.01 units with Shift)
• Precise Positioning: Use the coordinate inputs in the properties panel for exact values

Rotation

• Interactive Rotation: Use the Rotate tool (O) to rotate objects by clicking and dragging. The center point is calculated automatically from all selected objects
• Angle Snapping: Rotations snap to 5° increments by default. Hold Ctrl (Cmd on Mac) for finer 1° snapping
• Visual Feedback: While rotating, you’ll see the center point (yellow), guide lines, rotation arc, and current angle display
• Multi-Object Rotation: Works with single or multiple selected objects - all rotate together around their collective center
• Smart Coordinate Cloning: Coordinates shared with non-selected objects are automatically cloned before rotation, so non-selected objects remain unaffected
• Coordinate Rotation: Rotations modify the actual coordinate positions (not TikZ transforms), so what you see is what you export
• Rectangle Limitation: Rectangles cannot be rotated due to TikZ limitations (rectangles are always axis-aligned). Convert to a path first if rotation is needed

Copy & Paste

• Single or Multiple: Copy/paste works with any number of selected objects - just select and press Ctrl+C, then Ctrl+V
• Relationship Preservation: When copying multiple objects, their coordinate relationships are preserved in the paste
• Quick Duplication: Select objects, press Ctrl+C to copy, then Ctrl+V multiple times to create multiple copies

Organization

• Naming Points: Points are automatically named A, B, C… You can rename them in the properties panel
• Reordering: Drag objects in the Objects list to change their draw order (z-index)
• Colors: Use the color picker or enter custom hex colors. TikZ color names (red, blue, etc.) are supported
• Patterns: Combine fill colors with patterns for visual variety. Pattern color matches the fill color
• Point Labels: Points can have both an editor name (shown in gray) and an export label (rendered in LaTeX)
• Undo/Redo: Don’t worry about mistakes - every action can be undone with Ctrl+Z

Browser Compatibility

Works in modern browsers with ES6+ support:

• Chrome/Chromium
• Firefox
• Safari
• Edge

Requires JavaScript enabled and internet connection (for MathJax CDN).

License

MIT License - feel free to use, modify, and distribute.

Contributing

Contributions welcome! Please open an issue or pull request on GitHub.