A modern, React-based RDF/Turtle editor and graph visualizer built with TypeScript, featuring real-time graph visualization, SPARQL querying, and format conversion.
- RDF/Turtle Editing: Syntax-highlighted editor with support for Turtle, RDF/XML, JSON-LD, and DOT formats
- Graph Visualization: Real-time graph rendering using Graphviz with interactive pan/zoom
- SPARQL Queries: Execute SPARQL SELECT, CONSTRUCT, DESCRIBE, and ASK queries
- Format Conversion: Convert between RDF formats (Turtle ↔ RDF/XML ↔ JSON-LD)
- File Operations: Load/save files locally and from URLs with CORS handling
- Modern UI: Responsive, dark-themed interface built with React
- Type Safety: Full TypeScript coverage for better development experience
- Frontend: React 18 + TypeScript + Vite
- State Management: React Context API with useReducer
- Editor: Ace Editor with syntax highlighting
- Visualization: Viz.js/Graphviz for graph rendering
- RDF Processing: RDF-Ext + N3.js for parsing
- Styling: Modern CSS with CSS Modules
- Development: ESLint + Prettier + TypeScript
src/
├── components/
│ ├── layout/ # Layout components (Header, MainLayout)
│ ├── editor/ # Editor components (EditorPane, Toolbar, AceEditor)
│ └── graph/ # Graph components (GraphPane, Visualization, SPARQL)
├── services/ # Business logic
│ ├── rdf-parser.ts # RDF parsing and format detection
│ ├── graph-generator.ts # DOT graph generation from RDF
│ ├── sparql-engine.ts # SPARQL query execution
│ └── file-handler.ts # File I/O and URL operations
├── store/ # State management
│ └── AppProvider.tsx # React Context + useReducer
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
The application uses React Context with useReducer for predictable state management:
- Editor State: Content, language, theme, loading status
- Graph State: DOT text, SVG output, visualization options
- RDF State: Parsed quads, subjects, prefixes, selections
- SPARQL State: Query text, results, execution status
- Node.js 18+ and npm/yarn
- Modern browser with ES2020 support
# Install dependencies
npm install
# Start development server
npm run dev
# Build for production
npm run build
# Preview production build
npm run preview# Type check
npm run type-check
# Lint code
npm run lint
# Format code
npx prettier --write .-
Load RDF Data:
- Paste Turtle/RDF content into the editor
- Upload a local RDF file
- Load from URL (CORS permitting)
-
Parse and Visualize:
- Click "Get All" to extract subjects
- Select subjects from the dropdown
- View the generated graph visualization
-
Query with SPARQL:
- Write SPARQL queries in the bottom panel
- Execute queries against the loaded RDF data
- View results in tabular format
-
Export Results:
- Download the edited RDF content
- Save graph visualizations as SVG/PNG
- Export SPARQL results
Load content directly via URL parameters:
?dot=<url>- Load DOT or Turtle file from URL?rdfa=<url>- Extract RDFa from HTML page
Example:
https://yoursite.com/turtle-editor-viewer/?dot=https://example.com/data.ttl
| Format | Extension | MIME Type | Description |
|---|---|---|---|
| Turtle | .ttl |
text/turtle |
Terse RDF Triple Language |
| RDF/XML | .rdf, .xml |
application/rdf+xml |
RDF XML serialization |
| JSON-LD | .json, .jsonld |
application/ld+json |
JSON for Linked Data |
| DOT | .dot |
text/plain |
Graphviz DOT language |
- Engine: Choose Graphviz layout engine (dot, circo, fdp, neato, osage, twopi)
- Format: Output format (SVG, PNG, JSON, XDOT, plain, PS)
- Layout Direction: Graph orientation (LR, RL, TB, BT)
- Display Options: Show/hide prefixes, types, subjects
- Language: Syntax highlighting mode (turtle, xml, javascript, dot)
- Theme: Color scheme (cobalt, dawn, eclipse, github)
- Features: Line numbers, code folding, auto-completion
This React/TypeScript version replaces the original vanilla JavaScript implementation with:
- Type Safety: Full TypeScript coverage prevents runtime errors
- Component Architecture: Modular, reusable React components
- Modern Tooling: Vite for fast development and optimized builds
- State Management: Predictable state with React Context
- Error Handling: Proper error boundaries and user feedback
- Performance: Code splitting and optimizations
- Developer Experience: Hot reload, linting, and debugging tools
- ✅ Maintainable codebase with clear separation of concerns
- ✅ Type-safe RDF operations and graph generation
- ✅ Modern development workflow with hot reload
- ✅ Responsive UI that works on all devices
- ✅ Extensible architecture for future features
- ✅ Comprehensive error handling and loading states
The codebase follows modern React patterns:
// Type-safe RDF operations
const parser = new RDFParser()
const result = await parser.parseRDF(content, 'turtle')
// Component with proper typing
interface EditorProps {
value: string
onChange: (value: string) => void
language: EditorLanguage
}
// State management with context
const { state, dispatch } = useAppContext()
dispatch({ type: 'SET_EDITOR_CONTENT', payload: content })The application uses custom hooks for complex operations:
useAppContext()- Access global application stateuseRDFParser()- RDF parsing with cachinguseGraphGenerator()- DOT generation from RDF data
Business logic is separated into services:
- RDFParser: Handles all RDF format parsing
- GraphGenerator: Creates DOT graphs from RDF data
- SPARQLEngine: Executes SPARQL queries
- FileHandler: Manages file operations and URL loading
CORS Errors: When loading from URLs, ensure the server supports CORS or use a proxy.
Large Files: For files >10MB, consider streaming or chunked processing.
Memory Usage: Large RDF datasets may require pagination or virtualization.
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
- Fork the repository
- Create a feature branch
- Make your changes with tests
- Run
npm run lintandnpm run type-check - Submit a pull request
MIT License - see LICENSE file for details.
Note: This is a modernized React/TypeScript version of the original turtle-editor-viewer. The core functionality remains the same while providing a much improved developer and user experience.
