diff --git a/__tests__/__snapshots__/library.js.snap b/__tests__/__snapshots__/library.js.snap
index 539c95b1..62a01d5b 100644
--- a/__tests__/__snapshots__/library.js.snap
+++ b/__tests__/__snapshots__/library.js.snap
@@ -407,6 +407,8 @@ exports[`prototype properties of Transformer 1`] = `
 
 exports[`prototype properties of Util 1`] = `[]`;
 
+exports[`prototype properties of registerCustomElement 1`] = `[]`;
+
 exports[`static properties of CanonizerUtil 1`] = `
 [
   "BACKBONE",
@@ -780,3 +782,5 @@ exports[`static properties of Util 1`] = `
   "getHoseCodesFromDiastereotopicID",
 ]
 `;
+
+exports[`static properties of registerCustomElement 1`] = `[]`;
diff --git a/__tests__/library.js b/__tests__/library.js
index 06bc5af3..2857029b 100644
--- a/__tests__/library.js
+++ b/__tests__/library.js
@@ -33,6 +33,7 @@ const coreAPI = [
 
 const fullAPI = [
   'CanvasEditor',
+  'registerCustomElement',
   'StructureView',
   'StructureEditor',
   'SVGRenderer',
diff --git a/examples/generic_editor/demo.html b/examples/generic_editor/demo.html
index b9232f1d..5a64acd7 100644
--- a/examples/generic_editor/demo.html
+++ b/examples/generic_editor/demo.html
@@ -49,8 +49,8 @@ <h1>Generic editor - Demo</h1>
         <div id="changeCount">0</div>
         <div>ID Code</div>
         <div id="idcode"></div>
-        <div>Molfile</div>
-        <div id="molfile"></div>
+        <label for="molfile">Molfile or RXN</label>
+        <textarea class="font-mono p-2" rows="12" id="molfile"></textarea>
       </div>
     </section>
   </body>
diff --git a/examples/generic_editor/demo/editor.ts b/examples/generic_editor/demo/editor.ts
index ee27325f..4bb36492 100644
--- a/examples/generic_editor/demo/editor.ts
+++ b/examples/generic_editor/demo/editor.ts
@@ -3,7 +3,7 @@ import {
   incrementChangeCount,
   resetChangeCount,
   updateIDCode,
-  updateMolfile,
+  updateMolfileOrRxn,
 } from './result.ts';
 
 let editor: OCL.CanvasEditor | undefined;
@@ -23,14 +23,24 @@ export function resetEditor() {
   editor = newEditor;
 
   resetChangeCount();
+  updateIDCode('');
+  updateMolfileOrRxn('');
 
   editor.setOnChangeListener(({ type, isUserEvent }) => {
     if (type === 'molecule') {
       if (isUserEvent) {
         incrementChangeCount();
       }
-      updateIDCode(newEditor.getMolecule());
-      updateMolfile(newEditor.getMolecule());
+      const mode = newEditor.getMode();
+      if (mode === 'molecule') {
+        const molecule = newEditor.getMolecule();
+        updateIDCode(molecule.getIDCode());
+        updateMolfileOrRxn(molecule.toMolfileV3());
+      } else {
+        const reaction = newEditor.getReaction();
+        updateIDCode(OCL.ReactionEncoder.encode(reaction));
+        updateMolfileOrRxn(reaction.toRxnV3());
+      }
     }
   });
 }
diff --git a/examples/generic_editor/demo/result.ts b/examples/generic_editor/demo/result.ts
index 76817656..89110674 100644
--- a/examples/generic_editor/demo/result.ts
+++ b/examples/generic_editor/demo/result.ts
@@ -1,5 +1,3 @@
-import OCL from '../../../distesm/full.pretty';
-
 const changeCountDiv = document.getElementById('changeCount') as HTMLElement;
 
 export function incrementChangeCount() {
@@ -13,13 +11,12 @@ export function resetChangeCount() {
 
 const idcodeDiv = document.getElementById('idcode') as HTMLElement;
 
-export function updateIDCode(molecule: OCL.Molecule) {
-  const idcodeAndCoords = molecule.getIDCodeAndCoordinates();
-  idcodeDiv.innerText = `${idcodeAndCoords.idCode} ${idcodeAndCoords.coordinates}`;
+export function updateIDCode(idCode: string) {
+  idcodeDiv.innerText = idCode;
 }
 
-const molfileDiv = document.getElementById('molfile') as HTMLElement;
+const molfileArea = document.getElementById('molfile') as HTMLTextAreaElement;
 
-export function updateMolfile(molecule: OCL.Molecule) {
-  molfileDiv.innerText = molecule.toMolfileV3();
+export function updateMolfileOrRxn(value: string) {
+  molfileArea.value = value;
 }
diff --git a/full.js b/full.js
index 425bd42d..cbd0fb85 100644
--- a/full.js
+++ b/full.js
@@ -5,7 +5,7 @@ const OCL = require('./dist/openchemlib-full.js');
 require('./lib/canvas_editor/init')(OCL);
 
 exports.CanvasEditor = OCL.CanvasEditor;
-exports.registerCanvasEditor = OCL.registerCanvasEditor;
+exports.registerCustomElement = OCL.registerCustomElement;
 
 exports.default = OCL;
 exports.CanonizerUtil = OCL.CanonizerUtil;
diff --git a/full.pretty.js b/full.pretty.js
index 4ec7b22d..1f5509da 100644
--- a/full.pretty.js
+++ b/full.pretty.js
@@ -5,7 +5,7 @@ const OCL = require('./dist/openchemlib-full.pretty.js');
 require('./lib/canvas_editor/init')(OCL);
 
 exports.CanvasEditor = OCL.CanvasEditor;
-exports.registerCanvasEditor = OCL.registerCanvasEditor;
+exports.registerCustomElement = OCL.registerCustomElement;
 
 exports.default = OCL;
 exports.CanonizerUtil = OCL.CanonizerUtil;
diff --git a/lib/canvas_editor/init/canvas_editor.js b/lib/canvas_editor/init/canvas_editor.js
index ef2c787a..5b6f0c98 100644
--- a/lib/canvas_editor/init/canvas_editor.js
+++ b/lib/canvas_editor/init/canvas_editor.js
@@ -39,6 +39,12 @@ function initCanvasEditor(JavaEditorArea, JavaEditorToolbar, JavaUIHelper) {
       this.#destroy = destroy;
     }
 
+    getMode() {
+      const mode = this.#editorArea.getMode();
+      const isReaction = mode & (JavaEditorArea.MODE_REACTION !== 0);
+      return isReaction ? 'reaction' : 'molecule';
+    }
+
     setMolecule(molecule) {
       this.#checkNotDestroyed();
 
@@ -60,7 +66,7 @@ function initCanvasEditor(JavaEditorArea, JavaEditorToolbar, JavaUIHelper) {
     getReaction() {
       this.#checkNotDestroyed();
 
-      this.#editorArea.getReaction();
+      return this.#editorArea.getReaction();
     }
 
     setOnChangeListener(onChange) {
diff --git a/src/com/actelion/research/gwt/gui/generic/JSEditorArea.java b/src/com/actelion/research/gwt/gui/generic/JSEditorArea.java
index 8aac2fed..dacf9af8 100644
--- a/src/com/actelion/research/gwt/gui/generic/JSEditorArea.java
+++ b/src/com/actelion/research/gwt/gui/generic/JSEditorArea.java
@@ -191,4 +191,8 @@ public native void repaint()
   public void clearAll() {
     mDrawArea.clearAll();
   }
+
+  public int getMode() {
+    return mDrawArea.getMode();
+  }
 }
diff --git a/types.d.ts b/types.d.ts
index d72fcf75..ff1d422b 100644
--- a/types.d.ts
+++ b/types.d.ts
@@ -3729,6 +3729,11 @@ export declare class CanvasEditor {
    */
   constructor(element: HTMLElement, options?: CanvasEditorOptions);
 
+  /**
+   * Get the current editor mode.
+   */
+  getMode(): CanvasEditorMode;
+
   /**
    * Set the molecule to be edited.
    * Actions in the editor will mutate the molecule object directly.