diff --git a/src/main/frontend/components/whiteboard.cljs b/src/main/frontend/components/whiteboard.cljs
index 22def8ae2a..908594b8f6 100644
--- a/src/main/frontend/components/whiteboard.cljs
+++ b/src/main/frontend/components/whiteboard.cljs
@@ -35,7 +35,6 @@
     (when draw-component
       (draw-component name shape-id))))
 
-;; TODO: make it reactive to db changes
 (rum/defc tldraw-preview < rum/reactive
   {:init (fn [state]
            (p/let [_ (loader/load :tldraw)]
diff --git a/src/main/frontend/extensions/tldraw.cljs b/src/main/frontend/extensions/tldraw.cljs
index a76d2905b6..2e097e43ca 100644
--- a/src/main/frontend/extensions/tldraw.cljs
+++ b/src/main/frontend/extensions/tldraw.cljs
@@ -136,26 +136,20 @@
                            (route-handler/redirect-to-whiteboard! page-name {:block-id page-name-or-uuid})
                            (route-handler/redirect-to-page! (model/get-redirect-page-name page-name-or-uuid))))))})
 
-(rum/defc tldraw-app
-  [page-name block-id]
+(rum/defc tldraw-app-inner < rum/reactive
+  [page-name block-id loaded-app set-loaded-app]
   (let [populate-onboarding? (whiteboard-handler/should-populate-onboarding-whiteboard? page-name)
-        data (whiteboard-handler/page-name->tldr! page-name)
-        [loaded-app set-loaded-app] (rum/use-state nil)
         on-mount (fn [^js tln]
                    (when tln
                      (set! (.-appUndo tln) undo)
                      (set! (.-appRedo tln) redo)
                      (when-let [^js api (gobj/get tln "api")]
-                      (p/then (when populate-onboarding?
-                                (whiteboard-handler/populate-onboarding-whiteboard api))
-                              #(do (whiteboard-handler/cleanup! (.-currentPage tln))
-                                   (state/focus-whiteboard-shape tln block-id)
-                                   (set-loaded-app tln))))))]
-    (rum/use-effect! (fn []
-                       (when (and loaded-app block-id)
-                         (state/focus-whiteboard-shape loaded-app block-id))
-                       #())
-                     [block-id loaded-app])
+                       (p/then (when populate-onboarding?
+                                 (whiteboard-handler/populate-onboarding-whiteboard api))
+                               #(do (whiteboard-handler/cleanup! (.-currentPage tln))
+                                    (state/focus-whiteboard-shape tln block-id)
+                                    (set-loaded-app tln))))))
+        data (whiteboard-handler/page-name->tldr! page-name)]
     (when data
       [:div.draw.tldraw.whiteboard.relative.w-full.h-full
        {:style {:overscroll-behavior "none"}
@@ -167,9 +161,9 @@
 
        (when
         (and populate-onboarding? (not loaded-app))
-        [:div.absolute.inset-0.flex.items-center.justify-center
-         {:style {:z-index 200}}
-         (ui/loading "Loading onboarding whiteboard ...")])
+         [:div.absolute.inset-0.flex.items-center.justify-center
+          {:style {:z-index 200}}
+          (ui/loading "Loading onboarding whiteboard ...")])
        (tldraw {:renderers tldraw-renderers
                 :handlers (get-tldraw-handlers page-name)
                 :onMount on-mount
@@ -179,3 +173,13 @@
                              (util/profile "tldraw persist"
                                            (whiteboard-handler/transact-tldr-delta! page-name app (.-replace info))))
                 :model data})])))
+
+(rum/defc tldraw-app
+  [page-name block-id]
+  (let [[loaded-app set-loaded-app] (rum/use-state nil)]
+    (rum/use-effect! (fn []
+                       (when (and loaded-app block-id)
+                         (state/focus-whiteboard-shape loaded-app block-id))
+                       #())
+                     [block-id loaded-app])
+    (tldraw-app-inner page-name block-id loaded-app set-loaded-app)))
diff --git a/src/main/frontend/handler/whiteboard.cljs b/src/main/frontend/handler/whiteboard.cljs
index 2d4efd6c50..f80b61cfec 100644
--- a/src/main/frontend/handler/whiteboard.cljs
+++ b/src/main/frontend/handler/whiteboard.cljs
@@ -220,7 +220,8 @@
        (when (and page-entity
                   (nil? (:block/file page-entity))
                   (not (config/db-based-graph? (state/get-current-repo))))
-         (outliner-file/sync-to-file page-entity))))))
+         (outliner-file/sync-to-file page-entity)))
+     name)))
 
 (defn create-new-whiteboard-and-redirect!
   ([]
@@ -259,12 +260,13 @@
 
 (defn page-name->tldr!
   ([page-name]
-   (clj->js
-    (if page-name
-      (if-let [[page-block blocks] (get-whiteboard-clj page-name)]
-        (whiteboard-clj->tldr page-block blocks)
-        (create-new-whiteboard-page! page-name))
-      (create-new-whiteboard-page! nil)))))
+   (let [page (if (model/page-exists? page-name)
+                (model/get-page page-name)
+                (let [name (create-new-whiteboard-page! page-name)]
+                  (model/get-page name)))
+         react-page (db/sub-block (:db/id page))
+         blocks (:block/_page react-page)]
+     (whiteboard-clj->tldr react-page blocks))))
 
 (defn- get-whiteboard-blocks
   "Given a page, return all the logseq blocks (exclude all shapes)"