Kuyil (Beta): LWC Relationships for Salesforce

Kuyil (குயில்) is Tamil for the koel, the songbird whose call is loved in Tamil poetry. Here it sings out how your components relate.

See how your Lightning Web Components fit together. Open a component and instantly see every child component it uses, which @api properties it passes to each, and the values it passes. Ctrl+click any child tag to jump straight to it.

Beta. Free to use while it's being refined; features and behaviour may change between versions. See the beta terms in the licence.

Private by design. Everything happens on your computer: no data is collected or sent, and there's no telemetry.

Features

Child components at a glance

Open a component's .html and the Kuyil view (right-hand sidebar, Ctrl+Alt+B / ⌥⌘B) lists every child component it uses:

• Each place a child is used is listed separately, with all of the child's @api properties: red if this parent sets it, grey if not.
• Hover a red property to see the value passed, for example account-id = {recordId}, and click to jump to it.
• Click a name to open the file; click a property to open its @api declaration.
• Copy property names: tick them and click copy, or copy a single name.

Ctrl+click navigation

In a template, Ctrl+click (Cmd+click on macOS) a child tag such as <c-contact-list> to open the child, or one of its attributes, such as account-id, to jump to the matching @api property. It works alongside Salesforce's own LWC extension.

A list that follows your work

• Opening a component's .html adds it to the list; closing its tabs removes it.
• Pin up to 5 components to keep them at the top, expanded, even after their tabs close. Pin a child to keep it open while you work.
• Up to 5 other components stay expanded at once.
• The component you're editing is marked with a solid bar.
• Clear all empties the list; an on/off switch, the status bar or a command turns the extension off.

Feels like VS Code

VS Code's own icons, tree rows and badges, following your colour theme, including high contrast. A Guidelines page and How to use tips are built in.

Getting started

1. Install the extension and open a Salesforce DX project (a folder with an sfdx-project.json).
2. Press Ctrl+Alt+B (⌥⌘B on macOS) and click the Kuyil icon in the right-hand sidebar.
3. Open any component's .html that uses child components (<c-…> tags).

The extension starts on its own in workspaces with an sfdx-project.json at the top level or one folder down.

Requirements

• VS Code 1.134 or newer.
• A Salesforce DX project with Lightning Web Components.

Settings

Privacy

The extension reads your project's LWC files and open tabs only to show them in VS Code. It stores just the sidebar list, pins and ticked properties, in VS Code's own storage on your computer; Clear all or uninstalling removes them. It makes no network requests, has no telemetry, and writes to the clipboard only when you click a copy icon. The full privacy statement is included with the extension (PRIVACY.md).

Known limitations

• Only child components in the c namespace that exist in your workspace are resolved.
• @api properties are found by scanning the source rather than with a full JavaScript parser, so unusual syntax may be missed.
• "Could not register service worker" (a known VS Code issue, not caused by Kuyil). VS Code occasionally fails to load extension sidebars, especially after an update or right after starting. This bug is in VS Code and Chromium, affects many extensions, and happens before any extension code runs. Kuyil notices when its sidebar doesn't load and offers Reload sidebar (then Reload window). If it still fails, close VS Code and delete the folder %APPDATA%\Code\Service Worker (Windows), ~/Library/Application Support/Code/Service Worker (macOS) or ~/.config/Code/Service Worker (Linux). This folder only holds VS Code's cache and is rebuilt automatically.

Feedback

Questions, problems or ideas: use the Q&A tab on this extension's Marketplace page.

Licence

Free to use, closed source. See the License tab for the full terms, including the beta terms. Premium features may be offered in the future.

Includes Codicons © Microsoft, licensed CC BY 4.0.

Kuyil is an independent extension. It isn't affiliated with, endorsed by or sponsored by Salesforce, Inc. "Salesforce" is a trademark of Salesforce, Inc.