# UXP WebView support for loading local html content

**URL:** <https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642>\
**Category:** Photoshop\
**Created:** [January 1, 2023, 12:40am UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642 "2023-01-01T00:40:01Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![PS-fxrios](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/ps-fxrios/32/2461_2.png) [@PS-fxrios](https://forums.creativeclouddeveloper.com/u/PS-fxrios)\
**Post date:** [January 1, 2023, 12:40am UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/1 "2023-01-01T00:40:01Z")

</div>

UXP WebView only supports loading from a web URL and currently does not support loading local html content.  
Is there any possibility that local html content loading will be implemented in the next UXP updates?

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [January 1, 2023, 12:49am UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/2 "2023-01-01T00:49:20Z")

</div>

This is English speaking forum 🤔

---

<div class="post-metadata">

**Author:** ![Erin\_Finnegan](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/erin_finnegan/32/100_2.png) [@Erin\_Finnegan](https://forums.creativeclouddeveloper.com/u/Erin_Finnegan)\
**Post date:** [January 2, 2023, 10:58pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/3 "2023-01-02T22:58:36Z")

</div>

Could you further describe your use case? This isn’t the first request for local content.

---

<div class="post-metadata">

**Author:** ![PS-fxrios](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/ps-fxrios/32/2461_2.png) [@PS-fxrios](https://forums.creativeclouddeveloper.com/u/PS-fxrios)\
**Post date:** [January 3, 2023, 1:43pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/4 "2023-01-03T13:43:46Z")

</div>

Hi @Erin_Finnegan, thanks for replying!  
In my use case, **webView** loading local html content would avoid overloading the **index.htm** file by having an overly large UXP Plugin with dozens of buttons, among them loading svg codes that call a dozen or more complex modal windows consuming a large amount of lines of code only in an html file and that undergoes constant changes and having to maintain it. It would be fantastic to be able to count on this functionality because I will be able to separate all the code from the index.htm file into several files.html, making it easier to edit or maintain them.  
Being able to load a modal window with the .htm file created just for its interface would be a dream.

---

<div class="post-metadata">

**Author:** ![Erin\_Finnegan](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/erin_finnegan/32/100_2.png) [@Erin\_Finnegan](https://forums.creativeclouddeveloper.com/u/Erin_Finnegan)\
**Post date:** [January 3, 2023, 3:26pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/5 "2023-01-03T15:26:44Z")

</div>

Thanks! I’ll add @pkrishna here to note this…

---

<div class="post-metadata">

**Author:** ![pkrishna](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pkrishna/32/1977_2.png) [@pkrishna](https://forums.creativeclouddeveloper.com/u/pkrishna)\
**Post date:** [January 10, 2023, 12:37am UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/6 "2023-01-10T00:37:12Z")

</div>

Am trying to understand the use case here a bit more in detail.  
I understand that maintaining a single large htm file can be cumbersome but I think it is possible to split it into multiple files even now without the support of local html. The src attribute can take any web url. If the index.htm is split into different html files, with each file having a unique url (like any other web application), you should be able to load a modal with that specific html, no?

_Apologies in advance if I have misunderstood the problem statement._

---

<div class="post-metadata">

**Author:** ![PS-fxrios](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/ps-fxrios/32/2461_2.png) [@PS-fxrios](https://forums.creativeclouddeveloper.com/u/PS-fxrios)\
**Post date:** [January 11, 2023, 4:49pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/7 "2023-01-11T16:49:09Z")

</div>

Hi @pkrishna , thank you for analyzing my case, you understood perfectly.  
I was excited to learn that maybe uploading .html file separately is possible.  
I tried to follow your suggestion with the tribute Src but I wasn’t successful.  
I saw on the internet that this src attribute refers to loading images or url inside an iframe which is not supported by uxp.  
I tried this:  
project:

 ![Captura de tela 2023-01-11 134100](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/4/421abce776ee712f50c64a0a25676f86ab1378ce.jpeg)  
index.htm

```auto
<sp-action-button class="botoes" id="btn" > <a href="'modal.html"></a> Open modal</sp-action-button>  
<dialog id="modal" src="modal.html">
//Here loaded the elements of the modal.html file
</dialog>

```

modal.html

```auto
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Modal</title>
</head>
<body>
    <h1>Hello world! Here is the modal page</h1>
</body>
</html>

```

js

```auto
document.getElementById('btn').addEventListener('click', async () => {
  await core.executeAsModal(async () => {
    document.querySelector("#modal").show({ title: "Acesso a conteúdo web!", resize: "both", size: { width: 260, height: 60 } })
  })
})

```

I tried that but I couldn’t load the modal.html page inside the modal window.  
Any help is valid. thanks

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [January 11, 2023, 5:51pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/8 "2023-01-11T17:51:31Z")

</div>

`dialog` doesn’t support `src`. I believe you would need an `iframe` in the dialog probably

---

<div class="post-metadata">

**Author:** ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)\
**Post date:** [January 11, 2023, 5:57pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/9 "2023-01-11T17:57:12Z")

</div>

I’ve done this by simply by getting my local html file content and stringifying it using `fetch(URL).text();` and then rendering it in the required html element with `.innerHTML`

That’s if I’m understanding what you want to achieve correctly - i.e. split your html into separate files. I’m not taking into account any requirement to use WebView.

---

<div class="post-metadata">

**Author:** ![PS-fxrios](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/ps-fxrios/32/2461_2.png) [@PS-fxrios](https://forums.creativeclouddeveloper.com/u/PS-fxrios)\
**Post date:** [January 11, 2023, 6:11pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/11 "2023-01-11T18:11:41Z")

</div>

@Karmalakas  
Does uxp support iframes? Have you already used it?, did it work for you?? WebView would be iframes for uxp but without access to local content, at least that’s what I understand.

---

<div class="post-metadata">

**Author:** ![PS-fxrios](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/ps-fxrios/32/2461_2.png) [@PS-fxrios](https://forums.creativeclouddeveloper.com/u/PS-fxrios)\
**Post date:** [January 11, 2023, 6:14pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/12 "2023-01-11T18:14:41Z")

</div>

Hi @Timothy_Bennett your approach seems to be quite interesting, could you show me a good example, it might be with my code above. Thanks.  
The base of my dialog windows has dozens of elements, as I show in this example below

 ![Capturar](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/3/312ca0018dc0c3d85954efab17f41fe6af0e3d5d.jpeg)

---

<div class="post-metadata">

**Author:** ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)\
**Post date:** [January 11, 2023, 8:12pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/13 "2023-01-11T20:12:38Z")

</div>

I load all my plugin HTML this way except for a basic layout that houses the loaded content.

```auto
const path = <path to an html file>;

const content = await fetch(path).text();

const container = document.querySelector("#<id of element in main html file in which to insert content>");

container.innerHTML = content;

```

---

<div class="post-metadata">

**Author:** ![PS-fxrios](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/ps-fxrios/32/2461_2.png) [@PS-fxrios](https://forums.creativeclouddeveloper.com/u/PS-fxrios)\
**Post date:** [January 11, 2023, 8:25pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/14 "2023-01-11T20:25:58Z")

</div>

Excellent! Should I save the formatting of the auxiliary .html file normally?  
type:

```auto
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>Modal</title>
</head>
<body>
    <h1>Hello world! Here is the modal page</h1>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)\
**Post date:** [January 11, 2023, 8:41pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/15 "2023-01-11T20:41:44Z")

</div>

Your main HTML file already has the `html`, `head`, and `body` tags covered, you’ll just be inserting HTML into an existing element, so your file only needs to be an HTML snippet - In your case, your modal dialog’s content.  
I hard code a basic dialog with no content into my main HTML file - here’s a very simple example of what my main HTML file might look like for a single page plugin with a modal:

```auto
<!DOCTYPE html>
<head>
    <!-- Meta stuff !-->
</head>
<body>
    <!-- Main content loaded here !-->
    <div id="main-content">
    </>

    <!-- Dialog content loaded here !-->
    <div id="dialog">
    </>
</body>
</html>

```

---

<div class="post-metadata">

**Author:** ![PS-fxrios](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/ps-fxrios/32/2461_2.png) [@PS-fxrios](https://forums.creativeclouddeveloper.com/u/PS-fxrios)\
**Post date:** [January 11, 2023, 8:58pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/16 "2023-01-11T20:58:49Z")

</div>

@Timothy_Bennett thank you for everything! I’ll try it out and come back to let you know if it worked.

---

<div class="post-metadata">

**Author:** ![PS-fxrios](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/ps-fxrios/32/2461_2.png) [@PS-fxrios](https://forums.creativeclouddeveloper.com/u/PS-fxrios)\
**Post date:** [January 12, 2023, 2:36am UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/17 "2023-01-12T02:36:11Z")

</div>

Hi @Timothy_Bennett , I followed your method, but it didn’t work for me.

```auto
const path = "modal.html";
const content = await fetch(path).text();
const dlg = document.querySelector("#dlg");
dlg.innerHTML = content;
console.log(content)

```

I found something that helped me in this video:

[![](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/b/b73ec3a66205281d69dfbb2a36ba1fe71f7be2ba.jpeg "JavaScript Course: Fetch API with local .txt file") ](https://www.youtube.com/watch?v=OWxVjS3yD1c)

The result was positive in this way

```auto
document.getElementById('btn').addEventListener('click', async () => {
  await core.executeAsModal(async () => {      
    openModal()
   })
})

function openModal() {
    const path = "modal.html";
    const dlg = document.querySelector("#dlg");
    fetch(path).then(function(respnse) {
        return respnse.text();
    }).then(function(content) {
        dlg.show({
            title: "Dialog",
            resize: "both",
            size: {
                width: 260,
                height: 100
            }
        })
        dlg.innerHTML = content;
    })
}

```

Here is the plugin working:  
[UXP-EXT-HTML\_PS.ccx](https://forums.creativeclouddeveloper.com/uploads/short-url/txytD6WmpfLcYmuBJ8NY1j2FOwW.ccx) (6.2 KB)  
You were genius, thanks for pointing me in the right direction.  
This feature is awesome and will certainly help me a lot.

---

<div class="post-metadata">

**Author:** ![Timothy\_Bennett](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/timothy_bennett/32/1251_2.png) [@Timothy\_Bennett](https://forums.creativeclouddeveloper.com/u/Timothy_Bennett)\
**Post date:** [January 12, 2023, 9:35am UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/18 "2023-01-12T09:35:21Z")

</div>

The reason it didn’t work is because `await` needs to be wrapped in an async function:

```auto
async function exampleFunc() {
    const waiting = await fetch()
}

```

That said, the way you’ve done it is perfectly valid and whether you use `aysnc/await` or `.then().catch()` is entirely personal preference. I like `async/await` as I find it more readable.

I’ll also point out that showing a Dialog doesn’t _require_ you to use `executeAsModal`, although there are valid reasons why you might want to so I’m not going to say you’re wrong!

---

<div class="post-metadata">

**Author:** ![PS-fxrios](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/ps-fxrios/32/2461_2.png) [@PS-fxrios](https://forums.creativeclouddeveloper.com/u/PS-fxrios)\
**Post date:** [January 12, 2023, 5:04pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/19 "2023-01-12T17:04:15Z")

</div>

The main objective of this topic is to find a solution to make my codes as clean and readable as possible, the alternative I found perfectly meets my needs, however your method is much cleaner and more readable, that’s what I’m looking for. The problem is that I haven’t been successful with my attempts.  
Look:

```auto
async function openModal() {
    try {
        const path = "modal.html";
        const content = await fetch(path).text();
        const dlg = document.querySelector("#dlg");
        dlg.show({ title: "Dialog", resize: "both", size: { width: 260, height: 100 } })
        dlg.innerHTML = content;
    } catch (err) {
        console.log(err)
    }
}

```

Received error:  
 ![Captura de tela 2023-01-12 140353](https://us1.discourse-cdn.com/flex015/uploads/xdplugins/original/2X/e/e9ff25f49559c8db1f1adff07951b17bef2d77c0.jpeg)

---

<div class="post-metadata">

**Author:** ![Karmalakas](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/karmalakas/32/1048_2.png) [@Karmalakas](https://forums.creativeclouddeveloper.com/u/Karmalakas)\
**Post date:** [January 12, 2023, 9:16pm UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/20 "2023-01-12T21:16:57Z")

</div>

And I just tried with `<webview>` and no matter how I try to load local HTML, it just ends in `loaderror` event with message `Operation canceled`. Apparently not supported after all ☹

---

<div class="post-metadata">

**Author:** ![pkrishna](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pkrishna/32/1977_2.png) [@pkrishna](https://forums.creativeclouddeveloper.com/u/pkrishna)\
**Post date:** [January 14, 2023, 1:05am UTC](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642/21 "2023-01-14T01:05:41Z")

</div>

Apologies @PS-fxrios, my solution of using ‘src’ was meant for webviews. I didnt understand that you were trying to load the modal content with different html.

Webview doesnt support loading local htmls as of now, unless you are loading it using localhost. We might add this support in the future though.

[Next page](https://forums.creativeclouddeveloper.com/t/uxp-webview-support-for-loading-local-html-content/5642.md?page=2)