diff --git a/libs/shared/lib/components/textEditor/VariableNode.tsx b/libs/shared/lib/components/textEditor/VariableNode.tsx
index 300242055a03a409b94e6b72401871b7133fa9f6..a2341e49855a58c357706d815a9e2ab3c77cb3bc 100644
--- a/libs/shared/lib/components/textEditor/VariableNode.tsx
+++ b/libs/shared/lib/components/textEditor/VariableNode.tsx
@@ -1,4 +1,4 @@
-import type { NodeKey, LexicalEditor, DOMExportOutput } from 'lexical';
+import type { NodeKey, LexicalEditor, DOMExportOutput, SerializedLexicalNode, Spread } from 'lexical';
 import { DecoratorNode, EditorConfig } from 'lexical';
 
 export enum VariableType {
@@ -6,6 +6,14 @@ export enum VariableType {
   visualization = 'visualization',
 }
 
+export type SerializedVariableNode = Spread<
+  {
+    name: string,
+    variableType: VariableType
+  },
+  SerializedLexicalNode
+>;
+
 export class VariableNode extends DecoratorNode<JSX.Element> {
   __name: string;
   __variableType: VariableType;
@@ -39,6 +47,22 @@ export class VariableNode extends DecoratorNode<JSX.Element> {
     return `{{ ${self.__variableType}:${self.__name} }}`;
   }
 
+  // Import and export
+
+  exportJSON(): SerializedVariableNode {
+    return {
+      type: this.getType(),
+      variableType: this.__variableType,
+      name: this.__name,
+      version: 1,
+    };
+  }
+
+  static importJSON(jsonNode: SerializedVariableNode): VariableNode {
+    const node = new VariableNode(jsonNode.name, jsonNode.variableType);
+    return node;
+  }
+
   // View
 
   createDOM(config: EditorConfig): HTMLElement {