diff --git a/playwright/app.spec.ts b/playwright/app.spec.ts
index 6684213..700dc3d 100644
--- a/playwright/app.spec.ts
+++ b/playwright/app.spec.ts
@@ -344,9 +344,10 @@ test('clearing component source reports clear action without error status', asyn
   await expect(dialog).toHaveAttribute('open', '')
   await dialog.getByRole('button', { name: 'Clear' }).click()
 
+  await expect(page.locator('#preview-host button')).toHaveCount(0)
+  await expect(page.locator('#preview-host pre')).toHaveCount(0)
   await expect(page.locator('#status')).toHaveText('Component cleared')
   await expect(page.locator('#status')).toHaveClass(/status--neutral/)
-  await expect(page.locator('#preview-host pre')).toHaveCount(0)
 })
 
 test('jsx syntax errors affect status but not diagnostics toggle severity', async ({
diff --git a/src/app.js b/src/app.js
index 41317c4..181713c 100644
--- a/src/app.js
+++ b/src/app.js
@@ -472,19 +472,14 @@ const clearComponentSource = () => {
   clearDiagnosticsScope('component')
   typeDiagnostics.clearTypeDiagnosticsState()
   setStatus('Component cleared', 'neutral')
-
-  if (!jsxCodeEditor) {
-    maybeRender()
-  }
+  renderRuntime.clearPreview()
 }
 
 const clearStylesSource = () => {
   setCssSource('')
   clearDiagnosticsScope('styles')
   setStatus('Styles cleared', 'neutral')
-  if (!cssCodeEditor) {
-    maybeRender()
-  }
+  maybeRender()
 }
 
 const confirmClearSource = ({ label, onConfirm }) => {
diff --git a/src/modules/render-runtime.js b/src/modules/render-runtime.js
index 6bb30a5..a234d41 100644
--- a/src/modules/render-runtime.js
+++ b/src/modules/render-runtime.js
@@ -548,6 +548,13 @@ export const createRenderRuntimeController = ({
     }
   }
 
+  const hasComponentSource = () => getJsxSource().trim().length > 0
+
+  const clearPreview = () => {
+    const target = getRenderTarget()
+    clearTarget(target)
+  }
+
   const renderDom = async () => {
     const { jsx } = await ensureCoreRuntime()
     const target = getRenderTarget()
@@ -555,6 +562,10 @@ export const createRenderRuntimeController = ({
     const compiledStyles = await compileStyles()
     applyStyles(target, compiledStyles.css)
 
+    if (!hasComponentSource()) {
+      return
+    }
+
     const renderFn = await evaluateUserModule()
     const output = renderFn ? renderFn(jsx) : null
     if (isDomNode(output)) {
@@ -577,6 +588,10 @@ export const createRenderRuntimeController = ({
     const compiledStyles = await compileStyles()
     applyStyles(target, compiledStyles.css)
 
+    if (!hasComponentSource()) {
+      return
+    }
+
     const { reactJsx, createRoot, React } = await ensureReactRuntime()
     const renderFn = await evaluateUserModule({ jsx: reactJsx, reactJsx, React })
     if (!renderFn) {
@@ -635,6 +650,7 @@ export const createRenderRuntimeController = ({
   }
 
   return {
+    clearPreview,
     renderPreview,
     scheduleRender,
     setStyleCompiling,