# The Magic Editor

The Magic Editor lets you make changes to website or web app content ***inline***, on the page that the content appears.

![Making changes to the Editmode home page using the Magic Editor. ](/files/-Men9xvQCS1A-9o7SWe8)

### How it works

1. 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
2. Hit the keyboard shortcut to activate. On mac that's: `CMD`, `Shift`, `E`, on windows its `CTRL`, `Shift`, `E`

   Alternatively you can just add "?editmode=1" to the url of the page you're visiting
3. Find the content you want to change, and modify it as you please.
4. When you're finished, find the Editmode Bar and hit "Save Changes"

### What you can do

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.

### Enabling the magic editor

{% hint style="info" %}
The Magic Editor is loaded by default in any app that has an Editmode sdk installed - so it works out of the box with [**editmode-rails**](https://docs.editmode.com/editmode-docs/client-libraries/editmode-for-rails) and [**editmode-react**](https://docs.editmode.com/editmode-docs/client-libraries/editmode-for-react), unless it has been explicitly disabled. The Magic Editor does not currently support sites using editmode-react-native.
{% endhint %}

The magic editor is enabled by simply loading our javascript library into your page and specifying the relevant project id.

```markup
<!–– 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/editmode@2.0.0/dist/editmode.js" async ></script>
```

### Enabling the Magic Editor without using the inline \<script /> tag

Some companies prefer not to load an additional javascript script into their page. For this we have a subdomain-based solution that is reserved for your team members (for example `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](mailto:team@editmode.com) if this is something you need.

### Behind The Scenes

{% hint style="info" %}
This section is intended for a technical audience - it may be of use if you're attempting to debug the editor or to build your own frontend.&#x20;
{% endhint %}

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:

```markup
<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.

###


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://editmode.gitbook.io/editmode-docs/the-magic-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.