Performance Tips

Code Canvas uses the DOM to render all nodes, which means there are some limitations when opening many files.

Dependency Edges

Edges are drawn by creating handles for imports and exports on each file, then connecting those handles when they match. Import and export detection happens only when you open a file on the canvas—there's no pre-built dependency map for all files in your workspace.

When many files are open, this means there are not just many nodes, but also many handles and edges, which can impact performance.

When zooming, certain elements need to update their size to match the zoom level—file and folder names, edge thicknesses, border thicknesses, and more. With many files open (500+), updating these on every frame can cause lag.

Access these settings in the Details section of the toolbar.

Live Zoom Toggles

When a toggle is on, that element updates live as you zoom (based on the throttle setting). When off, it only updates at the end of the zoom.

For best performance with many files, turn all toggles off.

Throttle

The throttle slider controls how often live updates happen during zoom. Higher values (more milliseconds) mean fewer updates and better performance, but less smooth visual feedback.

These settings affect canvas performance at all times, not just during zoom.

Bezier Edges

The curved S-curve edges (Bezier) can cause performance issues, especially when many edges overlap near a node. Switching to straight edges significantly improves performance.

Change edge style with B or in the Edge Settings toolbar section.

Handle Display

Dependency handles—the small circles on the sides of files—appear on every import and export line. For languages like Python without explicit exports, anything at the root level gets an export handle, which can mean many handles per file.

Two options can improve performance:

Hide unconnected handles Only show handles that have a connection. Handles without edges are hidden. This can significantly reduce the number of rendered elements.

Show handles in header Instead of showing handles on each individual line, display them stacked in the file header. This means you won't see exactly which line an import/export is on, but it drastically reduces the number of edges and handles—especially when multiple exports from one file connect to multiple imports in another.

Both options are in the Edge Settings toolbar section (2).

Edge Arrows

Edge arrows have a significant performance cost. If you have arrows enabled and notice lag, toggle them off for an immediate performance improvement.