Grapesjs SVG Editor

Vector artwork usually arrives as a finished file and stays that way — change the colour of one path and you are back in a design tool. This plugin embeds Method Draw, an open-source SVG editor, directly into GrapesJS so SVGs can be imported, edited and exported in place.

What it adds

An SVG block, and a command — mdraw-svg-editor by default — that opens the editor for the selected component.

Required setup

Method Draw is not bundled. You must include method-draw.compiled.css, jquery.js and method-draw.compiled.js in your page head, and copy Method Draw's own markup into your HTML. The plugin's repository ships an index.html to use as a reference, together with the minimum directory structure required: css, extensions, images and lib.

Options

svgBlock configures the block, constructor points at the Method Draw instance (window.methodDraw by default), extensions and config pass through to SvgEdit and Method Draw, and onApply replaces the save behaviour. labelApply, labelClose and toolbarIcon cover the interface text.

Known issue

The author notes conflicting key bindings between GrapesJS and Method Draw. The plugin is marked work-in-progress.