https://github.com/loro-dev/loro-inspector
A developer tool for inspecting Loro document state and history
https://github.com/loro-dev/loro-inspector
Last synced: 4 months ago
JSON representation
A developer tool for inspecting Loro document state and history
- Host: GitHub
- URL: https://github.com/loro-dev/loro-inspector
- Owner: loro-dev
- License: mit
- Created: 2025-04-29T03:10:31.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-21T14:48:18.000Z (12 months ago)
- Last Synced: 2025-10-13T03:34:35.048Z (8 months ago)
- Language: TypeScript
- Homepage: https://inspector.loro.dev
- Size: 2.7 MB
- Stars: 12
- Watchers: 2
- Forks: 3
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
#  Loro Inspector
A developer tool for inspecting Loro document state and history.
Try it out at [inspector.loro.dev](https://inspector.loro.dev/).
https://github.com/user-attachments/assets/1087d5be-3011-4ce5-9088-889a1901ad55
## What is Loro Inspector?
Loro Inspector is a web-based tool that allows you to examine the internal state
of Loro CRDT documents. With it, you can:
- View the current document state
- Explore document history
- Visualize the Directed Acyclic Graph (DAG) of changes
- Navigate through time to see how the document evolved
## Features
- **File Import**: Analyze Loro document files by drag-and-drop
- **Text Import**: Import documents from pasted text content (base64, JSON, or plain text)
- **Document State View**: Inspect the current state of your Loro document
- **History Timeline**: Navigate through the document's history
- **DAG Visualization**: View the directed acyclic graph of document changes
## Getting Started
### Running Locally
1. Clone the repository
```
git clone https://github.com/loro-dev/loro-inspector.git
```
2. Install dependencies
```
cd loro-inspector
pnpm install
```
3. Start the development server
```
pnpm dev
```
4. Open your browser and navigate to `http://localhost:5173`
## Usage
1. Import a Loro document using one of these methods:
- **File Upload**: Drag and drop a Loro document file onto the dropzone
- **Text Import**: Switch to "Text Import" tab and paste:
- Base64 encoded Loro updates/snapshots
- JSON updates from `doc.exportJsonUpdates(...)`
- **Example**: Click "Try Example Document" to load the included sample
2. Use the tabs to switch between different views:
- **State**: View the current document state
- **History**: Explore the document's edit history
- **DAG**: Visualize the document's change graph
3. In the State view, use the timeline slider to navigate through different
versions of the document.
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
## License
This project is licensed under the MIT License - see the LICENSE file for
details.