Click on a component (React,) in browser to get to its code in IDE

In plain words

This open-source browser extension and JavaScript library enables developers to click on components in their browser and instantly jump to the source code in their editor. It supports React, Svelte, SolidJS, Preact, and Vue, and works with VSCode, Webstorm, and other editors that support URL protocol links. The tool is designed to streamline web development workflows for developers working on localhost projects.

written from the facts on this page · September 2026

From the sources

Click on any component and go from your app to component's code.

Click on any component in the browser to open its code in your IDE. You can use it as a browser extension or as a library. For React, Preact, Solid, Vue and Svelte. Don't know every corner of your codebase? Find any component faster than ever. Compared to devtools approach: Works with all React projects that use Babel, Webpack or Turbopack It can be used also in production-like environments. Contains additional support for styled-components. Compared to data-id approach: Works with Vite or Create React App. Does not work with Next.js If you use the Browser extension, you don ' t need to install any packages. You might need to have React DevTools to make it working properly. LocatorJS is…from locatorjs.com

In the maker’s words, at launch

Hi all! Here is my open-source side-project. It is a browser extension that lets you click on a component on your localhost to get to its code in your editor. It works with React, Svelte, SolidJS, Preact, and Vue components and with VSCode, Webstorm, or any other editor that supports URL protocol links. It can be…

• AV
  A Visual IDE for React2022 · dev.aspect.app · ▲479

  I made this because building UIs in a lexical medium like code is super annoying. I have to pre-render what I’m making in my head, and then jump between the browser and IDE to test. I was inspired by the developer console in chrome and safari since I end up editing css there because it’s ironically more convenient. Hope it’s useful!

• 
  LocatorJS DevTool2022 · locatorjs.com · ▲119

  Click on a component in browser to go to code in your editor

• 
  21st.dev2025 · 21st.dev · ▲1,211

  I originally built this app to organize and reuse interesting React + Tailwind components I came across on Twitter, inspired by the shadcn/ui approach. Later, a friend started contributing their own components, and it got me thinking—this could grow into something bigger, like an NPM for design engineers to share and use components. Would love to hear your thoughts!

• 
  HTML to React2024 · ▲572

  Turn a design from any website into your own

• 
  Convert any website into a React component2024 · chromewebstore.google.com · ▲326

  Hey HN, we built a Chrome Extension (https://www.magicpatterns.com/extension) that converts a snippet of any website to an isolated React component. Demo video: https://youtu.be/hutUYDkyE_A How it works: 1) Iterate through each node in the selected DOM tree, 2) For each element, find any matching CSS selectors / inline styles, 3) Use window.getComputedStyle to get the deterministic values, 4) Construct JSX It was pretty hard producing the minimal code necessary while maintaining the same visual look. To do this, we implemented things like abstracting out…

• CR
  Copy React code from any site2022 · sample-code.aspect.app · ▲374

  I made this because building React components from scratch is super annoying. Most visual elements already exist on the web, and I figured there should be a way to leverage that. I hope it's useful!

• 
  /dev/null▲472

  a social network for devs

  Dev tools · 2d ago · dev-null.sh

• 
  Whiteboard (YC W26) – an open-source IDE for thoughtful software design▲423

  open-source IDE for thoughtful software design. Contribute to devdotfast/whiteboard development by creating an account on GitHub.

  Dev tools · 27d ago · github.com

• 
  Reladraw – A diagram language where you decide where to place things▲411

  Contribute to reladraw/reladraw development by creating an account on GitHub.

  Dev tools · 25d ago · github.com

• 
  OpenBot▲362

  Grok Bot alternative: free, local, open-source, multiplayer

  Dev tools · 22d ago · openbot.run

• 
  Talanoa▲340

  Hi HN, I’m a fullstack developer, and honestly, I’ve lost count of how many side projects I’ve worked on over the years. But one idea kept coming back to me: a different kind of email client. It first came to me in 2014: “What if we could handle emails more like conversations?” Every year, I’d revisit this concept in my “Build Notes.” Ten years later, no one had built exactly what I had in mind — so I finally decided to do it myself. That’s how Talanoa was born. I wanted something focused on people, not timelines. I was tired of marking messages as unread just to remember to reply later, or…

  Dev tools · 20d ago · talanoa.email

• 
  CoreSpeed▲332

  One MCP for everything your agents need: apps, memory, tools

  Dev tools · 27d ago · corespeed.io

• I3
  I 3D scanned the interior of the Great Pyramid at Giza▲1,752

  Hey HN, I 3d scanned the interior of the Great Pyramid / Khufu's pyramid for the Giza Project this summer and just finished the guided version to share. Would love feedback and/or problems you encounter. I used both a Leica BLK 360 and Matterport Pro 2 to do the scanning and the Matterport SDK for the web viewer. Matterport's web display with Three.js has been the most accessible to a wide audience in the past (previous iterations are in Unity and Unreal, but difficult to download over slower connections). I've been interviewing social studies teachers around the 6th grade level to…

  Dev tools · 2022 · giza.mused.org

• 
  Clay▲819

  Discover, organize, and deepen relationships

  Work · 2022 · me.sh

• 
  Restfox – Open source lightweight alternative to Postman▲758

  Last time I posted this it didn't garner much interest. There have been lots of improvements and fixes since the last release. Quick list of features: - Workspaces - Tabs - Nested Folders - Lots of context menus - Response history - Plugins - Runs fully in the browser and runs offline if necessary - Chrome and Firefox extension to bypass CORS restrictions - Desktop builds for all platforms - GraphQL support - Import collections exported from Postman and Insomnia - Simple user friendly interface I built this because I love Insomnia but wanted a portable version that I could run in the…

  Dev tools · 2022 · restfox.dev

• 
  Sponsor This Newsletter▲707

  100+ newsletters ready to promote your product

  Growth · 2022

• 
  Micro SaaS HQ▲672

  Profitable Micro SaaS ideas, supportive community

  Life & fun · 2022 · microsaashq.com

• 
  America – Road Trip Simulator▲663

  APIs are a little like the open road—always waiting, full of opportunity, but hardly utilized. So here’s America, composed of several APIs that paint a vivid, real-time picture of a good old-fashioned road trip. Get local classifieds and photos. Tune into local radio stations. Talk wit other drivers. And more. Exploring the country by car was an invaluable experience for me during my time in the states. I’ve since moved to Barcelona, and find myself missing the territory. This is my attempt at recreating the magic.

  Life & fun · 2022 · 4m3ric4.com