diff --git a/blocksuite/affine/gfx/turbo-renderer/src/turbo-renderer.ts b/blocksuite/affine/gfx/turbo-renderer/src/turbo-renderer.ts
index c28f7aa201..7f043c4b7c 100644
--- a/blocksuite/affine/gfx/turbo-renderer/src/turbo-renderer.ts
+++ b/blocksuite/affine/gfx/turbo-renderer/src/turbo-renderer.ts
@@ -1,14 +1,11 @@
+import { ConfigExtensionFactory } from '@blocksuite/block-std';
 import {
-  ConfigExtensionFactory,
-  LifeCycleWatcher,
-  LifeCycleWatcherIdentifier,
-  StdIdentifier,
-} from '@blocksuite/block-std';
-import {
-  GfxControllerIdentifier,
+  type GfxController,
+  GfxExtension,
+  GfxExtensionIdentifier,
   type GfxViewportElement,
 } from '@blocksuite/block-std/gfx';
-import type { Container, ServiceIdentifier } from '@blocksuite/global/di';
+import type { Container } from '@blocksuite/global/di';
 import { createIdentifier } from '@blocksuite/global/di';
 import { DisposableGroup } from '@blocksuite/global/disposable';
 import debounce from 'lodash-es/debounce';
@@ -45,7 +42,9 @@ export const BlockPainterConfigIdentifier =
 export const TurboRendererConfigFactory =
   ConfigExtensionFactory<TurboRendererConfig>('viewport-turbo-renderer');
 
-export class ViewportTurboRendererExtension extends LifeCycleWatcher {
+export class ViewportTurboRendererExtension extends GfxExtension {
+  static override key = 'viewportTurboRenderer';
+
   public state: RenderingState = 'inactive';
   public readonly canvas: HTMLCanvasElement = document.createElement('canvas');
   private readonly worker: Worker = new Worker(workerUrl, { type: 'module' });
@@ -55,8 +54,16 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
   private bitmap: ImageBitmap | null = null;
   private viewportElement: GfxViewportElement | null = null;
 
+  static override extendGfx(gfx: GfxController) {
+    Object.defineProperty(gfx, 'turboRenderer', {
+      get() {
+        return gfx.std.get(ViewportTurboRendererIdentifier);
+      },
+    });
+  }
+
   static override setup(di: Container) {
-    di.addImpl(ViewportTurboRendererIdentifier, this, [StdIdentifier]);
+    super.setup(di);
   }
 
   get options(): RendererOptions {
@@ -135,10 +142,6 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
     this.setState('inactive');
   }
 
-  get gfx() {
-    return this.std.get(GfxControllerIdentifier);
-  }
-
   get viewport() {
     return this.gfx.viewport;
   }
@@ -357,6 +360,6 @@ export class ViewportTurboRendererExtension extends LifeCycleWatcher {
   }
 }
 
-export const ViewportTurboRendererIdentifier = LifeCycleWatcherIdentifier(
-  'ViewportTurboRenderer'
-) as ServiceIdentifier<ViewportTurboRendererExtension>;
+export const ViewportTurboRendererIdentifier = GfxExtensionIdentifier(
+  'viewportTurboRenderer'
+);
diff --git a/blocksuite/integration-test/src/__tests__/utils/renderer-entry.ts b/blocksuite/integration-test/src/__tests__/utils/renderer-entry.ts
index f0e182299b..9fe51b3719 100644
--- a/blocksuite/integration-test/src/__tests__/utils/renderer-entry.ts
+++ b/blocksuite/integration-test/src/__tests__/utils/renderer-entry.ts
@@ -26,7 +26,9 @@ async function init() {
   addSampleNotes(doc, 100);
   doc.load();
 
-  const renderer = editor.std.get(ViewportTurboRendererIdentifier);
+  const renderer = editor.std.get(
+    ViewportTurboRendererIdentifier
+  ) as ViewportTurboRendererExtension;
   window.renderer = renderer;
 }