Click your UI.
Jump to your code.

SourceHop is a Chrome extension for developers. Hold Option on macOS or Alt on Windows/Linux and click an element in a configured development webpage to open its original JSX or Angular template location in VS Code.

Framework support

React with Vite, Next.js with Webpack, and Angular development projects.

Setup requirements

SourceHop requires a separate local Node.js bridge, framework instrumentation and VS Code. Installing the extension alone does not enable source navigation.

Normal clicks continue to work. SourceHop maps element source locations; CSS rules and event handlers are not automatic navigation targets.

Read our privacy policy or get support.