diff --git a/blocksuite/affine/all/package.json b/blocksuite/affine/all/package.json
index 127d537781..dd488f091f 100644
--- a/blocksuite/affine/all/package.json
+++ b/blocksuite/affine/all/package.json
@@ -39,6 +39,7 @@
     "@blocksuite/affine-gfx-mindmap": "workspace:*",
     "@blocksuite/affine-gfx-note": "workspace:*",
     "@blocksuite/affine-gfx-shape": "workspace:*",
+    "@blocksuite/affine-gfx-template": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*",
     "@blocksuite/affine-inline-footnote": "workspace:*",
@@ -128,6 +129,7 @@
     "./gfx/mindmap": "./src/gfx/mindmap.ts",
     "./gfx/connector": "./src/gfx/connector.ts",
     "./gfx/group": "./src/gfx/group.ts",
+    "./gfx/template": "./src/gfx/template.ts",
     "./gfx/turbo-renderer": "./src/gfx/turbo-renderer.ts",
     "./components/block-selection": "./src/components/block-selection.ts",
     "./components/block-zero-width": "./src/components/block-zero-width.ts",
diff --git a/blocksuite/affine/all/src/gfx/template.ts b/blocksuite/affine/all/src/gfx/template.ts
new file mode 100644
index 0000000000..7270cc396d
--- /dev/null
+++ b/blocksuite/affine/all/src/gfx/template.ts
@@ -0,0 +1 @@
+export * from '@blocksuite/affine-gfx-template';
diff --git a/blocksuite/affine/all/tsconfig.json b/blocksuite/affine/all/tsconfig.json
index dcad202a3e..ebeb7b513c 100644
--- a/blocksuite/affine/all/tsconfig.json
+++ b/blocksuite/affine/all/tsconfig.json
@@ -36,6 +36,7 @@
     { "path": "../gfx/mindmap" },
     { "path": "../gfx/note" },
     { "path": "../gfx/shape" },
+    { "path": "../gfx/template" },
     { "path": "../gfx/text" },
     { "path": "../gfx/turbo-renderer" },
     { "path": "../inlines/footnote" },
diff --git a/blocksuite/affine/blocks/block-root/package.json b/blocksuite/affine/blocks/block-root/package.json
index 82d90c09ca..13fb455c2e 100644
--- a/blocksuite/affine/blocks/block-root/package.json
+++ b/blocksuite/affine/blocks/block-root/package.json
@@ -33,6 +33,7 @@
     "@blocksuite/affine-gfx-mindmap": "workspace:*",
     "@blocksuite/affine-gfx-note": "workspace:*",
     "@blocksuite/affine-gfx-shape": "workspace:*",
+    "@blocksuite/affine-gfx-template": "workspace:*",
     "@blocksuite/affine-gfx-text": "workspace:*",
     "@blocksuite/affine-inline-latex": "workspace:*",
     "@blocksuite/affine-inline-link": "workspace:*",
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts
index afe60d3906..9642bc4668 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/tools.ts
@@ -4,10 +4,8 @@ import { connectorQuickTool } from '@blocksuite/affine-gfx-connector';
 import { mindMapSeniorTool } from '@blocksuite/affine-gfx-mindmap';
 import { noteSeniorTool } from '@blocksuite/affine-gfx-note';
 import { shapeSeniorTool } from '@blocksuite/affine-gfx-shape';
-import {
-  QuickToolExtension,
-  SeniorToolExtension,
-} from '@blocksuite/affine-widget-edgeless-toolbar';
+import { templateSeniorTool } from '@blocksuite/affine-gfx-template';
+import { QuickToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
 import { html } from 'lit';
 
 import { buildLinkDenseMenu } from './link/link-dense-menu.js';
@@ -30,14 +28,6 @@ const linkQuickTool = QuickToolExtension('link', ({ block, gfx }) => {
   };
 });
 
-const templateSeniorTool = SeniorToolExtension('template', ({ block }) => {
-  return {
-    name: 'Template',
-    content: html`<edgeless-template-button .edgeless=${block}>
-    </edgeless-template-button>`,
-  };
-});
-
 export const quickTools = [
   defaultQuickTool,
   frameQuickTool,
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-service.ts b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-service.ts
index 913c400c5c..d45bee3599 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-service.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/edgeless-root-service.ts
@@ -6,6 +6,7 @@ import {
   type SurfaceBlockModel,
   type SurfaceContext,
 } from '@blocksuite/affine-block-surface';
+import { TemplateJob } from '@blocksuite/affine-gfx-template';
 import {
   type ConnectorElementModel,
   RootBlockSchema,
@@ -31,7 +32,6 @@ import { effect } from '@preact/signals-core';
 import clamp from 'lodash-es/clamp';
 
 import { RootService } from '../root-service.js';
-import { TemplateJob } from './services/template.js';
 import { getCursorMode } from './utils/query.js';
 
 export class EdgelessRootService extends RootService implements SurfaceContext {
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/index.ts b/blocksuite/affine/blocks/block-root/src/edgeless/index.ts
index 5bd476ffce..981b7aa035 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/index.ts
+++ b/blocksuite/affine/blocks/block-root/src/edgeless/index.ts
@@ -1,12 +1,9 @@
 export * from './clipboard/clipboard';
 export * from './clipboard/command';
-export { EdgelessTemplatePanel } from './components/toolbar/template/template-panel.js';
-export * from './components/toolbar/template/template-type.js';
 export * from './edgeless-root-block.js';
 export { EdgelessRootPreviewBlockComponent } from './edgeless-root-preview-block.js';
 export { EdgelessRootService } from './edgeless-root-service.js';
 export * from './gfx-tool';
-export * from './services/template.js';
 export * from './utils/clipboard-utils.js';
 export { sortEdgelessElements } from './utils/clone-utils.js';
 export { isCanvasElement } from './utils/query.js';
diff --git a/blocksuite/affine/blocks/block-root/src/effects.ts b/blocksuite/affine/blocks/block-root/src/effects.ts
index 9e4e9a1286..f5c9eb20cd 100644
--- a/blocksuite/affine/blocks/block-root/src/effects.ts
+++ b/blocksuite/affine/blocks/block-root/src/effects.ts
@@ -4,6 +4,7 @@ import { effects as gfxGroupEffects } from '@blocksuite/affine-gfx-group/effects
 import { effects as gfxMindmapEffects } from '@blocksuite/affine-gfx-mindmap/effects';
 import { effects as gfxNoteEffects } from '@blocksuite/affine-gfx-note/effects';
 import { effects as gfxShapeEffects } from '@blocksuite/affine-gfx-shape/effects';
+import { effects as gfxTemplateEffects } from '@blocksuite/affine-gfx-template/effects';
 import { effects as gfxCanvasTextEffects } from '@blocksuite/affine-gfx-text/effects';
 import { effects as widgetEdgelessToolbarEffects } from '@blocksuite/affine-widget-edgeless-toolbar/effects';
 
@@ -26,10 +27,6 @@ import { ToolbarArrowUpIcon } from './edgeless/components/toolbar/common/toolbar
 import { EdgelessDefaultToolButton } from './edgeless/components/toolbar/default/default-tool-button.js';
 import { EdgelessLassoToolButton } from './edgeless/components/toolbar/lasso/lasso-tool-button.js';
 import { EdgelessLinkToolButton } from './edgeless/components/toolbar/link/link-tool-button.js';
-import { OverlayScrollbar } from './edgeless/components/toolbar/template/overlay-scrollbar.js';
-import { AffineTemplateLoading } from './edgeless/components/toolbar/template/template-loading.js';
-import { EdgelessTemplatePanel } from './edgeless/components/toolbar/template/template-panel.js';
-import { EdgelessTemplateButton } from './edgeless/components/toolbar/template/template-tool-button.js';
 import {
   AffineModalWidget,
   EdgelessRootBlockComponent,
@@ -97,6 +94,7 @@ function registerGfxEffects() {
   gfxMindmapEffects();
   gfxGroupEffects();
   gfxBrushEffects();
+  gfxTemplateEffects();
 }
 
 function registerWidgets() {
@@ -124,7 +122,6 @@ function registerEdgelessToolbarComponents() {
   );
   customElements.define('edgeless-link-tool-button', EdgelessLinkToolButton);
   customElements.define('edgeless-lasso-tool-button', EdgelessLassoToolButton);
-  customElements.define('edgeless-template-button', EdgelessTemplateButton);
 
   // Menus
   customElements.define('edgeless-slide-menu', EdgelessSlideMenu);
@@ -139,12 +136,10 @@ function registerMiscComponents() {
 
   // Loading and preview components
   customElements.define('loader-element', Loader);
-  customElements.define('affine-template-loading', AffineTemplateLoading);
 
   // Toolbar and UI components
   customElements.define('edgeless-zoom-toolbar', EdgelessZoomToolbar);
   customElements.define('zoom-bar-toggle-button', ZoomBarToggleButton);
-  customElements.define('overlay-scrollbar', OverlayScrollbar);
 
   // Auto-complete components
   customElements.define(
@@ -155,7 +150,6 @@ function registerMiscComponents() {
 
   // Note and template components
   customElements.define(NOTE_SLICER_WIDGET, NoteSlicer);
-  customElements.define('edgeless-templates-panel', EdgelessTemplatePanel);
 
   // Navigation components
   customElements.define(
@@ -189,9 +183,6 @@ declare global {
     'edgeless-default-tool-button': EdgelessDefaultToolButton;
     'edgeless-lasso-tool-button': EdgelessLassoToolButton;
     'edgeless-link-tool-button': EdgelessLinkToolButton;
-    'overlay-scrollbar': OverlayScrollbar;
-    'affine-template-loading': AffineTemplateLoading;
-    'edgeless-templates-panel': EdgelessTemplatePanel;
     'affine-page-root': PageRootBlockComponent;
     'zoom-bar-toggle-button': ZoomBarToggleButton;
     'edgeless-zoom-toolbar': EdgelessZoomToolbar;
diff --git a/blocksuite/affine/blocks/block-root/src/index.ts b/blocksuite/affine/blocks/block-root/src/index.ts
index f04b422476..f099922e26 100644
--- a/blocksuite/affine/blocks/block-root/src/index.ts
+++ b/blocksuite/affine/blocks/block-root/src/index.ts
@@ -4,8 +4,6 @@ export * from './common-specs/index.js';
 export * from './edgeless/edgeless-builtin-spec.js';
 export * from './edgeless/edgeless-root-spec.js';
 export * from './edgeless/index.js';
-export { TemplateJob } from './edgeless/services/template.js';
-export * as TemplateMiddlewares from './edgeless/services/template-middlewares.js';
 export * from './page/page-root-block.js';
 export { PageRootService } from './page/page-root-service.js';
 export * from './page/page-root-spec.js';
diff --git a/blocksuite/affine/blocks/block-root/tsconfig.json b/blocksuite/affine/blocks/block-root/tsconfig.json
index 8aa9aed556..b0f55bf756 100644
--- a/blocksuite/affine/blocks/block-root/tsconfig.json
+++ b/blocksuite/affine/blocks/block-root/tsconfig.json
@@ -30,6 +30,7 @@
     { "path": "../../gfx/mindmap" },
     { "path": "../../gfx/note" },
     { "path": "../../gfx/shape" },
+    { "path": "../../gfx/template" },
     { "path": "../../gfx/text" },
     { "path": "../../inlines/latex" },
     { "path": "../../inlines/link" },
diff --git a/blocksuite/affine/gfx/template/package.json b/blocksuite/affine/gfx/template/package.json
new file mode 100644
index 0000000000..a5655c1497
--- /dev/null
+++ b/blocksuite/affine/gfx/template/package.json
@@ -0,0 +1,47 @@
+{
+  "name": "@blocksuite/affine-gfx-template",
+  "description": "Gfx template for BlockSuite.",
+  "type": "module",
+  "scripts": {
+    "build": "tsc"
+  },
+  "sideEffects": false,
+  "keywords": [],
+  "author": "toeverything",
+  "license": "MIT",
+  "dependencies": {
+    "@blocksuite/affine-block-surface": "workspace:*",
+    "@blocksuite/affine-components": "workspace:*",
+    "@blocksuite/affine-gfx-text": "workspace:*",
+    "@blocksuite/affine-model": "workspace:*",
+    "@blocksuite/affine-rich-text": "workspace:*",
+    "@blocksuite/affine-shared": "workspace:*",
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*",
+    "@blocksuite/global": "workspace:*",
+    "@blocksuite/icons": "^2.2.10",
+    "@blocksuite/std": "workspace:*",
+    "@blocksuite/store": "workspace:*",
+    "@floating-ui/dom": "^1.6.13",
+    "@lit/context": "^1.1.2",
+    "@preact/signals-core": "^1.8.0",
+    "@toeverything/theme": "^1.1.12",
+    "@types/lodash-es": "^4.17.12",
+    "lit": "^3.2.0",
+    "lodash-es": "^4.17.21",
+    "minimatch": "^10.0.1",
+    "rxjs": "^7.8.1",
+    "yjs": "^13.6.21",
+    "zod": "^3.23.8"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./effects": "./src/effects.ts"
+  },
+  "files": [
+    "src",
+    "dist",
+    "!src/__tests__",
+    "!dist/__tests__"
+  ],
+  "version": "0.20.0"
+}
diff --git a/blocksuite/affine/gfx/template/src/effects.ts b/blocksuite/affine/gfx/template/src/effects.ts
new file mode 100644
index 0000000000..ace871b2b1
--- /dev/null
+++ b/blocksuite/affine/gfx/template/src/effects.ts
@@ -0,0 +1,20 @@
+import { OverlayScrollbar } from './toolbar/overlay-scrollbar';
+import { AffineTemplateLoading } from './toolbar/template-loading';
+import { EdgelessTemplatePanel } from './toolbar/template-panel';
+import { EdgelessTemplateButton } from './toolbar/template-tool-button';
+
+export function effects() {
+  customElements.define('edgeless-templates-panel', EdgelessTemplatePanel);
+  customElements.define('overlay-scrollbar', OverlayScrollbar);
+  customElements.define('edgeless-template-button', EdgelessTemplateButton);
+  customElements.define('affine-template-loading', AffineTemplateLoading);
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'edgeless-templates-panel': EdgelessTemplatePanel;
+    'overlay-scrollbar': OverlayScrollbar;
+    'edgeless-template-button': EdgelessTemplateButton;
+    'affine-template-loading': AffineTemplateLoading;
+  }
+}
diff --git a/blocksuite/affine/gfx/template/src/index.ts b/blocksuite/affine/gfx/template/src/index.ts
new file mode 100644
index 0000000000..b22daa8d1d
--- /dev/null
+++ b/blocksuite/affine/gfx/template/src/index.ts
@@ -0,0 +1,5 @@
+export * from './services/template.js';
+export * from './template-tool.js';
+export * from './toolbar/senior-tool.js';
+export * from './toolbar/template-panel.js';
+export * from './toolbar/template-type.js';
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/services/template-middlewares.ts b/blocksuite/affine/gfx/template/src/services/template-middlewares.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/services/template-middlewares.ts
rename to blocksuite/affine/gfx/template/src/services/template-middlewares.ts
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/services/template.ts b/blocksuite/affine/gfx/template/src/services/template.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/services/template.ts
rename to blocksuite/affine/gfx/template/src/services/template.ts
diff --git a/blocksuite/affine/gfx/template/src/template-tool.ts b/blocksuite/affine/gfx/template/src/template-tool.ts
new file mode 100644
index 0000000000..fa323dee55
--- /dev/null
+++ b/blocksuite/affine/gfx/template/src/template-tool.ts
@@ -0,0 +1,11 @@
+import { BaseTool } from '@blocksuite/std/gfx';
+
+export class TemplateTool extends BaseTool {
+  static override toolName: string = 'template';
+}
+
+declare module '@blocksuite/std/gfx' {
+  interface GfxToolsMap {
+    template: TemplateTool;
+  }
+}
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/builtin-templates.ts b/blocksuite/affine/gfx/template/src/toolbar/builtin-templates.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/builtin-templates.ts
rename to blocksuite/affine/gfx/template/src/toolbar/builtin-templates.ts
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/cards.ts b/blocksuite/affine/gfx/template/src/toolbar/cards.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/cards.ts
rename to blocksuite/affine/gfx/template/src/toolbar/cards.ts
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/overlay-scrollbar.ts b/blocksuite/affine/gfx/template/src/toolbar/overlay-scrollbar.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/overlay-scrollbar.ts
rename to blocksuite/affine/gfx/template/src/toolbar/overlay-scrollbar.ts
diff --git a/blocksuite/affine/gfx/template/src/toolbar/senior-tool.ts b/blocksuite/affine/gfx/template/src/toolbar/senior-tool.ts
new file mode 100644
index 0000000000..de03795fd8
--- /dev/null
+++ b/blocksuite/affine/gfx/template/src/toolbar/senior-tool.ts
@@ -0,0 +1,13 @@
+import { SeniorToolExtension } from '@blocksuite/affine-widget-edgeless-toolbar';
+import { html } from 'lit';
+
+export const templateSeniorTool = SeniorToolExtension(
+  'template',
+  ({ block }) => {
+    return {
+      name: 'Template',
+      content: html`<edgeless-template-button .edgeless=${block}>
+      </edgeless-template-button>`,
+    };
+  }
+);
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-loading.ts b/blocksuite/affine/gfx/template/src/toolbar/template-loading.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-loading.ts
rename to blocksuite/affine/gfx/template/src/toolbar/template-loading.ts
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-panel.ts b/blocksuite/affine/gfx/template/src/toolbar/template-panel.ts
similarity index 98%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-panel.ts
rename to blocksuite/affine/gfx/template/src/toolbar/template-panel.ts
index bdb6f5c122..74668c0b37 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-panel.ts
+++ b/blocksuite/affine/gfx/template/src/toolbar/template-panel.ts
@@ -22,8 +22,7 @@ import { repeat } from 'lit/directives/repeat.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 
-import { EdgelessRootService } from '../../../edgeless-root-service.js';
-import { createTemplateJob } from '../../../services/template.js';
+import { createTemplateJob } from '../services/template.js';
 import { builtInTemplates } from './builtin-templates.js';
 import { defaultPreview, Triangle } from './cards.js';
 import type { Template } from './template-type.js';
@@ -271,10 +270,6 @@ export class EdgelessTemplatePanel extends WithDisposable(LitElement) {
     });
   }
 
-  get service() {
-    return this.edgeless.std.get(EdgelessRootService);
-  }
-
   get gfx() {
     return this.edgeless.std.get(GfxControllerIdentifier);
   }
@@ -319,6 +314,7 @@ export class EdgelessTemplatePanel extends WithDisposable(LitElement) {
       }
     } finally {
       this._loadingTemplate = null;
+      // @ts-expect-error FIXME: resolve after gfx tool refactor
       this.gfx.tool.setTool('default');
     }
   }
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-tool-button.ts b/blocksuite/affine/gfx/template/src/toolbar/template-tool-button.ts
similarity index 98%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-tool-button.ts
rename to blocksuite/affine/gfx/template/src/toolbar/template-tool-button.ts
index 3d2ed2f51b..4f5997aa2c 100644
--- a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-tool-button.ts
+++ b/blocksuite/affine/gfx/template/src/toolbar/template-tool-button.ts
@@ -138,6 +138,7 @@ export class EdgelessTemplateButton extends EdgelessToolbarToolMixin(
         this.setEdgelessTool(this._prevTool);
         this._prevTool = null;
       } else {
+        // @ts-expect-error FIXME: resolve after gfx tool refactor
         this.setEdgelessTool('default');
       }
     }
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-type.ts b/blocksuite/affine/gfx/template/src/toolbar/template-type.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/template-type.ts
rename to blocksuite/affine/gfx/template/src/toolbar/template-type.ts
diff --git a/blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/utils.ts b/blocksuite/affine/gfx/template/src/toolbar/utils.ts
similarity index 100%
rename from blocksuite/affine/blocks/block-root/src/edgeless/components/toolbar/template/utils.ts
rename to blocksuite/affine/gfx/template/src/toolbar/utils.ts
diff --git a/blocksuite/affine/gfx/template/tsconfig.json b/blocksuite/affine/gfx/template/tsconfig.json
new file mode 100644
index 0000000000..a0e6d24816
--- /dev/null
+++ b/blocksuite/affine/gfx/template/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "outDir": "./dist",
+    "tsBuildInfoFile": "./dist/tsconfig.tsbuildinfo"
+  },
+  "include": ["./src"],
+  "references": [
+    { "path": "../../blocks/block-surface" },
+    { "path": "../../components" },
+    { "path": "../text" },
+    { "path": "../../model" },
+    { "path": "../../rich-text" },
+    { "path": "../../shared" },
+    { "path": "../../widgets/widget-edgeless-toolbar" },
+    { "path": "../../../framework/global" },
+    { "path": "../../../framework/std" },
+    { "path": "../../../framework/store" }
+  ]
+}
diff --git a/blocksuite/integration-test/src/__tests__/edgeless/template.spec.ts b/blocksuite/integration-test/src/__tests__/edgeless/template.spec.ts
index 738a779748..562a922096 100644
--- a/blocksuite/integration-test/src/__tests__/edgeless/template.spec.ts
+++ b/blocksuite/integration-test/src/__tests__/edgeless/template.spec.ts
@@ -2,7 +2,7 @@ import {
   EdgelessTemplatePanel,
   type Template,
   type TemplateManager,
-} from '@blocksuite/affine/blocks/root';
+} from '@blocksuite/affine/gfx/template';
 import { beforeEach, expect, test } from 'vitest';
 
 import { setupEditor } from '../utils/setup.js';
diff --git a/blocksuite/playground/apps/_common/setup.ts b/blocksuite/playground/apps/_common/setup.ts
index f1cbd7c289..42a064d707 100644
--- a/blocksuite/playground/apps/_common/setup.ts
+++ b/blocksuite/playground/apps/_common/setup.ts
@@ -2,8 +2,8 @@ import type {
   Template,
   TemplateCategory,
   TemplateManager,
-} from '@blocksuite/affine/blocks/root';
-import { EdgelessTemplatePanel } from '@blocksuite/affine/blocks/root';
+} from '@blocksuite/affine/gfx/template';
+import { EdgelessTemplatePanel } from '@blocksuite/affine/gfx/template';
 
 export function setupEdgelessTemplate() {
   const playgroundTemplates = [
diff --git a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts
index e8d5820017..e2d2cf525b 100644
--- a/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts
+++ b/packages/frontend/core/src/blocksuite/ai/actions/edgeless-response.ts
@@ -1,9 +1,9 @@
 import { addImages } from '@blocksuite/affine/blocks/image';
-import { createTemplateJob } from '@blocksuite/affine/blocks/root';
 import { getSurfaceBlock } from '@blocksuite/affine/blocks/surface';
 import { LightLoadingIcon } from '@blocksuite/affine/components/icons';
 import { addTree } from '@blocksuite/affine/gfx/mindmap';
 import { fitContent } from '@blocksuite/affine/gfx/shape';
+import { createTemplateJob } from '@blocksuite/affine/gfx/template';
 import { Bound } from '@blocksuite/affine/global/gfx';
 import type {
   MindmapElementModel,
diff --git a/packages/frontend/core/src/blocksuite/ai/actions/page-response.ts b/packages/frontend/core/src/blocksuite/ai/actions/page-response.ts
index 1383c61644..e96d4d5c4d 100644
--- a/packages/frontend/core/src/blocksuite/ai/actions/page-response.ts
+++ b/packages/frontend/core/src/blocksuite/ai/actions/page-response.ts
@@ -1,10 +1,10 @@
 import { uploadBlobForImage } from '@blocksuite/affine/blocks/image';
-import { createTemplateJob } from '@blocksuite/affine/blocks/root';
 import {
   getSurfaceBlock,
   SurfaceBlockModel,
 } from '@blocksuite/affine/blocks/surface';
 import { fitContent } from '@blocksuite/affine/gfx/shape';
+import { createTemplateJob } from '@blocksuite/affine/gfx/template';
 import { Bound, getCommonBound } from '@blocksuite/affine/global/gfx';
 import type {
   MindmapElementModel,
diff --git a/packages/frontend/core/src/blocksuite/ai/slides/index.ts b/packages/frontend/core/src/blocksuite/ai/slides/index.ts
index 94063f44a7..bf2cf6e9b9 100644
--- a/packages/frontend/core/src/blocksuite/ai/slides/index.ts
+++ b/packages/frontend/core/src/blocksuite/ai/slides/index.ts
@@ -1,4 +1,4 @@
-import { createTemplateJob } from '@blocksuite/affine/blocks/root';
+import { createTemplateJob } from '@blocksuite/affine/gfx/template';
 import type { EditorHost } from '@blocksuite/affine/std';
 import { GfxControllerIdentifier } from '@blocksuite/affine/std/gfx';
 import type { BlockSnapshot } from '@blocksuite/affine/store';
diff --git a/packages/frontend/core/src/blocksuite/block-suite-editor/register-templates.ts b/packages/frontend/core/src/blocksuite/block-suite-editor/register-templates.ts
index 2929388af0..69b3ba618d 100644
--- a/packages/frontend/core/src/blocksuite/block-suite-editor/register-templates.ts
+++ b/packages/frontend/core/src/blocksuite/block-suite-editor/register-templates.ts
@@ -3,7 +3,7 @@ import { builtInTemplates as builtInStickersTemplates } from '@affine/templates/
 import {
   EdgelessTemplatePanel,
   type TemplateManager,
-} from '@blocksuite/affine/blocks/root';
+} from '@blocksuite/affine/gfx/template';
 
 export function registerTemplates() {
   EdgelessTemplatePanel.templates.extend(
diff --git a/tools/utils/src/workspace.gen.ts b/tools/utils/src/workspace.gen.ts
index 4c1d380250..ef2968009d 100644
--- a/tools/utils/src/workspace.gen.ts
+++ b/tools/utils/src/workspace.gen.ts
@@ -34,6 +34,7 @@ export const PackageList = [
       'blocksuite/affine/gfx/mindmap',
       'blocksuite/affine/gfx/note',
       'blocksuite/affine/gfx/shape',
+      'blocksuite/affine/gfx/template',
       'blocksuite/affine/gfx/text',
       'blocksuite/affine/gfx/turbo-renderer',
       'blocksuite/affine/inlines/footnote',
@@ -321,6 +322,7 @@ export const PackageList = [
       'blocksuite/affine/gfx/mindmap',
       'blocksuite/affine/gfx/note',
       'blocksuite/affine/gfx/shape',
+      'blocksuite/affine/gfx/template',
       'blocksuite/affine/gfx/text',
       'blocksuite/affine/inlines/latex',
       'blocksuite/affine/inlines/link',
@@ -557,6 +559,22 @@ export const PackageList = [
       'blocksuite/framework/store',
     ],
   },
+  {
+    location: 'blocksuite/affine/gfx/template',
+    name: '@blocksuite/affine-gfx-template',
+    workspaceDependencies: [
+      'blocksuite/affine/blocks/block-surface',
+      'blocksuite/affine/components',
+      'blocksuite/affine/gfx/text',
+      'blocksuite/affine/model',
+      'blocksuite/affine/rich-text',
+      'blocksuite/affine/shared',
+      'blocksuite/affine/widgets/widget-edgeless-toolbar',
+      'blocksuite/framework/global',
+      'blocksuite/framework/std',
+      'blocksuite/framework/store',
+    ],
+  },
   {
     location: 'blocksuite/affine/gfx/text',
     name: '@blocksuite/affine-gfx-text',
@@ -1184,6 +1202,7 @@ export type PackageName =
   | '@blocksuite/affine-gfx-mindmap'
   | '@blocksuite/affine-gfx-note'
   | '@blocksuite/affine-gfx-shape'
+  | '@blocksuite/affine-gfx-template'
   | '@blocksuite/affine-gfx-text'
   | '@blocksuite/affine-gfx-turbo-renderer'
   | '@blocksuite/affine-inline-footnote'
diff --git a/tsconfig.json b/tsconfig.json
index a7a18649c7..593f191c01 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -81,6 +81,7 @@
     { "path": "./blocksuite/affine/gfx/mindmap" },
     { "path": "./blocksuite/affine/gfx/note" },
     { "path": "./blocksuite/affine/gfx/shape" },
+    { "path": "./blocksuite/affine/gfx/template" },
     { "path": "./blocksuite/affine/gfx/text" },
     { "path": "./blocksuite/affine/gfx/turbo-renderer" },
     { "path": "./blocksuite/affine/inlines/footnote" },
diff --git a/yarn.lock b/yarn.lock
index 593088f678..e8ce69898f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2782,6 +2782,7 @@ __metadata:
     "@blocksuite/affine-gfx-mindmap": "workspace:*"
     "@blocksuite/affine-gfx-note": "workspace:*"
     "@blocksuite/affine-gfx-shape": "workspace:*"
+    "@blocksuite/affine-gfx-template": "workspace:*"
     "@blocksuite/affine-gfx-text": "workspace:*"
     "@blocksuite/affine-inline-latex": "workspace:*"
     "@blocksuite/affine-inline-link": "workspace:*"
@@ -3192,6 +3193,35 @@ __metadata:
   languageName: unknown
   linkType: soft
 
+"@blocksuite/affine-gfx-template@workspace:*, @blocksuite/affine-gfx-template@workspace:blocksuite/affine/gfx/template":
+  version: 0.0.0-use.local
+  resolution: "@blocksuite/affine-gfx-template@workspace:blocksuite/affine/gfx/template"
+  dependencies:
+    "@blocksuite/affine-block-surface": "workspace:*"
+    "@blocksuite/affine-components": "workspace:*"
+    "@blocksuite/affine-gfx-text": "workspace:*"
+    "@blocksuite/affine-model": "workspace:*"
+    "@blocksuite/affine-rich-text": "workspace:*"
+    "@blocksuite/affine-shared": "workspace:*"
+    "@blocksuite/affine-widget-edgeless-toolbar": "workspace:*"
+    "@blocksuite/global": "workspace:*"
+    "@blocksuite/icons": "npm:^2.2.10"
+    "@blocksuite/std": "workspace:*"
+    "@blocksuite/store": "workspace:*"
+    "@floating-ui/dom": "npm:^1.6.13"
+    "@lit/context": "npm:^1.1.2"
+    "@preact/signals-core": "npm:^1.8.0"
+    "@toeverything/theme": "npm:^1.1.12"
+    "@types/lodash-es": "npm:^4.17.12"
+    lit: "npm:^3.2.0"
+    lodash-es: "npm:^4.17.21"
+    minimatch: "npm:^10.0.1"
+    rxjs: "npm:^7.8.1"
+    yjs: "npm:^13.6.21"
+    zod: "npm:^3.23.8"
+  languageName: unknown
+  linkType: soft
+
 "@blocksuite/affine-gfx-text@workspace:*, @blocksuite/affine-gfx-text@workspace:blocksuite/affine/gfx/text":
   version: 0.0.0-use.local
   resolution: "@blocksuite/affine-gfx-text@workspace:blocksuite/affine/gfx/text"
@@ -3709,6 +3739,7 @@ __metadata:
     "@blocksuite/affine-gfx-mindmap": "workspace:*"
     "@blocksuite/affine-gfx-note": "workspace:*"
     "@blocksuite/affine-gfx-shape": "workspace:*"
+    "@blocksuite/affine-gfx-template": "workspace:*"
     "@blocksuite/affine-gfx-text": "workspace:*"
     "@blocksuite/affine-gfx-turbo-renderer": "workspace:*"
     "@blocksuite/affine-inline-footnote": "workspace:*"