diff --git a/blocksuite/playground/examples/basic/edgeless/main.ts b/blocksuite/playground/examples/basic/edgeless/main.ts
index f3e3d6c835..0f8e2b6c4b 100644
--- a/blocksuite/playground/examples/basic/edgeless/main.ts
+++ b/blocksuite/playground/examples/basic/edgeless/main.ts
@@ -1,9 +1,14 @@
 import '../../../style.css';
 
+import { effects as blocksEffects } from '@blocksuite/blocks/effects';
 import { EdgelessEditor } from '@blocksuite/presets';
+import { effects as presetsEffects } from '@blocksuite/presets/effects';
 
 import { createEmptyDoc } from '../../../apps/_common/helper';
 
+blocksEffects();
+presetsEffects();
+
 const doc = createEmptyDoc().init();
 const editor = new EdgelessEditor();
 editor.doc = doc;
diff --git a/blocksuite/playground/examples/basic/page/main.ts b/blocksuite/playground/examples/basic/page/main.ts
index 78907cc15c..8fd32baa6d 100644
--- a/blocksuite/playground/examples/basic/page/main.ts
+++ b/blocksuite/playground/examples/basic/page/main.ts
@@ -1,10 +1,15 @@
 import '../../../style.css';
 
+import { effects as blocksEffects } from '@blocksuite/blocks/effects';
 import { PageEditor } from '@blocksuite/presets';
+import { effects as presetsEffects } from '@blocksuite/presets/effects';
 import { Text } from '@blocksuite/store';
 
 import { createEmptyDoc } from '../../../apps/_common/helper';
 
+blocksEffects();
+presetsEffects();
+
 const doc = createEmptyDoc().init();
 const editor = new PageEditor();
 editor.doc = doc;
diff --git a/blocksuite/playground/examples/multiple-editors/edgeless-edgeless/main.ts b/blocksuite/playground/examples/multiple-editors/edgeless-edgeless/main.ts
index 8dda565c32..79d8c3368f 100644
--- a/blocksuite/playground/examples/multiple-editors/edgeless-edgeless/main.ts
+++ b/blocksuite/playground/examples/multiple-editors/edgeless-edgeless/main.ts
@@ -1,9 +1,14 @@
 import '../../../style.css';
 
+import { effects as blocksEffects } from '@blocksuite/blocks/effects';
 import { EdgelessEditor } from '@blocksuite/presets';
+import { effects as presetsEffects } from '@blocksuite/presets/effects';
 
 import { createEmptyDoc } from '../../../apps/_common/helper';
 
+blocksEffects();
+presetsEffects();
+
 const container = document.createElement('div');
 container.style.display = 'flex';
 container.style.height = '100%';
diff --git a/blocksuite/playground/examples/multiple-editors/page-edgeless/main.ts b/blocksuite/playground/examples/multiple-editors/page-edgeless/main.ts
index 628cd0ed7a..6c1138ddbe 100644
--- a/blocksuite/playground/examples/multiple-editors/page-edgeless/main.ts
+++ b/blocksuite/playground/examples/multiple-editors/page-edgeless/main.ts
@@ -1,9 +1,14 @@
 import '../../../style.css';
 
+import { effects as blocksEffects } from '@blocksuite/blocks/effects';
 import { EdgelessEditor, PageEditor } from '@blocksuite/presets';
+import { effects as presetsEffects } from '@blocksuite/presets/effects';
 
 import { createEmptyDoc } from '../../../apps/_common/helper';
 
+blocksEffects();
+presetsEffects();
+
 const container = document.createElement('div');
 container.style.display = 'flex';
 container.style.height = '100%';
diff --git a/blocksuite/playground/examples/multiple-editors/page-page/main.ts b/blocksuite/playground/examples/multiple-editors/page-page/main.ts
index d1a33d0923..d53998a7f6 100644
--- a/blocksuite/playground/examples/multiple-editors/page-page/main.ts
+++ b/blocksuite/playground/examples/multiple-editors/page-page/main.ts
@@ -1,9 +1,14 @@
 import '../../../style.css';
 
+import { effects as blocksEffects } from '@blocksuite/blocks/effects';
 import { PageEditor } from '@blocksuite/presets';
+import { effects as presetsEffects } from '@blocksuite/presets/effects';
 
 import { createEmptyDoc } from '../../../apps/_common/helper';
 
+blocksEffects();
+presetsEffects();
+
 const container = document.createElement('div');
 container.style.display = 'flex';
 container.style.height = '100%';