A powerful, client-side web application for validating and comparing machine-actionable Data Management Plans (maDMP) according to the RDA DMP Common Standard.
This tool provides researchers, data managers, and institutions with a comprehensive solution for:
- Validating maDMP documents against the official RDA schema v1.2
- Comparing different versions of maDMP files with multiple visualization formats
- Analyzing changes between original and API-processed maDMP documents
- Managing multiple maDMP files with a built-in file library
- Exporting comparison results in various formats (JSON, HTML, PDF, CSV, Markdown)
Key Advantages:
- 🔒 Privacy First: All processing happens in your browser - no data sent to external servers
- ⚡ Fast & Lightweight: No installation required, runs entirely client-side
- 🎨 Multiple Views: 4 different visualization formats to suit your workflow
- 🔍 Powerful Search: Find changes instantly with real-time search and filtering
- 💾 Session Management: Save and restore comparison sessions for later review
- ⌨️ Keyboard Shortcuts: Work efficiently with comprehensive keyboard navigation
# Clone the repository
git clone https://github.com/yourusername/standard-diff.git
cd standard-diff
# Open in browser (no build required!)
open index.html
# Or use a local server
python3 -m http.server 8000
# Navigate to http://localhost:8000That's it! The tool includes example files that are automatically loaded when you first open it.
// 1. Open index.html in your browser
// 2. Five example files are automatically loaded in the File Library
// 3. Click [L] on "Funded DMP" to select it as the left file
// 4. Click [R] on "Planned Dataset" to select it as the right file
// 5. Comparison appears instantly in all four visualization modes!
// 6. Try different views:
// - Side-by-Side: Visual comparison with color-coded changes
// - Unified: Git-style diff format
// - JSONata: Transformation queries
// - Tree: Hierarchical structure view
// 7. Search for specific changes:
// - Press Ctrl+F or click the search box
// - Type "dataset" to find all dataset-related changes
// - Use F3/Shift+F3 to navigate matches
// 8. Export your comparison:
// - Click Export dropdown
// - Choose format (JSON, HTML, PDF, CSV, Markdown)
// - Save or share your report- Features
- Technology Stack
- Getting Started
- File Structure
- Example maDMP Files
- Browser Compatibility
- Features in Detail
- Troubleshooting
- Development
- Roadmap
- License
- Credits
- Changelog
- Validates maDMP JSON against schema version 1.2
- Detailed error reporting with paths and descriptions
- Real-time validation feedback
- File Picker: Traditional browse and select
- Drag & Drop: Drag JSON files directly into the browser
- Paste JSON: Copy and paste JSON content directly
- Multiple Files: Upload and manage multiple maDMP files
- Example Files: Pre-loaded example files for quick testing
- Selection System: Mark files as Left [L] or Right [R] for comparison
- Auto-Compare: Automatically compares when both files are selected
- Metadata Display: Shows validation status, file size, and timestamp
- File Actions: Rename, delete, or clear all files
- Persistence: Optional localStorage persistence across sessions
- Import/Export: Export library and import on another machine
- Send maDMP to common-madmp-api endpoint
- Receive merged maDMP response
- Configurable endpoint URL (saved in localStorage)
- Connection testing
- Two-panel comparison with synchronized scrolling
- Color-coded changes (green=added, red=removed, yellow=modified)
- Line numbers for easy reference
- Git-style unified diff format
- Single panel showing all changes
- Context lines around modifications
- Transformation queries to convert input to output
- Grouped by change type (additions, deletions, modifications)
- Copy-to-clipboard functionality
- Value previews for each change
- Hierarchical structure visualization
- Expandable/collapsible nodes
- Change indicators at each level
- Icons for different data types
- Input JSON metrics (size, object count, depth)
- Diff statistics (total changes, percentages)
- Real-time updates
- Real-time Search: Search across all changes by path or value
- Filter by Type: Show/hide added, removed, modified, or unchanged fields
- Match Highlighting: Visual highlighting of search results
- Match Navigation: Navigate through search results with keyboard shortcuts
- Live Counters: See counts of each change type with badge indicators
- Next/Previous Controls: Navigate through changes sequentially
- Keyboard Shortcuts: Use Alt+Arrow keys for quick navigation
- Visual Highlighting: Current change highlighted in active view
- Change Counter: Track your position (e.g., "3 / 15")
- Cross-View Support: Navigation works across all diff visualization formats
- Save Sessions: Save current comparison state for later review
- Session History: Browse previously saved sessions
- Bookmarks: Star important sessions for quick access
- Auto-naming: Sessions automatically named with timestamps
- Quick Restore: Click any session to instantly restore it
- Clear History: Remove old sessions to keep history manageable
- JSON Export: Raw diff data for programmatic use
- HTML Export: Self-contained report viewable in any browser
- PDF Export: Professional formatted reports with statistics
- CSV Export: Tabular data for spreadsheet analysis
- Markdown Export: Documentation-friendly format for wikis/README files
- Copy to Clipboard: Quick copy of diff results as text
- File Operations: Ctrl+O (open), Ctrl+S (save session), Ctrl+E (export)
- Navigation: Alt+Arrows (next/prev change)
- Search: Ctrl+F (focus search), F3 (next match), Shift+F3 (prev match), Esc (clear)
- Views: Ctrl+1/2/3/4 (switch diff views)
- Other: Ctrl+D (dark mode), F11 (fullscreen), ? (show shortcuts help)
- API: Ctrl+Enter (send to API)
- Dark mode toggle (with localStorage persistence)
- Responsive design (mobile-friendly)
- Fullscreen mode for diff views
- Toast notifications for user feedback
- Loading indicators for async operations
- Tooltips on all interactive elements
- Professional color-coded changes
- Collapsible tree nodes
- UI Framework: Bootstrap 5.2 (Bootswatch Yeti theme)
- JavaScript: Vanilla ES6+ (no build tools required)
- State Management: Zustand v4
- JSON Validation: Ajv v8 (draft-2020-12)
- Query Language: JSONata v2
- Diff Engine: jsdiff v5
- PDF Generation: jsPDF v2.5
- Schema: RDA-DMP-Common-Standard v1.2
- Icons: Bootstrap Icons
- Storage: localStorage API for persistence
Simply open index.html in a modern web browser. No build process or server required!
# Open with default browser
open index.html
# Or use a local server
python3 -m http.server 8000
# Then navigate to http://localhost:8000The File Library is pre-loaded with 5 example maDMP files:
- Select any file as Left [L] by clicking the left button
- Select another file as Right [R] by clicking the right button
- The comparison automatically appears when both are selected!
Choose one of three methods:
- Click "File" tab and browse for a JSON file
- Click "Drop" tab and drag a file into the drop zone
- Click "Paste" tab and paste JSON content directly
All files are automatically validated against maDMP schema v1.2.
- Enter your common-madmp-api endpoint URL
- Click "Test Connection" to verify
- Click "Send to API" to submit your maDMP
Switch between the four visualization formats to explore changes:
- Side-by-Side: Visual comparison
- Unified: Git-style diff
- JSONata: Transformation queries
- Tree: Structural view
- Use the search bar to find specific changes by path or value
- Toggle filters to show/hide change types (added, removed, modified, unchanged)
- Use navigation buttons or Alt+Arrow keys to move between changes
- Press Ctrl+F to focus the search box, F3 for next match
- Click "Save Session" to save the current comparison
- View session history in the left sidebar
- Click the star icon to bookmark important sessions
- Click any session to restore it instantly
- Click "Clear History" to remove all saved sessions
- Click the "Export" dropdown to choose format:
- JSON: Raw diff data
- HTML: Self-contained browser report
- PDF: Professional formatted document
- CSV: Spreadsheet-compatible table
- Markdown: Documentation-friendly format
- Use "Copy" button for quick clipboard copy
- Press ? key to view all keyboard shortcuts
standard-diff/
├── index.html # Main HTML file
├── README.md # This file
├── css/
│ └── styles.css # Custom styles & dark mode
├── js/
│ ├── main.js # Application entry point
│ ├── store.js # Zustand state management
│ ├── utils.js # Utility functions
│ ├── validator.js # JSON schema validation
│ ├── api.js # API integration
│ ├── diff-engine.js # Diff calculation
│ ├── diff-search.js # Search & filter functionality
│ ├── diff-navigation.js # Change navigation controls
│ ├── session-manager.js # Session save/load/history
│ ├── file-library.js # File library management
│ ├── keyboard-shortcuts.js # Keyboard shortcuts system
│ ├── sidebar-toggle.js # Sidebar collapse/expand
│ ├── diff-renderers/
│ │ ├── side-by-side.js # Side-by-side view
│ │ ├── unified.js # Unified diff view
│ │ ├── jsonata.js # JSONata queries
│ │ └── tree.js # Tree structure view
│ └── exporters/
│ ├── pdf-exporter.js # PDF report generation
│ ├── csv-exporter.js # CSV export
│ ├── markdown-exporter.js # Markdown export
│ └── html-exporter.js # HTML report generation
├── schemas/
│ └── maDMP-schema-1.2.json # maDMP JSON schema v1.2
└── examples/
└── JSON/ # Example maDMP files
├── ex1-header-fundedProject.json
├── ex2-dataset-planned.json
├── ex3-dataset-finished.json
├── missing-title.json
└── missing-dataset.json
The tool includes example maDMP JSON files in the examples/JSON/ directory that are automatically preloaded into the File Library when you first open the application:
- ex1-header-fundedProject.json - Example of a funded project DMP with complete metadata
- ex2-dataset-planned.json - DMP for a planned dataset
- ex3-dataset-finished.json - DMP for a completed dataset
- missing-title.json - Example with validation errors (missing required title)
- missing-dataset.json - Example with validation errors (missing dataset)
These examples demonstrate:
- Valid maDMP structure and syntax
- Required vs optional fields
- Common validation issues
- Different project states (planned, active, finished)
You can immediately select any two files using the [L] and [R] buttons to see a live comparison!
Tested and working on:
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
The tool expects a common-madmp-api endpoint that:
- Accepts POST requests with maDMP JSON
- Returns merged/processed maDMP JSON
- Supports content negotiation:
- Accepts:
application/vnd.org.rd-alliance.dmp-common.v1.2+json - Returns:
application/vnd.org.rd-alliance.dmp-common.v1.2+json
- Accepts:
Example endpoint: https://your-api.example.com/dmps
The tool validates against RDA DMP Common Standard v1.2:
- Schema location:
schemas/maDMP-schema-1.2.json - Standard: RDA-DMP-Common-Standard
When validation fails, you'll see:
- Error count badge
- JSON path to error location
- Detailed error message
- Error type (required, type, format, etc.)
The tool calculates and displays:
- Total number of changes
- Added fields count
- Removed fields count
- Modified fields count
- Change percentage
The search functionality allows you to:
- Search by JSON path (e.g., "dmp.title")
- Search by value (e.g., "MIT License")
- Filter results by change type
- See match counts in real-time
- Navigate matches with F3/Shift+F3
- Clear search with Esc key
Sessions store complete comparison state:
- Input and output JSON
- Validation results
- Diff results and statistics
- API endpoint configuration
- Maximum 20 sessions kept (oldest auto-deleted)
- Bookmark favorite sessions with star icon
- Export sessions for sharing
| Category | Shortcut | Action |
|---|---|---|
| File | Ctrl+O | Open file picker |
| Ctrl+S | Save current session | |
| Ctrl+E | Export diff | |
| Navigation | Alt+← / Alt+↑ | Previous change |
| Alt+→ / Alt+↓ | Next change | |
| Search | Ctrl+F | Focus search box |
| F3 | Next search result | |
| Shift+F3 | Previous search result | |
| Esc | Clear search | |
| Views | Ctrl+1 | Side-by-side view |
| Ctrl+2 | Unified view | |
| Ctrl+3 | JSONata view | |
| Ctrl+4 | Tree view | |
| Other | Ctrl+D | Toggle dark mode |
| F11 | Toggle fullscreen | |
| ? | Show shortcuts help | |
| Ctrl+Enter | Send to API |
| Format | Best For | Features |
|---|---|---|
| JSON | APIs, automation | Raw structured data |
| HTML | Sharing, archiving | Self-contained, interactive |
| Reports, printing | Professional formatting | |
| CSV | Spreadsheets, analysis | Tabular data |
| Markdown | Documentation, wikis | Human-readable text |
Toggle between light and dark themes:
- Preference saved to localStorage
- Optimized color schemes for both modes
- Reduced eye strain in low-light environments
- Toggle with button or Ctrl+D shortcut
- Ensure JSON is valid (use JSONLint.com)
- Check that it follows maDMP schema v1.2
- Review error messages for specific issues
- Verify endpoint URL is correct
- Check CORS headers are enabled on API
- Test endpoint with curl/Postman first
- Check browser console for errors
- Ensure both input and output are loaded
- Check that validation passes for both
- Refresh the page and try again
- Clone the repository
- Open
index.htmlin a browser - Make changes to JS/CSS files
- Refresh browser to see changes
- Modular Design: Each component is self-contained
- State Management: Zustand for reactive state
- Event-Driven: DOM events trigger state updates
- No Build Required: Pure vanilla JavaScript
- Create new module in
js/ - Add to
index.htmlscript tags - Wire up in
main.js - Test thoroughly
MIT License - see LICENSE file for details.
This tool is provided as-is for validating and comparing maDMP documents according to the RDA DMP Common Standard.
This project was developed with assistance from multiple AI coding assistants and large language models:
- Claude Code (Anthropic) - Primary development assistant for architecture, feature implementation, and code quality
- OpenAI Codex - Code generation and optimization
- Google Gemini - Algorithm design and problem-solving
- Qwen (Alibaba Cloud) - Code review and refinement
- MiniMax M2 - Testing and debugging assistance
These AI tools helped accelerate development, improve code quality, and implement best practices. However, all code has been reviewed, tested, and validated by human developers to ensure functionality, security, and maintainability.
The project uses modern web technologies without requiring build tools:
- Frontend: Vanilla JavaScript (ES6+), HTML5, CSS3
- UI Framework: Bootstrap 5.2 with Bootswatch Yeti theme
- State Management: Zustand v4
- Validation: Ajv v8 (JSON Schema validator)
- Diff Engine: jsdiff v5
- Query Language: JSONata v2
- PDF Generation: jsPDF v2.5
- Icons: Bootstrap Icons
Contributions are welcome! Whether you're fixing bugs, adding features, or improving documentation:
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Make your changes and test thoroughly
- Commit your changes (
git commit -m 'Add amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
Please ensure your code:
- Follows existing code style and conventions
- Includes comments for complex logic
- Works in all major browsers (Chrome, Firefox, Safari, Edge)
- Doesn't introduce security vulnerabilities
- RDA DMP Common Standards Working Group - For the maDMP standard and schema
- Bootstrap Team - For the excellent UI framework
- Library Authors:
- Zustand state management
- Ajv JSON schema validator
- JSONata query language
- jsdiff library
- jsPDF PDF generation
- AI Development Partners - Claude Code, OpenAI Codex, Google Gemini, Qwen, MiniMax M2
- Automated API Testing Suite: Comprehensive API testing functionality will be added as soon as a publicly accessible maDMP API endpoint is available for testing
- Automated request/response validation
- API endpoint health monitoring
- Mock API server for local testing
- Response time metrics
- Error handling test scenarios
- CORS configuration validator
- Batch Processing: Compare multiple files simultaneously
- Custom Schema Support: Allow users to upload custom JSON schemas
- Diff Templates: Save and reuse custom diff configurations
- Advanced Filtering: More granular filtering options for change types
- Collaboration Features: Share comparisons with team members via URLs
- Version History: Track changes across multiple versions of the same file
- Integration APIs: REST API for programmatic access
- Plugin System: Allow community-contributed extensions
Want to contribute or suggest features? Open an issue on our GitHub repository!
For issues related to:
- This tool: Check browser console for errors
- maDMP Standard: See RDA-DMP-Common-Standard
- API Issues: Contact your API provider
- Feature Requests: Open an issue on GitHub
- File Library: Multi-file management with Left/Right selection system
- Auto-Preload Examples: 5 example files automatically loaded on first use
- File Persistence: Optional localStorage persistence across browser sessions
- Library Import/Export: Save and share entire file libraries
- File Metadata: Display validation status, size, and timestamp for each file
- Auto-Compare: Automatic diff calculation when both files selected
- Improved README: Enhanced documentation with AI development acknowledgment
- Search & Filter: Real-time search across all changes with type filtering
- Navigation Controls: Next/previous change navigation with keyboard shortcuts
- Session Management: Save, load, and manage comparison sessions with history
- Multiple Export Formats: Added HTML, PDF, CSV, and Markdown exports
- Keyboard Shortcuts: Comprehensive keyboard navigation system
- Enhanced UI: Improved visual highlighting, collapsible sections, bookmarks
- Performance: Optimized rendering for large diffs
- Documentation: Comprehensive README with feature guide
- Initial release
- Full maDMP v1.2 validation
- Four diff visualization formats (Side-by-Side, Unified, JSONata, Tree)
- API integration with common-madmp-api
- Dark mode support
- Export/import functionality
- Three upload methods (File, Drag & Drop, Paste)
Made with ❤️ for the research data management community
Developed with AI assistance from Claude Code, OpenAI Codex, Google Gemini, Qwen, and MiniMax M2