diff --git a/src/components/editor.tsx b/src/components/editor.tsx
new file mode 100644
index 0000000000..0ed37de6b9
--- /dev/null
+++ b/src/components/editor.tsx
@@ -0,0 +1,28 @@
+import type { EditorContainer } from '@blocksuite/editor';
+import '@blocksuite/blocks';
+import '@blocksuite/editor';
+import '@blocksuite/blocks/style';
+
+export const Editor = () => {
+  return (
+    <div>
+      Editor
+      <editor-container />
+    </div>
+  );
+};
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'editor-container': EditorContainer;
+  }
+
+  namespace JSX {
+    interface IntrinsicElements {
+      // TODO fix type error
+      'editor-container': any; // EditorContainer
+    }
+  }
+}
+
+export default Editor;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 4bda97e6c9..2720644a23 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,5 +1,7 @@
 import type { NextPage } from 'next';
+import dynamic from 'next/dynamic';
 import { styled, useTheme } from '@/styles';
+
 import '@/components/simple-counter';
 
 const Button = styled('div')(({ theme }) => {
@@ -8,6 +10,11 @@ const Button = styled('div')(({ theme }) => {
   };
 });
 
+const DynamicEditor = dynamic(() => import('../components/editor'), {
+  loading: () => <div>Loading...</div>,
+  ssr: false,
+});
+
 const Home: NextPage = () => {
   const { changeMode, mode } = useTheme();
   return (
@@ -36,6 +43,7 @@ const Home: NextPage = () => {
       >
         auto
       </button>
+      <DynamicEditor />
     </div>
   );
 };