diff --git a/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts b/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts
index 81f5370f..2b2c6cb3 100644
--- a/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts
+++ b/packages/web-ui/src/tools/artifacts/HtmlArtifact.ts
@@ -23,7 +23,7 @@ export class HtmlArtifact extends ArtifactElement {
 	private logs: Array<{ type: "log" | "error"; text: string }> = [];
 
 	// Refs for DOM elements
-	private sandboxIframeRef: Ref<SandboxIframe> = createRef();
+	public sandboxIframeRef: Ref<SandboxIframe> = createRef();
 	private consoleRef: Ref<Console> = createRef();
 
 	@state() private viewMode: "preview" | "code" = "preview";
@@ -76,7 +76,7 @@ export class HtmlArtifact extends ArtifactElement {
 		}
 	}
 
-	private executeContent(html: string) {
+	public executeContent(html: string) {
 		const sandbox = this.sandboxIframeRef.value;
 		if (!sandbox) return;
 
diff --git a/packages/web-ui/src/tools/artifacts/artifacts.ts b/packages/web-ui/src/tools/artifacts/artifacts.ts
index b8d1713f..17b86e29 100644
--- a/packages/web-ui/src/tools/artifacts/artifacts.ts
+++ b/packages/web-ui/src/tools/artifacts/artifacts.ts
@@ -451,6 +451,18 @@ export class ArtifactsPanel extends LitElement {
 		});
 	}
 
+	// Reload all HTML artifacts (called when any artifact changes)
+	private reloadAllHtmlArtifacts() {
+		this.artifactElements.forEach((element) => {
+			if (element instanceof HtmlArtifact && element.sandboxIframeRef.value) {
+				// Update runtime providers with latest artifact state
+				element.runtimeProviders = this.getHtmlArtifactRuntimeProviders();
+				// Re-execute the HTML content
+				element.executeContent(element.content);
+			}
+		});
+	}
+
 	private async createArtifact(
 		params: ArtifactsParams,
 		options: { skipWait?: boolean; silent?: boolean } = {},
@@ -479,6 +491,9 @@ export class ArtifactsPanel extends LitElement {
 			this.requestUpdate();
 		}
 
+		// Reload all HTML artifacts since they might depend on this new artifact
+		this.reloadAllHtmlArtifacts();
+
 		// For HTML files, wait for execution
 		let result = `Created file ${params.filename}`;
 		if (this.getFileType(params.filename) === "html" && !options.skipWait) {
@@ -520,6 +535,9 @@ export class ArtifactsPanel extends LitElement {
 		// Show the artifact
 		this.showArtifact(params.filename);
 
+		// Reload all HTML artifacts since they might depend on this updated artifact
+		this.reloadAllHtmlArtifacts();
+
 		// For HTML files, wait for execution
 		let result = `Updated file ${params.filename}`;
 		if (this.getFileType(params.filename) === "html" && !options.skipWait) {
@@ -557,6 +575,9 @@ export class ArtifactsPanel extends LitElement {
 		// Show the artifact
 		this.showArtifact(params.filename);
 
+		// Reload all HTML artifacts since they might depend on this rewritten artifact
+		this.reloadAllHtmlArtifacts();
+
 		// For HTML files, wait for execution
 		let result = "";
 		if (this.getFileType(params.filename) === "html" && !options.skipWait) {
@@ -608,6 +629,9 @@ export class ArtifactsPanel extends LitElement {
 		this.onArtifactsChange?.();
 		this.requestUpdate();
 
+		// Reload all HTML artifacts since they might have depended on this deleted artifact
+		this.reloadAllHtmlArtifacts();
+
 		return `Deleted file ${params.filename}`;
 	}