Grapesjs Rulers

Precise alignment is the one thing a canvas without rulers cannot give you. This plugin adds rulers along both edges of the GrapesJS canvas and draggable guides that components can be lined up against — the working environment of a design tool rather than a form.

Commands

• ruler-visibility and guides-visibility — toggle rulers and guides independently.
• get-guides and set-guides — read the current guides as an array and restore them later. This is what makes guides persistable: save the array with your project and set it back on load.
• clear-guides — remove every guide at once.
• set-zoom — set the canvas zoom and update the rulers to match, as in editor.runCommand('set-zoom', { zoom: 90 }).
• get-rulers and get-rulers-constructor — reach the ruler object or its constructor directly.
• destroy-ruler — tear the rulers down.

Options

rulerHeight sets ruler thickness, 15 by default. canvasZoom sets the initial zoom level to 94, leaving room for the rulers. dragMode is the drag mode applied when rulers are toggled — translate by default — and rulerOpts passes through to the ruler object.

Good to know

Install as grapesjs-rulers.