# Editing HTML Screens

* [Edit HTML Elements + AI Editing](#edit-html-elements--ai-editing)
* [Anonymize Elements](#anonymize-elements)
* [Embed Content](#embed-content)
* [Global Search & Replace](#global-search-and-replace)
* [Typewriter Effect](#typewriter-effect)
* [Text Triggers](#text-triggers)
* [Copy/Paste Elements](#copy-paste-elements)
* [Screen interaction hints](#screen-interactions)

***

### 👉 **Edit HTML elements + AI editing**

HTML demos provide great control over demo environments, here's what you can edit:

* **Edit text** - Select any text element and make inline edits
* **Replace Images** - Select logos/images and update media straight from your library
* **Graphs / Charts** - Edit graphs and charts when they are captured in SVG format.
* **AI editing** - Need help editing your HTML demo? Just prompt our AI editor to make it happen — no developer dependency needed.

<figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FQytj4AoQ9mDZmodETOKb%2FScreenshot%202025-07-31%20at%207.25.14%E2%80%AFPM.png?alt=media&#x26;token=1713178a-411d-43af-b75d-5a6cd7f2c72d" alt=""><figcaption></figcaption></figure>

***

### 👉 **Anonymize Elements**

Need to anonymize certain aspects of your product screens? Here are a few ways to go about it:&#x20;

* **Blur elements** - Click on any element and blur the content — useful to protect sensitive data/PII
* **Hide elements** - Useful if you want to remove an element but don't want the screen to auto-align. This also gives you the option to "un-hide" the element at a later point.
* **Delete elements** - Remove elements from your screen and auto-adjust screen alignment.&#x20;

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FWWk7yZhDHFEKhthxVxUR%2FScreenshot%202025-07-31%20at%207.36.22%E2%80%AFPM.png?alt=media&#x26;token=2cdd0b25-2dc8-4da5-a321-c1e49e665761" alt="" width="375"><figcaption></figcaption></figure></div>

***

### 👉 **Embed Content**

Customize your demos by embedding external content&#x20;

* Click on the element you would like to embed with new content
* Select "Embed content" in the menu and pick your content. We support:
  * Videos / GIFs / Audio / PDFs
  * Media players (Youtube/Vimeo/Loom, etc), maps, charts, etc.

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2F7LMH7MBnajus5D6iImGF%2FScreenshot%202025-07-31%20at%207.48.08%E2%80%AFPM.png?alt=media&#x26;token=ab53fd18-1ef5-43ae-a3df-f5ac35cb8208" alt="" width="375"><figcaption></figcaption></figure></div>

***

### 👉 **Global Search & Replace**

Search and replace will list the total matches found on each screen allowing you to verify and replace them.&#x20;

* Select the "Search Content" 🔍 icon in the tool bar
* Enter *search* and *replace with* strings
* Review and confirm the replacement

![](https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FDT7xMRTFWTisZCMKWBrH%2FScreenshot%202025-07-31%20at%207.50.55%E2%80%AFPM.png?alt=media\&token=876a69f6-6b1c-46df-8888-4f77998129d6)&#x20;

***

### 👉 Typewriter Effect

The typewriter effect in the HTML demo enhances the viewing experience by mimicking real-time writing, creating more interactive and engaging demos for users.

* Select the text element you'd like to add the effect to
* Click on the 3-dots menu
* Select **Typewriter Effect**
* Confirm your typing speed
* Hit save and you're set

***

### 👉 Text Triggers

Adding a text trigger to an HTML demo is a great way to engage your user and demonstrate your product. There are two ways to add them based on your use case - in the guided experience, or the clickable experience.

<figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FRChtoKEQvxdxpGBdq9tS%2FArea.gif?alt=media&#x26;token=f1e41ab2-4aa1-4f20-8e51-de48811d8072" alt=""><figcaption></figcaption></figure>

Try Interactive Demo Yourself 👇&#x20;

{% @storylane/embed subdomain="app" linkValue="akebmutohi9i" url="<https://app.storylane.io/share/akebmutohi9i>" %}

***

### 👉 **Copy / Paste Elements**

A handy feature to quickly clone or replace your HTML elements

* Select on the desired element and click on the three dots
* Select "Copy Element"&#x20;
* Select the element you would like to update&#x20;
* &#x20;And select "Paste Element".

<div align="left"><figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FFnxZVGljYy8kC9d02of9%2FScreenshot%202025-07-31%20at%207.55.59%E2%80%AFPM.png?alt=media&#x26;token=b0f9732a-e597-4296-8388-0df5be487a10" alt="" width="375"><figcaption></figcaption></figure></div>

{% hint style="info" %}
If you made any mistake during the editing of your screen, you can click on the **undo** icon to revert changes.
{% endhint %}

### 👉 Screen interactions

HTML Editor Glow-Up! Now you can jazz up clickable areas with custom colors to make them pop against your product's interface. Give your UI a fresh, eye-catching look with just a few tweaks!

<figure><img src="https://2431356420-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FN8hWd9k2Pbb6YSWO4pUQ%2Fuploads%2FHZHnsyyTEk3ZCNBXQmD8%2FScreenshot%202025-08-07%20at%2010.58.11%E2%80%AFAM.png?alt=media&#x26;token=98025fed-22cd-4322-be9d-9a07c8908bd1" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If you need help or have any questions, feel free to contact us at <support@storylane.io>.
{% endhint %}


---

# 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://docs.storylane.io/editing-demos/editing-html-screens.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.
