{"repo":"makotot/vscode-nextjs-component-boundary-visualizer","free":true,"listed":false,"github":"https://github.com/makotot/vscode-nextjs-component-boundary-visualizer","clone":"git clone https://github.com/makotot/vscode-nextjs-component-boundary-visualizer.git","description":"Visualizes server, client, and universal components with explorer badges, status bar indicators, editor decorations, and JSX client boundary markers in Next.js App Router projects.","language":"TypeScript","stars":12,"topics":["app-router","nextjs","vscode-extension","react-server-components"],"license":"MIT","category":"saas-starters-boilerplates","readme_excerpt":"Next.js Component Boundary Visualizer Visualizes server, client, and universal components with explorer badges, status bar indicators, editor decorations, JSX client boundary markers, and server component composition markers in Next.js App Router projects. Screenshots Explorer Badges and Status Bar JSX Client Boundary Markers Server Component Composition Markers Extension ID: vscode-nextjs-component-boundary-visualizer You can install this extension by searching for \"Next.js Component Boundary Visualizer\" or using the extension ID above in the VS Code Extensions view. --- Features - High‑precision static analysis : Infers server, client, and universal(shared) components using the TypeScript type checker and a dependency graph. - Explorer Badges : Shows icons for client(⚡️) and universal(♾️) components in the file explorer. - Status Bar : Displays the type of the currently open component (client, server, universal). - JSX Client Boundary Markers : shows a subdued end‑of‑line indicator ( ⚡️ Client Boundary ) on lines that render Client Components across a server-to-client boundary. - Server Component Composition Markers : shows an end‑of‑line indicator ( 🌐 Server in Client ) on lines where a Server or Universal Component is passed as props or children to a Client Component. This clarifies that the component executes on the server despite being visually nested inside a Client Component in JSX. - Line Decorations : Adds a colored line and icon to the editor for client and univer","default_branch":null,"files":null,"tree":[],"storefront":"/r/makotot","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/makotot/vscode-nextjs-component-boundary-visualizer/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}