The Magic Editor lets you make changes to website or web app content inline, on the page that the content appears.
Make sure the magic editor is enabled on the page you're visiting (This happens by default if you've installed one of our plugins. See also: Enabling The Magic Editor
Hit the keyboard shortcut to activate. On mac that's:
E, on windows its
Alternatively you can just add "?editmode=1" to the url of the page you're visiting
Find the content you want to change, and modify it as you please.
When you're finished, find the Editmode Bar and hit "Save Changes"
The Magic Editor currently supports updating Plain Text, Rich Text, and Images stored on Editmode. It also supports working with collections, allowing users to add additional items to a collection, delete items and drag to reorder items.
<!–– Tell Editmode where content is stored by specifying a project id ––><script>window.chunksProjectIdentifier = 'prj_lAue7jUkFm2n'</script><!–– Activate the magic editor by loading it from the CDN ––><script src="https://static.editmode.com/[email protected]/dist/editmode.js" async ></script>
edit.yoursite.com) which proxies your main site and injects the script (so requires no code changes to your codebase). This takes a small amount of manual set up so needs to be performed by someone from our internal team. Please reach out to us if this is something you need.
The Magic Editor works by simply scanning the page for any element of type
<em-span /> and applying the editable behaviour to it, so to make a piece of content on your page editable, all you have to do is make sure it's wrapped in markup that looks like this:
<em-span data-chunk="cnk_5227179fcc3f521b9c95"data-chunk-editable="true"data-chunk-type="single_line_text"data-chunk-cache-id="home_heroprj_Y5HfCBS4rqZgHeadline">Supercharge your workflow Simplify your life.</em-span>
We'll be writing a separate guide to elaborate on the logic behind how to construct and use each of these attributes.