---
title: How to Find Where a Component is Used in the VS Code Extension
description: "When working with components such as blocks, templates, or data objects in the **Assette VS Code Extension**, it is often important to understand how and where those components are used within the broader Assette content ecosystem. For example, before deleting…"
url: "https://learn.assette.com/docs/how-to-find-where-a-component-is-used-in-the-vs-code-extension/"
updated: "2025-05-25"
category: Developers / Developer Tools / Visual Studio Code
---

# How to Find Where a Component is Used in the VS Code Extension

When working with components such as blocks, templates, or data objects in the **Assette VS Code Extension**, it is often important to understand how and where those components are used within the broader Assette content ecosystem. For example, before deleting or modifying a block, you may want to confirm if it is referenced in any templates, Smart Pages, or Shells.

This article explains how to locate usage information for components using the **[X-Ray](https://learn.assette.com/docs/x-ray-view/)** tool. As of now, the **VS Code Extension does not provide direct visibility into component references**, so **X-Ray must be used within the Assette web application**.

## Why You Can’t View Component Usage in the VS Code Extension

The Assette VS Code Extension is optimized for local development tasks such as:

- Uploading and downloading blocks
- Managing metadata
- Previewing file changes
- Syncing with the server

However, it does not include dependency or usage tracking features. For security, scope, and performance reasons, reference tracing is handled through the Assette web interface using X-Ray.

## Using X-Ray to View Component References

To find where a component (e.g., a block, template, data object) is used, follow these steps in the **Assette web platform**:

1. **Log into Assette** at https://app.assette.com using your organization’s credentials.
2. **Navigate to X-Ray**:
   - From the main navigation, go to **Developer Tools → Component **→**X-Ray**
     - E.g., Developer Tools → Data Block Editor → AccountMaster → X-Ray
3. **View the References**:
   - Once selected, X-Ray will display a detailed reference graph showing:
     - All locations where the component is used (e.g., in Shells, Templates, Smart Pages)
     - Type of reference (precedent or dependent)
4. **Use Filters for Contextual Insights**:
   - You can filter by content type or usage category to further refine the view.

## Use Cases for X-Ray

- **Before editing a shared block**: Ensure changes won't break dependent assets.
- **Reviewing impact before publishing**: Understand which documents will be affected by changes.

## Best Practices

- **Always check X-Ray before removing shared components.**
- **Keep components well-documented** with metadata to support traceability.
- **Coordinate with authors or reviewers if your edits will affect downstream templates.**

## Additional Resources

- [X-Ray View Overview](https://learn.assette.com/docs/x-ray-view/)
- [VS Code Frequently Asked Questions (FAQs)](https://learn.assette.com/docs/vs-code-frequently-asked-questions-faqs/)