diff --git a/app/src/layout/dock/Backlink.ts b/app/src/layout/dock/Backlink.ts
index 9b9edacc1..40a4c0c9c 100644
--- a/app/src/layout/dock/Backlink.ts
+++ b/app/src/layout/dock/Backlink.ts
@@ -11,6 +11,7 @@ import {onGet} from "../../protyle/util/onGet";
 import {updateHotkeyTip} from "../../protyle/util/compatibility";
 import {openFileById} from "../../editor/util";
 import {MenuItem} from "../../menus/Menu";
+import Protyle from "../../protyle";
 
 export class Backlink extends Model {
     public element: HTMLElement;
@@ -21,6 +22,7 @@ export class Backlink extends Model {
     private tree: Tree;
     private notebookId: string;
     private mTree: Tree;
+    private editors:Protyle[] = [];
 
     constructor(options: {
         tab: Tab,
@@ -164,18 +166,34 @@ export class Backlink extends Model {
                     action: [Constants.CB_GET_FOCUS, Constants.CB_GET_CONTEXT]
                 });
             },
-            toggleClick:(liElement: HTMLElement)=> {
+            toggleClick: (liElement: HTMLElement) => {
                 const svgElement = liElement.firstElementChild.firstElementChild;
                 if (svgElement.classList.contains("b3-list-item__arrow--open")) {
                     svgElement.classList.remove("b3-list-item__arrow--open");
                     liElement.nextElementSibling?.classList.add("fn__none");
                 } else {
                     svgElement.classList.add("b3-list-item__arrow--open");
-                    if (liElement.nextElementSibling && liElement.nextElementSibling.tagName === "UL") {
+                    if (liElement.nextElementSibling && liElement.nextElementSibling.tagName === "DIV") {
                         liElement.nextElementSibling.classList.remove("fn__none");
                     } else {
-                        fetchPost("/api/ref/getBacklinkDoc", {defID:this.blockId, refTreeID:liElement.getAttribute("data-node-id")}, (response)=>{
-
+                        fetchPost("/api/ref/getBacklinkDoc", {
+                            defID: this.blockId,
+                            refTreeID: liElement.getAttribute("data-node-id")
+                        }, (response) => {
+                            const editorElement = document.createElement("div");
+                            liElement.after(editorElement)
+                            const editor = new Protyle(editorElement, {
+                                blockId: "",
+                                backlinkData: response.data.backlinks,
+                                render: {
+                                    background: false,
+                                    title: false,
+                                    gutter: false,
+                                    scroll: false,
+                                    breadcrumb: false,
+                                }
+                            })
+                            this.editors.push(editor)
                         })
                     }
                 }
@@ -367,18 +385,27 @@ export class Backlink extends Model {
                 mk: ""
             };
         }
+
+        this.editors.forEach(item => {
+            item.destroy()
+        })
+        this.editors = [];
         this.element.querySelector('.block__icon[data-type="refresh"] svg').classList.remove("fn__rotate");
         this.notebookId = data.box;
         this.inputsElement[0].value = data.k;
         this.inputsElement[1].value = data.mk;
-        data.backlinks.forEach((item) => {
-            delete item.blocks
-            delete item.children
-        })
-        data.backmentions.forEach((item) => {
-            delete item.blocks
-            delete item.children
-        })
+        if (data.backlinks) {
+            data.backlinks.forEach((item) => {
+                delete item.blocks
+                delete item.children
+            })
+        }
+        if (data.backmentions) {
+            data.backmentions.forEach((item) => {
+                delete item.blocks
+                delete item.children
+            })
+        }
         this.tree.updateData(data.backlinks);
         this.mTree.updateData(data.backmentions);
 
diff --git a/app/src/protyle/breadcrumb/index.ts b/app/src/protyle/breadcrumb/index.ts
index 56f1bc824..881504f42 100644
--- a/app/src/protyle/breadcrumb/index.ts
+++ b/app/src/protyle/breadcrumb/index.ts
@@ -364,7 +364,7 @@ export class Breadcrumb {
         this.id = id;
         fetchPost("/api/block/getBlockBreadcrumb", {id}, (response) => {
             let html = "";
-            response.data.forEach((item: { id: string, name: string, type: string, subType: string, children: [] }, index: number) => {
+            response.data.forEach((item: IBreadcrumb, index: number) => {
                 let isCurrent = false;
                 if (!protyle.block.showAll && item.id === protyle.block.parentID) {
                     isCurrent = true;
diff --git a/app/src/protyle/index.ts b/app/src/protyle/index.ts
index afe4d37c2..5c4400e41 100644
--- a/app/src/protyle/index.ts
+++ b/app/src/protyle/index.ts
@@ -25,6 +25,7 @@ import {Background} from "./header/Background";
 import {getDisplayName} from "../util/pathName";
 import {onGet} from "./util/onGet";
 import {reloadProtyle} from "./util/reload";
+import {renderBacklink} from "./wysiwyg/renderBacklink";
 
 class Protyle {
 
@@ -155,6 +156,11 @@ class Protyle {
                     }
                 }
             });
+            setPadding(this.protyle);
+            if (options.backlinkData) {
+                renderBacklink(this.protyle, options.backlinkData)
+                return
+            }
             fetchPost("/api/filetree/getDoc", {
                 id: options.blockId,
                 k: options.key || "",
@@ -201,7 +207,6 @@ class Protyle {
                     mergedOptions.after(this);
                 }
             });
-            setPadding(this.protyle);
         }
     }
 
diff --git a/app/src/protyle/wysiwyg/renderBacklink.ts b/app/src/protyle/wysiwyg/renderBacklink.ts
new file mode 100644
index 000000000..1de796059
--- /dev/null
+++ b/app/src/protyle/wysiwyg/renderBacklink.ts
@@ -0,0 +1,6 @@
+export const renderBacklink = (protype: IProtyle, backlinkData: {
+    blockPaths: IBreadcrumb[],
+    dom: string
+}[]) => {
+
+}
diff --git a/app/src/types/protyle.d.ts b/app/src/types/protyle.d.ts
index 2a541f409..20f0b0a7b 100644
--- a/app/src/types/protyle.d.ts
+++ b/app/src/types/protyle.d.ts
@@ -105,6 +105,14 @@ interface ILuteRender {
     renderBackslashContent?: ILuteRenderCallback;
 }
 
+interface IBreadcrumb {
+    id: string,
+    name: string,
+    type: string,
+    subType: string,
+    children: []
+}
+
 interface ILuteOptions extends IMarkdownConfig {
     emojis: IObject;
     emojiSite: string;
@@ -351,6 +359,10 @@ interface IHint {
 
 /** @link https://ld246.com/article/1549638745630#options */
 interface IOptions {
+    backlinkData?: {
+        blockPaths: IBreadcrumb[],
+        dom: string
+    }[],
     action?: string[],
     mode?: TEditorMode,
     blockId: string