Creating Examples

Examples are interactive and help others learn about a component, event, or interface.

You must create an .auradoc file before creating an example. For more information, see Creating Documentation Content.

In the Component Library, the Example tab renders your example with its code. For instance, see the lightning:avatar example at https://developer.salesforce.com/docs/component-library/bundle/lightning:avatar/. Each component, event, or interface can have multiple examples to demonstrate different use cases.

The following is an example component that demonstrates how to use lightning:avatar. The example uses a component in the lightningcomponentdemo namespace. You can create an example component in your own namespace, such as the default c namespace.

The example component is rendered as an interactive demo in the Example tab when it’s wired up using the <aura:example> tag in the .auradoc file.

The text content within the <aura:example> tag is rendered as a tooltip and as a subtitle below the label text. Any HTML markup is removed.

Examples are not supported for components with dependency on org data, such as with lightning:recordEditForm, lightning:recordForm, and lightning:recordViewForm. Examples are also not supported for components that import internal JavaScript libraries, which include:

  • lightning:formattedAddress
  • lightning:formattedRichText
  • lightning:inputAddress
  • lightning:inputName
  • lightning:inputRichText