diff --git a/app/src/config/util/snippets.ts b/app/src/config/util/snippets.ts
index 637ff68a95a..4016755dacf 100644
--- a/app/src/config/util/snippets.ts
+++ b/app/src/config/util/snippets.ts
@@ -4,31 +4,35 @@ import {Dialog} from "../../dialog";
 
 export const renderSnippet = () => {
     fetchPost("/api/snippet/getSnippet", {type: "all", enabled: 2}, (response) => {
-        response.data.snippets.forEach((item: ISnippet) => {
-            const id = `snippet${item.type === "css" ? "CSS" : "JS"}${item.id}`;
-            let exitElement = document.getElementById(id) as HTMLScriptElement;
-            if (!item.enabled) {
-                if (exitElement) {
-                    exitElement.remove();
-                }
-                return;
-            }
+        renderSnippets(response.data.snippets);
+    });
+};
+
+export const renderSnippets = (snippets: ISnippet[]) => {
+    snippets.forEach(item => {
+        const id = `snippet${item.type === "css" ? "CSS" : "JS"}${item.id}`;
+        let exitElement = document.getElementById(id) as HTMLScriptElement;
+        if (!item.enabled) {
             if (exitElement) {
-                if (exitElement.innerHTML === item.content) {
-                    return;
-                }
                 exitElement.remove();
             }
-            if (item.type === "css") {
-                document.head.insertAdjacentHTML("beforeend", `<style id="${id}">${item.content}</style>`);
-            } else if (item.type === "js") {
-                exitElement = document.createElement("script");
-                exitElement.type = "text/javascript";
-                exitElement.text = item.content;
-                exitElement.id = id;
-                document.head.appendChild(exitElement);
+            return;
+        }
+        if (exitElement) {
+            if (exitElement.innerHTML === item.content) {
+                return;
             }
-        });
+            exitElement.remove();
+        }
+        if (item.type === "css") {
+            document.head.insertAdjacentHTML("beforeend", `<style id="${id}">${item.content}</style>`);
+        } else if (item.type === "js") {
+            exitElement = document.createElement("script");
+            exitElement.type = "text/javascript";
+            exitElement.text = item.content;
+            exitElement.id = id;
+            document.head.appendChild(exitElement);
+        }
     });
 };
 
diff --git a/app/src/plugin/API.ts b/app/src/plugin/API.ts
index 0c493e9982a..5353a922aa4 100644
--- a/app/src/plugin/API.ts
+++ b/app/src/plugin/API.ts
@@ -4,6 +4,7 @@ import {showMessage} from "../dialog/message";
 import {Dialog} from "../dialog";
 import {fetchGet, fetchPost, fetchSyncPost} from "../util/fetch";
 import {getBackend, getFrontend} from "../util/functions";
+import {renderSnippet, renderSnippets} from "../config/util/snippets";
 /// #if !MOBILE
 import {openFile, openFileById} from "../editor/util";
 import {openNewWindow, openNewWindowById} from "../window/openNewWindow";
@@ -171,6 +172,8 @@ export const API = {
     fetchGet,
     getFrontend,
     getBackend,
+    renderSnippet,
+    renderSnippets,
     openTab,
     openWindow,
     Protyle,