Archify
understand software
349 followers
understand software
349 followers
See components, APIs, libraries, understand application behavior directly inside your browser.
Free
Launch Team / Built With
Framer AI AgentsDesign and publish professional sites with AI
Promoted
@salahxd If Archify reads the live DOM and network activity locally, how does it identify components and API boundaries across different frontend frameworks? is detection framework-specific?
@clement_avq Great question! It’s a mix of both.
For frameworks, Archify looks for the signals each one leaves behind in the page , so React, Vue, Angular, Svelte, Astro, and others are detected in slightly different ways.
But things like buttons, dialogs, menus, and API calls are handled more generally. Archify looks at normal browser and web standards, so that part works regardless of which framework the site uses.
For APIs, it watches the same browser features that tools like Axios, React Query, Apollo, and plain fetch eventually use underneath. That’s why it can trace calls across different stacks.
One honest limitation: on heavily minified production apps, component names can sometimes be impossible to recover. When that happens, Archify just leaves the name out instead of guessing.
@salahxd thanks for the feedback!
Does this work as a browser extension or a standalone app, and is there a free tier or is it subscription-only from the start?
@serhatmant9b7b It works as a browser extension, and it’s completely free and opensource! No subscription or paid tier just install it and start exploring 🙌
does the extension need any permissions beyond the active tab, and can I audit that?
@saman_balochNo extra permissions or setup needed after installation .just install Archify and it works.
And yes, it’s fully auditable. You can check the permissions in Chrome’s extension settings, and since Archify is open source, you can inspect exactly how everything works in the code too 🙌
You can check it here: github.com/Salah-XD/archify
Being able to peek into a running app's components right in the browser without setting up a separate debugger feels like a huge time-saver, especially for onboarding to a new codebase.
@devranzerezune Absolutely! Onboarding to an unfamiliar codebase is one of the use cases I’m really excited about. Being able to explore how the app behaves before digging through the code can save a lot of time 🙌
One product detail I would make very explicit in the UI: mark the evidence source for each finding, e.g. DOM observation, network request, framework bridge, source map, or inferred. For a tool that maps components/APIs/architecture, that distinction prevents people from treating an inferred graph as ground truth. A route-by-route diff after SPA navigation would also help on auth-heavy dashboards.
The way Archify surfaces component behavior right in the browser is genuinely clever, saves a ton of tab-switching when debugging. Clean execution on something that could've easily turned into another cluttered dev tool.
@cafertrf7 This is exactly what I was hoping Archify would feel like. I really wanted to keep it useful without turning it into another overloaded dev tool 😄 Glad that came through!
Finally a browser tool that actually helps me see what my React app is doing without constantly alt-tabbing to devtools. Loved clicking through a component tree and instantly spotting a stale closure bug.
@zerdaqvbn Love hearing this! Spotting a stale closure bug through the component tree is exactly the kind of real-world use case I hoped Archify would help with 😄 Really glad it was useful!