diff --git a/common/src/app/common/file_builder.cljc b/common/src/app/common/file_builder.cljc
index d4520fcb5..2bd2a5dc0 100644
--- a/common/src/app/common/file_builder.cljc
+++ b/common/src/app/common/file_builder.cljc
@@ -661,6 +661,40 @@
               shapes)
       (dissoc $ :current-component-id))))
 
+(defn create-component-instance
+  [file data]
+  (let [component-id     (uuid/uuid (:component-id data))
+        x                (:x data)
+        y                (:y data)
+        file             (assoc file :current-component-id component-id)
+        page-id          (:current-page-id file)
+        page             (ctpl/get-page (:data file) page-id)
+        component        (ctkl/get-component (:data file) component-id)
+        ;; main-instance-id (:main-instance-id component)
+
+        [shape shapes]
+        (ctn/make-component-instance page
+                                     component
+                                     (:id file)
+                                     (gpt/point x
+                                                y)
+                                     #_{:main-instance? true
+                                      :force-id main-instance-id})]
+
+    (as-> file $
+      (reduce #(commit-change %1
+                              {:type :add-obj
+                               :id (:id %2)
+                               :page-id (:id page)
+                               :parent-id (:parent-id %2)
+                               :frame-id (:frame-id %2)
+                               :obj %2})
+              $
+              shapes)
+
+      (assoc $ :last-id (:id shape))
+      (dissoc $ :current-component-id))))
+
 (defn delete-object
   [file id]
   (let [page-id (:current-page-id file)]
@@ -687,7 +721,8 @@
          {:type :mod-obj
           :operations (reduce generate-operation [] attrs)
           :page-id page-id
-          :id (:id old-obj)}))))
+          :id (:id old-obj)})
+        (assoc :last-id (:id old-obj)))))
 
 (defn get-current-page
   [file]
diff --git a/frontend/src/app/libs/file_builder.cljs b/frontend/src/app/libs/file_builder.cljs
index 25aec3ffe..4070ed1f8 100644
--- a/frontend/src/app/libs/file_builder.cljs
+++ b/frontend/src/app/libs/file_builder.cljs
@@ -58,6 +58,12 @@
              (rx/filter #(d/not-empty? (second %)))
              (rx/map e/parse-library-color))
 
+        components-stream
+        (->> files-stream
+             (rx/flat-map vals)
+             (rx/filter #(d/not-empty? (get-in % [:data :components])))
+             (rx/flat-map e/parse-library-components))
+
         pages-stream
         (->> render-stream
              (rx/map e/collect-page))]
@@ -72,6 +78,7 @@
      (->> (rx/merge
            manifest-stream
            pages-stream
+           components-stream
            colors-stream)
           (rx/reduce conj [])
           (rx/with-latest-from files-stream)
@@ -153,16 +160,38 @@
     (set! file (fb/delete-library-color file (parse-data data)))
     (str (:last-id file)))
 
+  (startComponent [_ data]
+    (set! file (fb/start-component file (parse-data data)))
+    (str (:current-component-id file)))
+
+  (finishComponent [_]
+    (set! file (fb/finish-component file)))
+
+  (createComponentInstance [_ data]
+    (set! file (fb/create-component-instance file (parse-data data)))
+    (str (:last-id file)))
+
+  (lookupShape [_ shape-id]
+    (clj->js (fb/lookup-shape file (uuid/uuid shape-id))))
+
+  (updateObject [_ id new-obj]
+    (let [old-obj (fb/lookup-shape file (uuid/uuid id))
+          new-obj (d/deep-merge old-obj (parse-data new-obj))]
+      (set! file (fb/update-object file old-obj new-obj))))
+
+  (deleteObject [_ id]
+    (set! file (fb/delete-object file (uuid/uuid id))))
+
   (asMap [_]
     (clj->js file))
 
   (export [_]
-     (->> (export-file file)
-          (rx/subs
-           (fn [value]
-             (when  (not (contains? value :type))
-               (let [[file export-blob] value]
-                 (dom/trigger-download (:name file) export-blob))))))))
+    (->> (export-file file)
+         (rx/subs
+          (fn [value]
+            (when  (not (contains? value :type))
+              (let [[file export-blob] value]
+                (dom/trigger-download (:name file) export-blob))))))))
 
 (defn create-file-export [^string name]
   (File. (fb/create-file name)))