diff --git a/src/app/document/io/create.ts b/src/app/document/io/create.ts
index 24e79a88d..76ae51621 100644
--- a/src/app/document/io/create.ts
+++ b/src/app/document/io/create.ts
@@ -56,7 +56,7 @@ export function createDocumentIOActions(
     setDocumentSource: sourceActions.setDocumentSource,
     fitCurrentPageToViewport
   })
-  const { openDOMFile } = createDOMOpenActions({
+  const { openDOMFile, importDOMText } = createDOMOpenActions({
     editor,
     state,
     setDocumentSource: sourceActions.setDocumentSource,
@@ -73,6 +73,7 @@ export function createDocumentIOActions(
     disposeDocumentIO: sourceActions.disposeDocumentIO,
     openFigFile,
     openDOMFile,
+    importDOMText,
     saveFigFile: sourceActions.saveFigFile,
     saveFigFileAs: sourceActions.saveFigFileAs
   }
diff --git a/src/app/document/io/dom.ts b/src/app/document/io/dom.ts
index e2821a473..f8d3d9ffe 100644
--- a/src/app/document/io/dom.ts
+++ b/src/app/document/io/dom.ts
@@ -28,6 +28,11 @@ type DOMImportOptions = {
   path?: string
 }
 
+type DOMTextImportOptions = {
+  cssText?: string
+  documentName?: string
+}
+
 function documentNameFor(file: File): string {
   return file.name.replace(/\.(html?|xhtml)$/i, '')
 }
@@ -38,19 +43,41 @@ export function createDOMOpenActions({
   setDocumentSource,
   fitCurrentPageToViewport
 }: OpenDOMFileOptions) {
+  async function applyDOMText(html: string, options: DOMTextImportOptions) {
+    await yieldToUI()
+    const pageName = options.documentName ?? 'DOM Import'
+    const graph = await browserHTMLToSceneGraph(html, { cssText: options.cssText, pageName })
+    await yieldToUI()
+    await applyImportedDocument(editor, graph)
+    state.documentName = pageName
+    await fitCurrentPageToViewport()
+    editor.requestRender()
+    return pageName
+  }
+
+  async function importDOMText(html: string, options: DOMTextImportOptions = {}) {
+    try {
+      state.loading = true
+      const pageName = await applyDOMText(html, options)
+      setDocumentSource(`${pageName}.html`, 'html')
+      toast.info('Imported DOM/CSS document')
+    } catch (e) {
+      console.error('Failed to import DOM/CSS:', e)
+      toast.error(`Failed to import DOM/CSS: ${e instanceof Error ? e.message : String(e)}`)
+    } finally {
+      state.loading = false
+    }
+  }
+
   async function openDOMFile(file: File, options: DOMImportOptions = {}) {
     try {
       state.loading = true
-      await yieldToUI()
       const html = await file.text()
-      const pageName = documentNameFor(file)
-      const graph = await browserHTMLToSceneGraph(html, { cssText: options.cssText, pageName })
-      await yieldToUI()
-      await applyImportedDocument(editor, graph)
-      state.documentName = pageName
+      await applyDOMText(html, {
+        cssText: options.cssText,
+        documentName: documentNameFor(file)
+      })
       setDocumentSource(file.name, 'html', options.handle, options.path)
-      await fitCurrentPageToViewport()
-      editor.requestRender()
     } catch (e) {
       console.error('Failed to open DOM/CSS file:', e)
       toast.error(`Failed to open DOM/CSS file: ${e instanceof Error ? e.message : String(e)}`)
@@ -59,5 +86,5 @@ export function createDOMOpenActions({
     }
   }
 
-  return { openDOMFile }
+  return { openDOMFile, importDOMText }
 }
diff --git a/src/app/editor/session/modules.ts b/src/app/editor/session/modules.ts
index 8bda7db2e..634bcb2aa 100644
--- a/src/app/editor/session/modules.ts
+++ b/src/app/editor/session/modules.ts
@@ -70,6 +70,7 @@ export function createEditorStoreModules(
     ...vectorEdit,
     openFigFile: documentIO.openFigFile,
     openDOMFile: documentIO.openDOMFile,
+    importDOMText: documentIO.importDOMText,
     setViewportSize: documentIO.setViewportSize,
     fitCurrentPageToViewport: documentIO.fitCurrentPageToViewport,
     saveFigFile: documentIO.saveFigFile,
diff --git a/src/components/CodePanel.vue b/src/components/CodePanel.vue
index 88c00b6c7..eab1d5531 100644
--- a/src/components/CodePanel.vue
+++ b/src/components/CodePanel.vue
@@ -18,6 +18,10 @@ const store = useEditorStore()
 const { copy, copied } = useClipboard({ copiedDuring: 2000 })
 const { dialogs } = useI18n()
 const jsxFormat = ref<JSXFormat>('openpencil')
+const showImporter = ref(false)
+const importHTML = ref('')
+const importCSS = ref('')
+const importing = ref(false)
 
 function toggleFormat() {
   jsxFormat.value = jsxFormat.value === 'openpencil' ? 'tailwind' : 'openpencil'
@@ -38,6 +42,32 @@ const highlightedLines = computed(() => {
 
 const { copy: copyRef, copied: copiedRef } = useClipboard({ copiedDuring: 2000 })
 
+const canImport = computed(() => importHTML.value.trim().length > 0)
+
+function toggleImporter() {
+  showImporter.value = !showImporter.value
+}
+
+async function pasteImportHTML() {
+  try {
+    importHTML.value = await navigator.clipboard.readText()
+  } catch (e) {
+    console.error('Failed to read clipboard:', e)
+  }
+}
+
+async function importCode() {
+  if (!canImport.value || importing.value) return
+  try {
+    importing.value = true
+    await store.importDOMText(importHTML.value, {
+      cssText: importCSS.value.trim() || undefined
+    })
+  } finally {
+    importing.value = false
+  }
+}
+
 function copyCode() {
   copy(jsxCode.value)
 }
@@ -48,16 +78,9 @@ function copyReference() {
 </script>
 
 <template>
-  <div
-    v-if="!jsxCode"
-    data-test-id="code-panel-empty"
-    class="flex flex-1 items-center justify-center px-4 text-center"
-  >
-    <span class="text-xs text-muted">{{ dialogs.selectLayerForJSX }}</span>
-  </div>
-
-  <div v-else data-test-id="code-panel" class="flex min-h-0 flex-1 flex-col">
+  <div data-test-id="code-panel-root" class="flex min-h-0 flex-1 flex-col">
     <div
+      v-if="jsxCode"
       data-test-id="code-panel-header"
       class="flex shrink-0 items-center justify-between border-b border-border px-3 py-1.5"
     >
@@ -72,6 +95,14 @@ function copyReference() {
         </AppTextButton>
       </div>
       <div class="flex items-center gap-1">
+        <AppTextButton
+          test-id="code-panel-import-toggle"
+          :ui="{ base: 'flex items-center gap-1 rounded px-1.5 py-0.5 text-[11px] hover:bg-hover' }"
+          @click="toggleImporter"
+        >
+          <icon-lucide-file-input class="size-3" />
+          Import
+        </AppTextButton>
         <Tip :label="dialogs.copyJSXReference">
           <AppTextButton
             test-id="code-panel-copy-ref"
@@ -96,7 +127,68 @@ function copyReference() {
       </div>
     </div>
 
-    <ScrollAreaRoot class="min-h-0 flex-1">
+    <div
+      v-if="showImporter || !jsxCode"
+      data-test-id="code-panel-importer"
+      class="shrink-0 border-b border-border p-3"
+    >
+      <div class="mb-2 flex items-center justify-between gap-2">
+        <div class="min-w-0">
+          <div class="text-xs font-medium text-surface">Import HTML/CSS</div>
+          <div class="text-[11px] text-muted">
+            Paste HTML plus optional CSS or compiled Tailwind CSS.
+          </div>
+        </div>
+        <AppTextButton
+          test-id="code-panel-paste-import"
+          :ui="{ base: 'rounded px-1.5 py-0.5 text-[11px] hover:bg-hover' }"
+          @click="pasteImportHTML"
+        >
+          Paste
+        </AppTextButton>
+      </div>
+      <textarea
+        v-model="importHTML"
+        data-test-id="code-panel-import-html"
+        class="mb-2 h-28 w-full resize-none rounded border border-border bg-panel px-2 py-1.5 font-mono text-xs text-surface outline-none placeholder:text-muted/50 focus:border-accent"
+        placeholder='<div class="card">Hello</div>'
+        spellcheck="false"
+      />
+      <textarea
+        v-model="importCSS"
+        data-test-id="code-panel-import-css"
+        class="mb-2 h-20 w-full resize-none rounded border border-border bg-panel px-2 py-1.5 font-mono text-xs text-surface outline-none placeholder:text-muted/50 focus:border-accent"
+        placeholder=".card { width: 240px; padding: 16px; border-radius: 12px; background: white; }"
+        spellcheck="false"
+      />
+      <div class="flex items-center justify-between gap-2">
+        <span class="text-[11px] text-muted">Import replaces the current document.</span>
+        <AppTextButton
+          test-id="code-panel-import"
+          :ui="{
+            base: [
+              'rounded px-2 py-1 text-[11px]',
+              canImport && !importing
+                ? 'bg-accent text-black hover:bg-accent/90'
+                : 'cursor-not-allowed opacity-50'
+            ].join(' ')
+          }"
+          @click="importCode"
+        >
+          {{ importing ? 'Importing…' : 'Import to canvas' }}
+        </AppTextButton>
+      </div>
+    </div>
+
+    <div
+      v-if="!jsxCode"
+      data-test-id="code-panel-empty"
+      class="flex flex-1 items-center justify-center px-4 text-center"
+    >
+      <span class="text-xs text-muted">{{ dialogs.selectLayerForJSX }}</span>
+    </div>
+
+    <ScrollAreaRoot v-else data-test-id="code-panel" class="min-h-0 flex-1">
       <ScrollAreaViewport class="code-highlight size-full">
         <div class="p-3">
           <div v-for="(html, i) in highlightedLines" :key="i" class="flex text-xs leading-5">
diff --git a/tests/e2e/code/panel.spec.ts b/tests/e2e/code/panel.spec.ts
index d4ff758ce..fa1d7b7f5 100644
--- a/tests/e2e/code/panel.spec.ts
+++ b/tests/e2e/code/panel.spec.ts
@@ -98,3 +98,25 @@ test('switching back to Design tab works', async () => {
       .first()
   ).toBeVisible()
 })
+
+test('imports HTML and CSS into the canvas', async () => {
+  await codeTab().click()
+  await editor.page.getByTestId('code-panel-import-toggle').click()
+  await editor.page.getByTestId('code-panel-import-html').fill('<div class="card">Hello DOM</div>')
+  await editor.page
+    .getByTestId('code-panel-import-css')
+    .fill('.card { width: 240px; height: 120px; padding: 16px; background: #ffffff; }')
+  await editor.page.getByTestId('code-panel-import').click()
+  await editor.page.waitForFunction(() => {
+    const store = window.openPencil?.getStore?.()
+    return store?.graph.getAllNodes().some((node) => node.name.includes('Hello DOM'))
+  })
+  await editor.canvas.waitForRender()
+
+  const imported = await editor.page.evaluate(() => {
+    const store = window.openPencil?.getStore?.()
+    if (!store) throw new Error('OpenPencil store not initialized')
+    return store.graph.getAllNodes().some((node) => node.name.includes('Hello DOM'))
+  })
+  expect(imported).toBe(true)
+})