From 4ea3eca9388fd938ea1e078f97bb5e7d2b89bd0d Mon Sep 17 00:00:00 2001
From: Zixuan Chen <remch183@outlook.com>
Date: Wed, 30 Apr 2025 11:37:24 +0800
Subject: [PATCH 1/2] docs: add intro for loro-inspector

---
 README.md | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 49822f47c..dd1e878ee 100644
--- a/README.md
+++ b/README.md
@@ -70,11 +70,11 @@ Loro is a [CRDTs(Conflict-free Replicated Data Types)](https://crdt.tech/) libra
 - 🚀 [Fast Document Loading](https://loro.dev/blog/v1.0)
 - ⏱️ Fast [Time Travel](https://loro.dev/docs/tutorial/time_travel) Through History
 - 🏛️ [Version Control with Real-Time Collaboration](https://loro.dev/blog/v1.0#version-control)
-- 📦 [Shallow Snapshot](https://loro.dev/docs/advanced/shallow_snapshot) that Works like Git Shallow Clone 
+- 📦 [Shallow Snapshot](https://loro.dev/docs/advanced/shallow_snapshot) that Works like Git Shallow Clone
 
 https://github.com/user-attachments/assets/68e0017a-4987-4f71-b2cf-4ed28a210987
 
-> In this example, we demonstrate importing an entire Loro codebase into a Loro-powered 
+> In this example, we demonstrate importing an entire Loro codebase into a Loro-powered
 > version controller, preserving the complete Git DAG history while enabling fast version switching.
 
 # Example
@@ -82,21 +82,21 @@ https://github.com/user-attachments/assets/68e0017a-4987-4f71-b2cf-4ed28a210987
 [![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/loro-basic-test?file=test%2Floro-sync.test.ts)
 
 ```ts
-import { expect, test } from 'vitest';
-import { LoroDoc, LoroList } from 'loro-crdt';
+import { expect, test } from "vitest";
+import { LoroDoc, LoroList } from "loro-crdt";
 
-test('sync example', () => {
+test("sync example", () => {
   // Sync two docs with two rounds of exchanges
 
   // Initialize document A
   const docA = new LoroDoc();
-  const listA: LoroList = docA.getList('list');
-  listA.insert(0, 'A');
-  listA.insert(1, 'B');
-  listA.insert(2, 'C');
+  const listA: LoroList = docA.getList("list");
+  listA.insert(0, "A");
+  listA.insert(1, "B");
+  listA.insert(2, "C");
 
   // Export all updates from docA
-  const bytes: Uint8Array = docA.export({ mode: 'update' });
+  const bytes: Uint8Array = docA.export({ mode: "update" });
 
   // Simulate sending `bytes` across the network to another peer, B
 
@@ -106,18 +106,18 @@ test('sync example', () => {
 
   // B's state matches A's state
   expect(docB.toJSON()).toStrictEqual({
-    list: ['A', 'B', 'C'],
+    list: ["A", "B", "C"],
   });
 
   // Get the current version of docB
   const version = docB.oplogVersion();
 
   // Simulate editing at B: delete item 'B'
-  const listB: LoroList = docB.getList('list');
+  const listB: LoroList = docB.getList("list");
   listB.delete(1, 1);
 
   // Export the updates from B since the last sync point
-  const bytesB: Uint8Array = docB.export({ mode: 'update', from: version });
+  const bytesB: Uint8Array = docB.export({ mode: "update", from: version });
 
   // Simulate sending `bytesB` back across the network to A
 
@@ -126,11 +126,15 @@ test('sync example', () => {
 
   // A has the same state as B
   expect(docA.toJSON()).toStrictEqual({
-    list: ['A', 'C'],
+    list: ["A", "C"],
   });
 });
 ```
 
+https://github.com/user-attachments/assets/1087d5be-3011-4ce5-9088-889a1901ad55
+
+> You can use [Loro inspector](https://inspector.loro.dev) to inspect the state and the history of a Loro docuemnt
+
 # Blog
 
 - [Loro 1.0](https://loro.dev/blog/v1.0)
@@ -147,7 +151,6 @@ Loro draws inspiration from the innovative work of the following projects and in
 - [Yjs](https://github.com/yjs/yjs): We have incorporated a similar algorithm for effectively merging collaborative editing operations, thanks to their pioneering work.
 - [Matthew Weidner](https://mattweidner.com/): His work on the [Fugue](https://arxiv.org/abs/2305.00583) algorithm has been invaluable, enhancing our text editing capabilities.
 - [Martin Kleppmann](https://martin.kleppmann.com/): His work on CRDTs has significantly influenced our comprehension of the field.
- 
 
 [local-first]: https://www.inkandswitch.com/local-first/
 [Fugue]: https://arxiv.org/abs/2305.00583

From 36ef662ebc7a5c41681d532f65f7ea47a87a1f17 Mon Sep 17 00:00:00 2001
From: Zixuan Chen <remch183@outlook.com>
Date: Wed, 30 Apr 2025 11:47:25 +0800
Subject: [PATCH 2/2] docs: refine structure

---
 README.md | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/README.md b/README.md
index dd1e878ee..89301bdc3 100644
--- a/README.md
+++ b/README.md
@@ -131,9 +131,14 @@ test("sync example", () => {
 });
 ```
 
-https://github.com/user-attachments/assets/1087d5be-3011-4ce5-9088-889a1901ad55
+# DevTools
+
+## Loro Inspector
+
+You can use the [Loro Inspector](https://inspector.loro.dev) to inspect the state and history of a Loro document.
+
+https://github.com/user-attachments/assets/ceeb7450-80ce-42f2-aef4-2e08fa2d1f1b
 
-> You can use [Loro inspector](https://inspector.loro.dev) to inspect the state and the history of a Loro docuemnt
 
 # Blog