Status 2025-06-16 : Mostly stable, just added various bugfixes & small new features. Nearly ready for proper use. Has (untried) INTEGRATION.md for sticking it in other apps.
If you recognise the general design or even created the logo yourself, please let me know so I can acknowledge. Atuin is all-new code but based heavily on someone else's design from years ago. Alas I forget who, and I didn't see a ref in the original code I have.
My motivation is to use it in Semem, an agent memory thing I'm working on that will need seriously cluster-capable visualization of RDF graphs.
The following mostly written by my colleagues Claude and GitHub Copilot. Be warned, reality isn't their first language. Proper docs may appear in finite time.
Atuin is a web-based editor for Turtle RDF files with an integrated graph visualization, and SPARQL with the ability to query remote stores. This modern implementation uses vanilla JavaScript with ES modules (ESM), providing a clean, modular architecture. It is tested with Vitest and uses the evb event bus for decoupled communication between components.
- Turtle & SPARQL syntax editing with syntax highlighting
- Remote SPARQL store querying
- Real-time RDF graph visualization
- Visual node and edge manipulation
- Syntax validation
- Graph clustering for large datasets
- Options to hide standard vocabulary nodes (RDF, RDFS, OWL)
- Responsive split-pane layout
- Reusable UI components for easy integration:
- SPARQL endpoint management
- Query clips for saving and reusing common queries
- Node.js (v14 or later)
- npm (v6 or later)
- Clone this repository
git clone https://github.com/danja/atuin.git
cd atuin- Install dependencies (including the local evb event bus library)
npm install- Start the development server
npm run dev- Open your browser at http://localhost:9000
To create a production build:
npm run buildThe built files will be in the dist directory.
- Enter or paste Turtle RDF content in the editor pane
- Syntax validation runs automatically
- The graph visualization updates in real-time
- Click on nodes in the graph to highlight their references in the editor
- Use the toolbar controls to:
- Toggle split view
- Hide/show standard vocabulary nodes
- Freeze/unfreeze the graph physics
- Add/remove clustering
atuin/
├── src/
│ ├── js/
│ │ ├── core/ # Core functionality
│ │ ├── services/ # Helper services
│ │ ├── utils/ # Utility functions
│ │ ├── ui/ # UI components
│ │ └── main.js # App entry point
│ ├── css/ # Stylesheets
│ ├── html/ # HTML templates
│ └── img/ # Images and icons
├── test/ # Test files
├── dist/ # Build output
├── webpack.config.js # Webpack configuration
├── package.json # Project dependencies
└── README.md # This file
- Vanilla JavaScript (ES Modules)
- CodeMirror 6 (editor)
- vis-network (graph visualization)
- N3.js (RDF parsing)
- Webpack (bundling)
- Vitest (testing)
- JSDoc (documentation)
- evb (event bus)
Atuin uses the evb event bus library for loose coupling between components to simplify reuse. This architectural pattern provides several benefits:
- Modular components: Each component operates independently and communicates through events
- Easy testing: Components can be tested in isolation with mock event handlers
- Flexible reuse: Components can be reused in different contexts without modification
- Maintainable code: Clear separation of concerns with event-driven communication
Key event patterns used throughout the application:
EVENTS.MODEL_SYNCED: When RDF content changes in the editorEVENTS.ENDPOINT_UPDATED: When SPARQL endpoint configuration changesEVENTS.SPARQL_QUERY_COMPLETED: When SPARQL queries finish execution
This project uses Vitest for unit and integration tests. To run the tests:
npx vitest runThe test suite covers core logic, utilities, and integration between the editor and graph visualizer.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.