Is there a way to preview how a component will react if I add a new slds class to it? I am new to Lightning component development, doing my development in VS Code and using scratch orgs.

Currently I spend a lot of time making changes to a component, doing push source to default org, refreshing, and checking how something reacts if I add "slds-p-around--small" for example.

Is there a way to see what a class consisting of? Or a way to preview before I push to scratch org?

  • Are you working on Lightning Web Components? – Jayant Das Apr 17 '19 at 17:15
  • No, still in aura. @Jayant – Art S Apr 17 '19 at 17:16

There's no direct way to preview the changes in your aura components unless you have it in your Org. If you were using Lightning Web Components, you could though have utilized Lightning Web Components Playground.

But for your use case where you are working with aura components, you can utilize Developer Console. Let's say you want to test out a SLDS class, you can say create and utilize a test application (.app) as you will get a preview option on Developer Console. Then you can make any changes on the component, CSS, and preview it right from the Developer Console. Once you have confirmed the behavior, you can then make changes on your original component and push your code to the Org.

Sample Preview option in Developer Console for a test myApp.app.

enter image description here

| improve this answer | |
  • Yeah that is what I have been doing: <aura:application extends="force:slds" description="gos_addBulkCsvTestHarness"> <div class="body"> <c:gos_addBulkCsv/> </div> </aura:application > But since I am working from IDE it is a lot of back and forth – Art S Apr 17 '19 at 17:38
  • You are on the right track then. That's the only way as far as I can tell you. – Jayant Das Apr 17 '19 at 17:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.