diff --git a/blocksuite/playground/examples/renderer/doc-generator.ts b/blocksuite/playground/examples/renderer/doc-generator.ts
new file mode 100644
index 0000000000..551b579455
--- /dev/null
+++ b/blocksuite/playground/examples/renderer/doc-generator.ts
@@ -0,0 +1,42 @@
+import { Text } from '@blocksuite/store';
+
+import { doc } from './editor.js';
+
+function addParagraph(noteId: string, content: string) {
+  const props = { text: new Text(content) };
+  doc.addBlock('affine:paragraph', props, noteId);
+}
+
+function addSampleNote(noteId: string, i: number) {
+  addParagraph(noteId, `Note ${i + 1}`);
+  addParagraph(noteId, 'Hello World!');
+  addParagraph(
+    noteId,
+    'Hello World! Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Sed do eiusmod tempor incididunt.'
+  );
+  addParagraph(
+    noteId,
+    '你好这是测试，这是一个为了换行而写的中文段落。这个段落会自动换行。'
+  );
+}
+
+export function addSampleNotes(n: number) {
+  const cols = Math.ceil(Math.sqrt(n));
+  const NOTE_WIDTH = 500;
+  const NOTE_HEIGHT = 250;
+  const SPACING = 50;
+
+  const rootId = doc.addBlock('affine:page', {});
+  doc.addBlock('affine:surface', {}, rootId);
+
+  for (let i = 0; i < n; i++) {
+    const row = Math.floor(i / cols);
+    const col = i % cols;
+    const x = col * (NOTE_WIDTH + SPACING);
+    const y = row * (NOTE_HEIGHT + SPACING);
+
+    const xywh = `[${x},${y},${NOTE_WIDTH},${NOTE_HEIGHT}]`;
+    const noteId = doc.addBlock('affine:note', { xywh }, rootId);
+    addSampleNote(noteId, i);
+  }
+}
diff --git a/blocksuite/playground/examples/renderer/editor.ts b/blocksuite/playground/examples/renderer/editor.ts
index 192f163a1b..02a577ce0c 100644
--- a/blocksuite/playground/examples/renderer/editor.ts
+++ b/blocksuite/playground/examples/renderer/editor.ts
@@ -10,9 +10,9 @@ import { createEmptyDoc } from '../../apps/_common/helper';
 blocksEffects();
 presetsEffects();
 
-export const doc = createEmptyDoc().init();
+export const { doc } = createEmptyDoc();
 export const editor = new AffineEditorContainer();
-editor.pageSpecs = [...editor.pageSpecs, ViewportTurboRendererExtension];
+
 editor.edgelessSpecs = [
   ...editor.edgelessSpecs,
   ViewportTurboRendererExtension,
diff --git a/blocksuite/playground/examples/renderer/main.ts b/blocksuite/playground/examples/renderer/main.ts
index f31b49bc83..399bc75777 100644
--- a/blocksuite/playground/examples/renderer/main.ts
+++ b/blocksuite/playground/examples/renderer/main.ts
@@ -1,27 +1,10 @@
-import { Text } from '@blocksuite/store';
-
+import { addSampleNotes } from './doc-generator.js';
 import { doc, editor } from './editor.js';
 
-function addParagraph(content: string) {
-  const note = doc.getBlocksByFlavour('affine:note')[0];
-  const props = {
-    text: new Text(content),
-  };
-  doc.addBlock('affine:paragraph', props, note.id);
-}
-
 function main() {
-  document.querySelector('#container')?.append(editor);
-  const firstParagraph = doc.getBlockByFlavour('affine:paragraph')[0];
-  doc.updateBlock(firstParagraph, { text: new Text('Renderer') });
-
-  addParagraph('Hello World!');
-  addParagraph(
-    'Hello World! Lorem ipsum dolor sit amet. Consectetur adipiscing elit. Sed do eiusmod tempor incididunt.'
-  );
-  addParagraph(
-    '你好这是测试，这是一个为了换行而写的中文段落。这个段落会自动换行。'
-  );
+  doc.load();
+  addSampleNotes(6);
 }
 
 main();
+document.querySelector('#container')?.append(editor);