diff --git a/packages/lexical-playground/src/nodes/LayoutItemNode.ts b/packages/lexical-playground/src/nodes/LayoutItemNode.ts
index d579b4ad6d8..3d227976d64 100644
--- a/packages/lexical-playground/src/nodes/LayoutItemNode.ts
+++ b/packages/lexical-playground/src/nodes/LayoutItemNode.ts
@@ -8,6 +8,7 @@
 
 import type {
   DOMConversionMap,
+  DOMConversionOutput,
   EditorConfig,
   LexicalNode,
   SerializedElementNode,
@@ -18,6 +19,10 @@ import {ElementNode} from 'lexical';
 
 export type SerializedLayoutItemNode = SerializedElementNode;
 
+function $convertLayoutItemElement(): DOMConversionOutput | null {
+  return {node: $createLayoutItemNode()};
+}
+
 export class LayoutItemNode extends ElementNode {
   static getType(): string {
     return 'layout-item';
@@ -29,6 +34,7 @@ export class LayoutItemNode extends ElementNode {
 
   createDOM(config: EditorConfig): HTMLElement {
     const dom = document.createElement('div');
+    dom.setAttribute('data-lexical-layout-item', 'true');
     if (typeof config.theme.layoutItem === 'string') {
       addClassNamesToElement(dom, config.theme.layoutItem);
     }
@@ -40,7 +46,17 @@ export class LayoutItemNode extends ElementNode {
   }
 
   static importDOM(): DOMConversionMap | null {
-    return {};
+    return {
+      div: (domNode: HTMLElement) => {
+        if (!domNode.hasAttribute('data-lexical-layout-item')) {
+          return null;
+        }
+        return {
+          conversion: $convertLayoutItemElement,
+          priority: 2,
+        };
+      },
+    };
   }
 
   static importJSON(): LayoutItemNode {