diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/tests/DocumentTestHelper.ts b/frontend/appflowy_tauri/src/appflowy_app/components/tests/DocumentTestHelper.ts
new file mode 100644
index 0000000000..f05220df94
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/tests/DocumentTestHelper.ts
@@ -0,0 +1,10 @@
+import { ViewLayoutTypePB, WorkspaceSettingPB } from '../../../services/backend';
+import { FolderEventReadCurrentWorkspace } from '../../../services/backend/events/flowy-folder';
+import { AppBackendService } from '../../stores/effects/folder/app/app_bd_svc';
+
+export async function createTestDocument() {
+  const workspaceSetting: WorkspaceSettingPB = await FolderEventReadCurrentWorkspace().then((result) => result.unwrap());
+  const app = workspaceSetting.workspace.apps.items[0];
+  const appService = new AppBackendService(app.id);
+  return await appService.createView({ name: 'New Document', layoutType: ViewLayoutTypePB.Document });
+}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/tests/TestAPI.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/tests/TestAPI.tsx
index c86960c881..464fdbf959 100644
--- a/frontend/appflowy_tauri/src/appflowy_app/components/tests/TestAPI.tsx
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/tests/TestAPI.tsx
@@ -21,6 +21,7 @@ import {
   TestMoveKanbanBoardColumn,
   TestMoveKanbanBoardRow,
 } from './TestGroup';
+import { TestCreateDocument } from './TestDocument';
 
 export const TestAPI = () => {
   return (
@@ -46,6 +47,7 @@ export const TestAPI = () => {
         <TestMoveKanbanBoardRow></TestMoveKanbanBoardRow>
         <TestMoveKanbanBoardColumn></TestMoveKanbanBoardColumn>
         <TestCreateKanbanBoardColumn></TestCreateKanbanBoardColumn>
+        <TestCreateDocument></TestCreateDocument>
       </ul>
     </React.Fragment>
   );
diff --git a/frontend/appflowy_tauri/src/appflowy_app/components/tests/TestDocument.tsx b/frontend/appflowy_tauri/src/appflowy_app/components/tests/TestDocument.tsx
new file mode 100644
index 0000000000..aad7621e36
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/components/tests/TestDocument.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { createTestDocument } from './DocumentTestHelper';
+import { DocumentBackendService } from '../../stores/effects/document/document_bd_svc';
+
+async function testCreateDocument() {
+  const view = await createTestDocument();
+  const svc = new DocumentBackendService(view.id);
+  const document = await svc.open().then((result) => result.unwrap());
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const content = JSON.parse(document.content);
+  // The initial document content:
+  // {
+  //   "document": {
+  //   "type": "editor",
+  //     "children": [
+  //     {
+  //       "type": "text"
+  //     }
+  //   ]
+  // }
+  // }
+  await svc.close();
+}
+
+export const TestCreateDocument = () => {
+  return TestButton('Test create document', testCreateDocument);
+};
+
+const TestButton = (title: string, onClick: () => void) => {
+  return (
+    <React.Fragment>
+      <div>
+        <button className='rounded-md bg-purple-400 p-4' type='button' onClick={() => onClick()}>
+          {title}
+        </button>
+      </div>
+    </React.Fragment>
+  );
+};
diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/document/document_bd_svc.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/document/document_bd_svc.ts
new file mode 100644
index 0000000000..3918de746d
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/document/document_bd_svc.ts
@@ -0,0 +1,30 @@
+import {
+  DocumentDataPB,
+  DocumentVersionPB,
+  EditPayloadPB,
+  FlowyError,
+  OpenDocumentPayloadPB,
+  ViewIdPB,
+} from '../../../../services/backend';
+import { DocumentEventApplyEdit, DocumentEventGetDocument } from '../../../../services/backend/events/flowy-document';
+import { Result } from 'ts-results';
+import { FolderEventCloseView } from '../../../../services/backend/events/flowy-folder';
+
+export class DocumentBackendService {
+  constructor(public readonly viewId: string) {}
+
+  open = (): Promise<Result<DocumentDataPB, FlowyError>> => {
+    const payload = OpenDocumentPayloadPB.fromObject({ document_id: this.viewId, version: DocumentVersionPB.V1 });
+    return DocumentEventGetDocument(payload);
+  };
+
+  applyEdit = (operations: string) => {
+    const payload = EditPayloadPB.fromObject({ doc_id: this.viewId, operations: operations });
+    return DocumentEventApplyEdit(payload);
+  };
+
+  close = () => {
+    const payload = ViewIdPB.fromObject({ value: this.viewId });
+    return FolderEventCloseView(payload);
+  };
+}
diff --git a/frontend/appflowy_tauri/src/appflowy_app/stores/effects/document/entities.ts b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/document/entities.ts
new file mode 100644
index 0000000000..8ea0a151d3
--- /dev/null
+++ b/frontend/appflowy_tauri/src/appflowy_app/stores/effects/document/entities.ts
@@ -0,0 +1 @@
+export class Document {}