Sveltool
Chrome DevTools panel (Manifest V3) with real-time AST visualisation, prop/state diagramming, and D3.js dependency trees
Sveltool is a Chrome extension that adds a panel to DevTools for inspecting Svelte applications. It parses the running page, extracts the component hierarchy along with each component's props and state, and renders the whole thing as an interactive tree using D3.js.
Built at Codesmith with a team of five and open-sourced under OSLabs. My work focused on the component parser, the D3 tree rendering, and the DevTools panel integration. The extension injects a content script that walks the Svelte component tree in the page context, serialises it, and sends it to the DevTools panel over Chrome's messaging API.
highlights
- Chrome DevTools extension — adds a dedicated Sveltool panel for inspecting Svelte apps
- Parses live Svelte component trees with props and state for each node
- Interactive D3.js tree visualisation of the component hierarchy
- Built and open-sourced with a team of five under OSLabs at Codesmith
What Sveltool is
A Chrome DevTools extension for Svelte developers. Open DevTools, click the Sveltool tab, and you get a live tree view of every component on the page — what it's called, what props it received, and what state it holds.
Built with a team of five at Codesmith and open-sourced under OSLabs.
How it works
The extension has three layers:
- A content script injected into the page that walks the Svelte component tree, extracts component names, props, and state, and serialises the result.
- A background script that bridges the page context and the DevTools panel via Chrome's messaging API.
- A DevTools panel built in Svelte itself, rendering the parsed tree as an interactive D3.js visualisation.
Click any node in the tree and the right panel shows that component's props and current state. The tree updates when you navigate or interact with the inspected app.
My contribution
I worked primarily on the component parser and the D3 tree rendering. The parser walks Svelte's internal component instances in the page's DOM, extracts the relevant data without interfering with the app's reactivity, and packages it into a shape that D3 can consume. The tree renderer uses D3's hierarchy layout to position nodes and draws the connections between parent and child components.
Tech stack
- Svelte for the DevTools panel UI
- D3.js for the tree visualisation
- Chrome Extensions API (Manifest V2) for DevTools integration
- Webpack for bundling