diff --git a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs b/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs
index 70adcdfb6..ae25c9177 100644
--- a/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/frame/dynamic_modifiers.cljs
@@ -82,6 +82,7 @@
 
         frame? (= :frame type)
         group? (= :group type)
+        text? (= :text type)
         mask?  (and group? masked-group?)]
 
     (cond
@@ -103,6 +104,10 @@
          (dom/query-all shape-defs ".svg-def")
          (dom/query-all shape-defs ".svg-mask-wrapper")))
 
+      text?
+      [shape-node
+       (dom/query shape-node ".text-container")]
+
       :else
       [shape-node])))
 
@@ -185,6 +190,15 @@
             (dom/class? node "frame-children")
             (set-transform-att! node "transform" (gmt/inverse transform))
 
+            (dom/class? node "text-container")
+            (let [modifiers (dissoc modifiers :displacement :rotation)]
+              (when (not (gsh/empty-modifiers? modifiers))
+                (let [mtx (-> shape
+                              (assoc :modifiers modifiers)
+                              (gsh/transform-shape)
+                              (gsh/transform-matrix {:no-flip true}))]
+                  (override-transform-att! node "transform" mtx))))
+
             (or (= (dom/get-tag-name node) "mask")
                 (= (dom/get-tag-name node) "filter"))
             (transform-region! node modifiers)
diff --git a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
index ff2fd0bfc..372cbda74 100644
--- a/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
+++ b/frontend/src/app/main/ui/workspace/shapes/text/editor.cljs
@@ -7,9 +7,10 @@
 (ns app.main.ui.workspace.shapes.text.editor
   (:require
    ["draft-js" :as draft]
-   [app.common.geom.matrix :as gmt]
+   [app.common.data.macros :as dm]
    [app.common.geom.point :as gpt]
    [app.common.geom.shapes :as gsh]
+   [app.common.geom.shapes.text :as gsht]
    [app.common.text :as txt]
    [app.main.data.workspace :as dw]
    [app.main.data.workspace.texts :as dwt]
@@ -255,30 +256,37 @@
       (-> (gpt/subtract pt box)
           (gpt/multiply zoom)))))
 
-(mf/defc text-editor-viewport
+(mf/defc text-editor-svg
   {::mf/wrap-props false}
   [props]
   (let [shape        (obj/get props "shape")
-        viewport-ref (obj/get props "viewport-ref")
-        zoom         (obj/get props "zoom")
 
-        position
-        (-> (gpt/point (-> shape :selrect :x)
-                       (-> shape :selrect :y))
-            (translate-point-from-viewport (mf/ref-val viewport-ref) zoom))
+        clip-id
+        (dm/str "text-edition-clip" (:id shape))
 
-        top-left-corner (gpt/point (/ (:width shape) 2) (/ (:height shape) 2))
+        text-modifier-ref
+        (mf/use-memo (mf/deps (:id shape)) #(refs/workspace-text-modifier-by-id (:id shape)))
 
-        transform
-        (-> (gmt/matrix)
-            (gmt/scale (gpt/point zoom))
-            (gmt/multiply (gsh/transform-matrix shape nil top-left-corner)))]
+        text-modifier
+        (mf/deref text-modifier-ref)
 
-    [:div {:style {:position "absolute"
-                   :left (str (:x position) "px")
-                   :top  (str (:y position) "px")
-                   :pointer-events "all"
-                   :transform (str transform)
-                   :transform-origin "left top"}}
+        bounding-box
+        (gsht/position-data-bounding-box text-modifier)]
 
-     [:& text-shape-edit-html {:shape shape :key (str (:id shape))}]]))
+    [:g.text-editor {:clip-path (dm/fmt "url(#%)" clip-id)
+                     :transform (dm/str (gsh/transform-matrix shape))}
+     [:defs
+      [:clipPath {:id clip-id}
+       [:rect {:x (min (:x bounding-box) (:x shape))
+               :y (min (:y bounding-box) (:y shape))
+               :width (max (:width bounding-box) (:width shape))
+               :height (max (:height bounding-box) (:height shape))
+               :fill "red"}]]]
+
+     [:foreignObject {:x (:x shape) :y (:y shape) :width "100%" :height "100%"
+                      :externalResourcesRequired true}
+      [:div {:style {:position "absolute"
+                     :left 0
+                     :top  0
+                     :pointer-events "all"}}
+       [:& text-shape-edit-html {:shape shape :key (str (:id shape))}]]]]))
diff --git a/frontend/src/app/main/ui/workspace/viewport.cljs b/frontend/src/app/main/ui/workspace/viewport.cljs
index bcd31fa34..8de6b65ed 100644
--- a/frontend/src/app/main/ui/workspace/viewport.cljs
+++ b/frontend/src/app/main/ui/workspace/viewport.cljs
@@ -187,10 +187,7 @@
 
     [:div.viewport
      [:div.viewport-overlays {:ref overlays-ref}
-      (when show-text-editor?
-        [:& editor/text-editor-viewport {:shape editing-shape
-                                         :viewport-ref viewport-ref
-                                         :zoom zoom}])
+
       (when show-comments?
         [:& comments/comments-layer {:vbox vbox
                                      :vport vport
@@ -275,6 +272,9 @@
        :on-pointer-up    on-pointer-up}
 
       [:g {:style {:pointer-events (if disable-events? "none" "auto")}}
+       (when show-text-editor?
+         [:& editor/text-editor-svg {:shape editing-shape}])
+
        (when show-outlines?
          [:& outline/shape-outlines
           {:objects base-objects