code canvas app
See your code flow and file connections on an infinite canvas.
Explore file relationships, understand application flow, and gain insights into your project structure in a more intuitive way.
Mainly focused on js/ts/react for now, although some of the features might work for other languages
Features:
Opening files in a canvas view (Right click -> open in code canvas)
- Cmd + scroll to zoom
- Hold space to pan
- Backspace to close a file
- Open all imported files by clicking the right arrow in the file node toolbar
- Or open all files that import a file by clicking the left arrow
- Option + click on an arrow to see the list of files and select which ones to open
- Option + click on a token to open a file editor on the side, at the token location
Real-time display of local changes
- Immediately see changes in open files with visual indicators for added, modified, and deleted code
- Better understand code evolution and track modifications in real-time
- Improve code review and debugging with clear visual context
Token selection with visual connections
- See relationships between different tokens across your codebase
- Understand function calls and implementations at a glance
- Trace code execution paths visually
Visual display of token references and connections
- Click on a token to open a dropdown with references, definitions, implementations, as well as outgoing and incoming calls for functions
Git integration for changed files
- Open all modified files since your last commit with a single click
- See exactly what's changed within the context of related files
- Understand the impact of changes across your codebase at a glance
Advanced layout algorithms for organizing your selected files
- Four layout options with keyboard shortcuts (1-4) to instantly organize your view
- Visualize code structure based on dependencies or folders
- Custom layout algorithm with adjustable parameters for perfect visualization
- Auto-fit and spacing options to optimize your view
Toggle display options for enhanced visualization
- Display connections between files to trace dependencies
- Show symbol outlines for quick content overview
- Toggle folder outlines to maintain project structure context
- Customize your view with keyboard shortcuts for faster workflow
Open files from imports for targeted exploration
- Drag out the import handle to open imported files instantly
- Follow import paths to understand dependencies throughout your code
- Build a focused view of only the files that matter for your current task
Enhanced structural context with folders and symbols
- Visualize folder structure around your files for better orientation
- See symbol outlines on top of files when zoomed out for quick content scanning
- Maintain awareness of both code and project structure simultaneously
- Toggle between different views based on your current focus
| |
