diff --git a/src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts b/src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts
index da09076e5..2802cab85 100644
--- a/src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts
+++ b/src/public/app/widgets/type_widgets/abstract_svg_split_type_widget.ts
@@ -6,6 +6,8 @@ import AbstractSplitTypeWidget from "./abstract_split_type_widget.js";
  *
  * This adds the following functionality:
  *
+ * - Automatic handling of the preview when content or the note changes.
+ *
  */
 export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTypeWidget {
 
@@ -20,11 +22,24 @@ export default abstract class AbstractSvgSplitTypeWidget extends AbstractSplitTy
     async doRefresh(note: FNote | null | undefined) {
         super.doRefresh(note);
 
-        if (note) {
-            const blob = await note.getBlob();
-            const content = blob?.content || "";
-            console.log(content);
+        const blob = await note?.getBlob();
+        const content = blob?.content || "";
+        this.refreshPreview(content);
+    }
 
+    getData(): { content: string; } {
+        const data = super.getData();
+        this.refreshPreview(data.content);
+        return data;
+    }
+
+    /**
+     * Triggers an update of the preview pane with the provided content.
+     *
+     * @param content the content that will be passed to `renderSvg` for rendering. It is not the SVG content.
+     */
+    async refreshPreview(content: string) {
+        if (this.note) {
             const svg = await this.renderSvg(content);
             this.$renderContainer.html(svg);
         }