Search
Find and navigate through your data instantly
The Search feature helps you quickly find specific nodes, keys, or values within your diagram, even in complex data structures with thousands of nodes.
Quick Start
Press Cmd + F (Mac) or Ctrl + F (Windows/Linux) to activate search:
Open Search
Click the search icon in the toolbar or use the keyboard shortcut Cmd/Ctrl + F.
The search panel opens on the right side of the editor.
Enter Search Term
Type any text to search across:
- Node keys: Property names in objects
- Node values: String, number, boolean values
- Paths: JSONPath expressions
Navigate Results
- Match count: Shows
X/Ytotal matches found - Arrow buttons: Navigate between results using ↑/↓
- Auto-focus: Canvas automatically centers on selected result
- Keyboard: Use arrow keys to cycle through matches
Visual Highlighting
Active Search
When search is active:
- Matching nodes: Green background highlight (
#f2fce8light /#111B0Cdark) - Matching text: Green text color for exact matches
- Non-matching nodes: Dimmed/gray text for easier filtering
- Selected result: Additional border highlight on focused match
Search States
| State | Appearance | Description |
|---|---|---|
| Match | Green background | Node contains search term |
| Selected | Green border | Currently focused match |
| Non-match | Gray/dimmed | Node doesn't match search |
| Collapsed | [...] indicator | Matched node is inside collapsed parent |
Search Behavior
What Gets Searched
{
"user": { // ← Key: "user"
"name": "John", // ← Key: "name", Value: "John"
"age": 30, // ← Key: "age", Value: 30
"active": true // ← Key: "active", Value: true
}
}Search term "John" matches:
- ✅ Value:
"John" - ✅ Path:
$.user.name
Search term "user" matches:
- ✅ Key:
"user" - ✅ Path:
$.user - ✅ Path:
$.user.name(partial match)
Case Sensitivity
Search is case-insensitive by default. Searching for "john" will match "John", "JOHN", or "JoHn".
Collapsed Nodes
Collapsed nodes are still searchable:
- Search includes hidden nodes inside collapsed parents
- Results show
[...]indicator for collapsed matches - Click result to auto-expand parent and focus match
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
Cmd/Ctrl + F | Open search |
↓ / Enter | Next result |
↑ | Previous result |
Escape | Close search |
Search Workflow
Example: Finding API Keys
Open Search
Press Cmd/Ctrl + F to open search panel.
Search Term
Type "apiKey" or "api_key" to find all API key fields.
Navigate Results
Use ↑/↓ arrows or keyboard to cycle through:
// Result 1
{
"config": {
"apiKey": "sk-..." // ← Found here
}
}
// Result 2
{
"services": {
"stripe": {
"api_key": "pk_..." // ← Found here
}
}
}Inspect Values
Canvas auto-focuses each match, allowing you to:
- Verify the value
- Edit in text editor (if needed)
- Copy the JSONPath
Advanced Tips
Search Patterns
Partial Matches:
"user"finds:user,username,user_id,$.user.name"prod"finds:product,production,prod_db
Exact Values:
"true"finds all booleantruevalues"null"finds all null values"404"finds all occurrences of number 404
Nested Paths:
"data.user"finds paths containing this substring"[0]"finds array index references in paths
Performance
Search is optimized for large datasets:
- Instant: Searches 10,000+ nodes in milliseconds
- Indexed: Results are cached during active search
- Debounced: 300ms delay prevents excessive re-renders while typing
JSONPath Integration
Search uses JSONPath internally for path matching:
- Results include full JSONPath expressions
- Copy paths from search results for API queries
- Works with complex nested structures
Troubleshooting
Related Features
- Interface - Learn about canvas navigation
- Keyboard Shortcuts - All available shortcuts
- JSON Schema - Validate data structure
Pro Tip: Combine search with "Sync Editor Focus" (JSON only) to automatically highlight matching nodes in both editor and canvas simultaneously.