Skip to main content
Wiring Studio Docs

Design View

The Design View is the primary canvas where you build the physical layout of your wire harness. It functions as a formboard-style schematic editor — you place components, route cables between them, and define lengths and properties. All changes in the Design View feed into the BOM and Cut List automatically.

The Design View canvas showing multiple connectors connected by cables on a grid background

Canvas Navigation

The canvas is built on HTML5 Canvas (React Konva) and supports standard pan/zoom navigation.

  • Pan — Click and drag on an empty area of the canvas to move the viewport
  • Zoom — Scroll the mouse wheel to zoom in and out. The scale range is 0.1x to 10x with a factor of 1.05 per scroll increment.
  • Inverted zoom — Hold Ctrl while scrolling to invert the zoom direction
  • Grid — A 40px reference grid helps you align components visually
  • Deselect — Click on an empty canvas area to deselect all elements
The canvas with the grid visible and zoom level indicator

Adding Components

Right-click on an empty area of the canvas to open the context menu. The menu lists all available component types.

The right-click context menu showing Add Connector, Add Ring Terminal and Add Branch Point

Component Types

  • Connector — Main electrical connectors with configurable cavity count. The most common component in a wire harness design.
  • Ring Terminal — Ring-style crimp terminal connections for bolt-on wiring points.
  • Branch Point — Cable routing branch or split points (also called transitions). Use these where cables diverge in your harness.

Info

Splices, diodes, and resistors require a parent component. In the Component Dialog, you select which connector or other component they attach to. This establishes a hierarchical relationship in your design.

The Component Dialog

When you add a component, the Component Dialog appears with the following fields:

  1. 1

    Name — A user-defined identifier for the component (e.g., "J1", "ECU Connector", "TPS Sensor", "COIL_1")

  2. 2

    Main Part — Select a part from your Parts Library. The part determines cavity count, labels, and other properties.

  3. 3

    Parent Component — Required for splice, diode, and resistor types. Select the component this part attaches to.

  4. 4

    Accessories / Extra Parts — Add supplementary items like boots, ferrules, backshells, or locks. Each extra part comes from the library and appears in the BOM.

The Component Dialog showing Name, Main Part selection, and Accessories fields

Working with Components

Once placed on the canvas, components support several actions via the right-click context menu.

Move

Click and drag a component to reposition it on the canvas. Components move freely — the grid provides visual alignment but does not enforce snapping.

Rotate

Right-click a component and select Rotate. Set the rotation angle in degrees. Rotation affects how connection points are positioned relative to the component.

Flip

  • Flip Horizontal — Mirrors the component left-to-right
  • Flip Vertical — Mirrors the component top-to-bottom

Both options are available in the right-click context menu.

Duplicate

Right-click and select Duplicate to create an identical copy of the component. The copy appears at a slight offset from the original. Duplication copies the component name, part, and accessories — you will want to rename the duplicate.

Delete

Right-click and select Delete, or select the component and press Delete / Backspace. Deleting a component also removes all cables and wiring connections associated with it.

Warning

Deleting a component removes all associated cables and wiring data. This is tracked in the undo history, so you can reverse it with Cmd/Ctrl + Z.

Scale

Adjust the scale factor to resize a component on the canvas. This is a visual adjustment that does not affect electrical properties.

Cable Routing

Cables connect components on the design canvas. They represent the physical wire runs in your harness.

Drawing a Cable

  1. 1

    Click a connection point on the source component (a small circle on the component boundary)

  2. 2

    A dashed blue line follows your cursor as you move

  3. 3

    Hover near a connection point on the target component — a blue highlight circle appears when you are in snap range

  4. 4

    Click the target connection point to complete the connection

A cable being drawn from one connector to another, showing the dashed blue line and snap highlight

The cable snaps into place and connects the two components. Connection points are stored as relative coordinates from each component's origin, so they stay correct when you move or rotate components.

Snap-to-Connection

When you hover near a component's connection point while drawing a cable, snap-to-connection activates. A blue highlight circle appears on the nearest valid connection point. This visual feedback helps you connect to the correct point.

The snap system searches all connection handlers on all visible nodes and calculates the nearest valid target based on your cursor position.

Tip

If snap-to-connection does not activate, zoom in closer to the target component. Snap range is based on screen distance, so zooming in increases precision.

Cable Properties

Right-click a cable to access its properties.

The cable properties panel showing length, covering, and label fields

Length

Set the cable length in the current project units (metric or imperial). Lengths are stored internally as both centimeters and inches, so switching units in Project Settings does not lose precision.

  • Metric display — Millimeters or centimeters
  • Imperial display — Fractional inches (e.g., "3 1/4", "7/8")

Cable length feeds directly into the Cut List for wire length calculations.

Covering

Optionally assign a cable covering or sleeve from the Parts Library. The covering part appears in the BOM with its length matching the cable length. Use coverings for convoluted tubing, braided sleeving, or heat shrink over cable bundles.

Labels

Attach one or more label parts to a cable. Labels are selected from the Parts Library and support background and foreground color properties. Label parts appear in the BOM with their lengths.

Length Label

A Length Label displays the cable length directly on the canvas. You can adjust its position along the cable (0 to 1 ratio from source to target) and its offset from the cable line. This is useful for creating readable design drawings.

Undo and Redo

The Design View maintains a history stack for all operations.

  • Undo — Press Cmd/Ctrl + Z to reverse the last action
  • Redo — Press Cmd/Ctrl + Shift + Z to reapply a reversed action

The history tracks node creation, node deletion, edge creation, edge deletion, and property changes. Each operation stores both undo and redo functions, so you can step forward and backward through your design history.

Info

Undo/redo is only available in the Design View. Changes in the Wiring View and Pin Configuration are applied immediately. See Keyboard Shortcuts for all hotkeys.

Design View Keyboard Shortcuts

Shortcut Action
Delete / Backspace Delete selected cable
Cmd/Ctrl + Z Undo
Cmd/Ctrl + Shift + Z Redo
Right-click Open context menu
Scroll wheel Zoom in/out
Scroll wheel + Ctrl Inverted zoom
Click + drag (empty area) Pan canvas
Click + drag (component) Move component

See the full Keyboard Shortcuts reference for all views.