Get Insights on Lightning Web Runtime Sites with a New Chrome Extension

Learn, demo, and build great Lightning Web Runtime (LWR) sites with a new Chrome extension that lets you get detailed information about components on the page!

Salesforce Experience Cloud allows admins and developers to build digital experiences while easily connecting with CRM data. The Experience Builder site editor makes it possible to rapidly build out these pixel-perfect sites on the Aura framework, and now on the Lightning Web Runtime.

I developed the LWR Build Info Chrome extension as a personal contribution with the goal of making it easy to view Experience Cloud LWR site-specific information. LWR sites make it easier to identify components on a site and apply custom styles to them. While this can be done today using your browser’s DevTools, the LWR Build Info extension is designed to make it easy!

Why build a tool?

Experience Cloud LWR sites provide connected, personalized, digital experiences at the B2C scale that’s expected today. This digital experience platform supports endless permutations of LWC component composability, both standard and custom. Components are not just added to the base page anymore. LWR has many layout components that can have components placed inside them by a site builder. And those components can potentially host components within them. You can even build your own custom LWC Layout components using slots.

An LWR site page being built in Experience Builder. A custom Product Tile component has been placed inside the standard Grid component's slot.

All this potential can be a lot to take in, and it can be challenging to know where to start with building a beautiful site that has components working well together.

Another challenge is being able to teach patterns because there are so many combinations. Before this tool, unless you had Experience Builder site access, it would be nearly impossible to learn from an existing site without complex and tedious page inspection.

There also was an opportunity to surface additional data, such as display name, usage description, tag name, unique selector, and styling properties values.

What is LWR Build Info?

With an understanding of these challenges firsthand, I became focused on making it easier to learn to demo and develop LWR sites. Members of the product team had recently created an amazing demo site, and I felt that anyone should be able to easily learn how it was built.

So, I worked out a way to build the first version of this tool to run embedded on specific sites only. I then figured there was no reason that it couldn’t just be a Chrome extension and work on any LWR site. With that, I was committed to giving everyone the ability to more easily understand how a Salesforce Lightning Web Runtime site is built! While standard browser DevTools should also be used during site development, LWR Build Info makes it easy to access LWR-specific component information and styling context.

Logo for Lightning Web Runtime Build Info Extension Popup's UI that can be opened on LWR sites. Includes buttons to show and hide the build information.

A clickable badge with the component's name being displayed at the location of each LWR component on the site

I created Lightning Web Runtime (LWR) Build Info as an open-source Chrome extension that is meant for everyone. It presents some fairly technical detail that not all users will need, but should still add value to anyone working with an LWR site. It’s not intended to have an opinion or “grade” a site as good or bad, it is truly just taking key component data on the page and enhancing the visibility of it.

It was also important to make the product documentation come alive. When you click on a standard or AppExchange component badge, many will include useful descriptions that can include links directly to either the app or documentation page.

An example of the component detail when clicking on the Section component's badge

How does LWR Build Info work?

Lightning Web Runtime sites are composed of Lightning Web Components. There is a big opportunity when all components are web components, which is that each component has a tag name in the HTML markup. The other critical
piece of information is that all components placed from Experience Builder have a unique data-component-id attribute. This consistent foundation made it possible to create this interactive layer of additional data about components on the page.

All data is self-contained and users can be assured that there is no server communication or logging when using the extension. As an open-source project, all code is available for review prior to use.

Conclusion

I encourage anyone new to LWR or currently working with LWR to give the extension a try and see what value it can add for you. I’m excited to see what it will become in the future, and look forward to it helping anyone learn LWR components and patterns more quickly, demo a site in a clear consistent way, or build the next great LWR site!

Resources

About the author

Craig Johnson is a Senior Success Architect at Salesforce. His current focus is on Product Adoption and Introduction within Customer Success. He has over a decade of Software Engineering and Technical expertise within the Salesforce ecosystem.