diff --git a/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts b/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts
index 2b2c6cb3..d8964a38 100644
--- a/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts
+++ b/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts
@@ -1,9 +1,10 @@
-import { CopyButton, DownloadButton, PreviewCodeToggle } from "@mariozechner/mini-lit";
+import { Button, CopyButton, DownloadButton, icon, PreviewCodeToggle } from "@mariozechner/mini-lit";
import hljs from "highlight.js";
import { html } from "lit";
import { customElement, property, state } from "lit/decorators.js";
import { createRef, type Ref, ref } from "lit/directives/ref.js";
import { unsafeHTML } from "lit/directives/unsafe-html.js";
+import { RefreshCw } from "lucide";
import type { SandboxIframe } from "../../components/SandboxedIframe.js";
import { type MessageConsumer, RUNTIME_MESSAGE_ROUTER } from "../../components/sandbox/RuntimeMessageRouter.js";
import type { SandboxRuntimeProvider } from "../../components/sandbox/SandboxRuntimeProvider.js";
@@ -56,6 +57,16 @@ export class HtmlArtifact extends ArtifactElement {
return html`
${toggle}
+ ${Button({
+ variant: "ghost",
+ size: "sm",
+ onClick: () => {
+ this.logs = [];
+ this.executeContent(this._content);
+ },
+ title: i18n("Reload HTML"),
+ children: icon(RefreshCw, "sm"),
+ })}
${copyButton}
${DownloadButton({ content: downloadContent, filename: this.filename, mimeType: "text/html", title: i18n("Download HTML") })}
diff --git a/packages/web-ui/src/utils/i18n.ts b/packages/web-ui/src/utils/i18n.ts
index 206fde82..44293346 100644
--- a/packages/web-ui/src/utils/i18n.ts
+++ b/packages/web-ui/src/utils/i18n.ts
@@ -122,6 +122,7 @@ declare module "@mariozechner/mini-lit" {
Artifacts: string;
"Copy HTML": string;
"Download HTML": string;
+ "Reload HTML": string;
"Copy SVG": string;
"Download SVG": string;
"Copy Markdown": string;
@@ -294,6 +295,7 @@ export const translations = {
Artifacts: "Artifacts",
"Copy HTML": "Copy HTML",
"Download HTML": "Download HTML",
+ "Reload HTML": "Reload HTML",
"Copy SVG": "Copy SVG",
"Download SVG": "Download SVG",
"Copy Markdown": "Copy Markdown",
@@ -470,6 +472,7 @@ export const translations = {
Artifacts: "Artefakte",
"Copy HTML": "HTML kopieren",
"Download HTML": "HTML herunterladen",
+ "Reload HTML": "HTML neu laden",
"Copy SVG": "SVG kopieren",
"Download SVG": "SVG herunterladen",
"Copy Markdown": "Markdown kopieren",