Lightning Web Runtime (LWR) Build Info
Lightning Web Runtime (LWR) Build Info is a Chrome extension developed by Craig Johnson. It is a free program in the Browsers category, specifically under Add-ons & Tools. Designed for Salesforce Experience Cloud, this extension allows users to learn, demo, and build great LWR sites.
With Lightning Web Runtime (LWR) Build Info, users can easily understand how a Salesforce Lightning Web Runtime live site was built. Once the LWR site's page loads, users can open the extension to get started. The extension popup UI provides clickable badges for each Experience Builder component on the live site page.
Clicking on a badge displays detailed information about the component, including the display name in Experience Builder, description of usage, component type, tag name, unique selector for CSS, display spacing (margin and padding) DXB styling hooks, and all custom properties with their current values in context. Additionally, clicking on the badges for the Theme and Section components will display the DXB Styling Hook values with mapping to the standard Theme Panel Property names.
Lightning Web Runtime (LWR) Build Info also supports unpublished sites viewed from Experience Builder Preview. However, it is important to note that when adding this extension, users will be prompted with a permission request to "Read and change all your data on all websites." This permission is necessary as a Salesforce Experience Cloud site can exist on any Custom Domain. Rest assured that all data required for this extension is self-contained, and there is no server communication or logging of any kind. The extension only reads and changes the page once the extension popup buttons have been clicked. Furthermore, the code for this extension is open-source for review.