@mocanvas/editor · function

DefaultGrid

declare function DefaultGrid({ x, y, z, size }: TLGridProps): react.JSX.Element | null

The grid: one lattice of dots on the document's own grid step, drawn with an SVG pattern in page space.

**The dot scales with the world, and the lattice fades as a whole.** Those are the two rules, and each fixes a direction the old grid got backwards. A fixed 1px dot vanishes as you zoom in — the cell grows to 80 screen pixels and what is left is a speck every 80px, which reads as no grid at all — so the radius is a fraction of the cell, floored and capped so it never disappears and never becomes a blob. And a second, heavier lattice every fifth cell at a fixed opacity is exactly the dense sheen a zoomed-out canvas must not have: one lattice, one opacity, gone below GRID_GONE_PX.

**No re-levelling**, deliberately: the spacing is always the document's step rather than a power of it chosen per zoom. Dots are then magnets — a corner on a multiple of the step sits on a dot at *every* zoom — and re-levelling breaks that on the intermediate steps, which is worse than a grid that bows out when it gets too dense to mean anything.

mocanvas is built by Symbio. Free for non-commercial, non-profit and development use; commercial use needs an agreement. Not affiliated with or endorsed by tldraw.