> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.clonable.net/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# How does the Clone Editor work?

## Summary
The Clone Editor lets you safely customize your cloned website directly on the page itself. Using an overlay editor, you can adjust text, images, SEO metadata, and even dynamic (JavaScript-loaded) content — without touching your original website. Changes are instant, traceable, and easy to revert.

---

## FAQ

**Can I have multiple edit sessions active at the same time?**  
No, only one active edit session per clone is allowed.

**Are changes applied immediately?**  
Yes. All changes are visible instantly and can be reverted via edit history.

**Can I damage my original website?**  
No. All edits apply only to the clone.

---

**⏱️ Reading time:** 6–8 minutes
---

## Clone Editor
The Clone Editor adds an editing layer directly on top of your cloned website. You can quickly adjust text, images, SEO settings, and dynamic content — safely and without affecting the original site.


![Clonable editor](https://storage.crisp.chat/users/helpdesk/website/-/4/1/5/7/415740f4b2c87400/toolbar-en-c2d8b0dab4306b23cca_113f5e6.png)


---

## Using the Clone Editor
The Clone Editor opens in a separate browser tab and shows a fixed toolbar on top of your website.

Start it via **Clone Editor** in the control panel. This opens a secure editing session.
---

### Editing text (Text Mode)

Enable **Text Mode** via the pencil icon.

When enabled:
* Editable text shows a pencil icon on hover
* Click any text to edit it inline
||| When changing texts that are also links, using the Text mode will only change the text, not the link. To change a link use a Substitution rule. 

||| Don't add any custom HTML to a text block, this will break the block.

||| When deleting all text the block will not be editable anymore.
---

#### Highlight overlay (text)
Use highlights to see all editable text at once.

How to enable:
* Open the three-dot menu
* Click **Turn on highlights**

Editable text is shown with a light orange overlay.

---

### Editing images (Image Mode)
Enable **Image Mode** via the image icon.

How to edit:
* Editable images show an icon on hover
* To replace an image upload the new image to the original website. Copy and paste the direct link to the image in `New media path` in the Clone Editor. 
![Edit images](https://storage.crisp.chat/users/helpdesk/website/-/4/1/5/7/415740f4b2c87400/startseite-clonable-woocommerc_180sm5i.png =381xauto)
---

#### Highlight overlay (images)
You can also highlight editable images:
* Open the three-dot menu
* Click **Turn on highlights**

---

#### Alt-tag translations
Alt text is translated automatically, but you can edit it manually:
* Click an image with existing alt text
* Update the **Alt text** field

||| If the original image has no alt text, it can’t be added via the editor.

---

### Editing SEO attributes
Click **SEO** in the toolbar to edit:
* Meta title
* Meta description

Fields are editable only if they’re translatable. Non-editable fields are disabled automatically.

![Edit SEO attributes](https://storage.crisp.chat/users/helpdesk/website/-/4/1/5/7/415740f4b2c87400/seo-description-disabled-c50dc_157s8zn.png =457xauto)


---

### JavaScript mode

||| Technical knowledge required

JavaScript Mode is for dynamic content loaded via scripts. Familiarity with HTML and selectors is strongly recommended.

---

#### Enabling JavaScript Mode
Click the **JS** icon in the toolbar.

When enabled:
* Selector elements appear on dynamic content
* Only untranslated, JavaScript-loaded text is selectable

---

#### Creating a JavaScript translation
For dynamic text:
* Click the element
* Define where and how the translation applies

You can set:
* Page scope
* CSS selectors

| Tip: Use very specific selectors to avoid unintended changes.

![Edit dynamic content](https://storage.crisp.chat/users/helpdesk/website/-/4/1/5/7/415740f4b2c87400/javascript-dialog-25cb84550831_ky2l6j.png)


---

## Edit history & reverting changes
All edits are logged automatically. You can review what changed, where, and when — and revert anytime.

---

### Where can you view edit history?
It depends what type of history you want to view.

**Global history**  
All translations across the site.

**SEO history**  
Available in the SEO window via the clock icon.

**Text history (per translation)**  
Accessible when editing a text fragment.

---

### Reverting a translation
In any history view, click **Revert** to restore a previous version.

---

## Useful shortcuts
To work faster, the Clone Editor includes several keyboard shortcuts:

| Button | What it does |
| ---- |
| 1 | Enable text replacement mode |
| 2 | Enable image replacement mode |
| 3 | Open SEO attribute dialog |
| 4 | Enable JavaScript selection mode |
| 5 | Open edit history dialog |
| Shift + 1 | Move editor to the top-left of the screen |
| @ | Toggle highlight overlay |
| Esc | Return to default mode |

---

## Tags
inline editor, visual editing, localization tools, website translation, content control