Salesforce LWC Editor in browser

Salesforce made a great move by making the Web Components part of the eco system by introducing Lightning Web Component(LWC). But for some reason, they decided not to provide the ability to code it directly from their developer console. Currently the only way to do it is, is by using the VS Code. This is great, but if you’re in a hurry and want to make some quick changes, it won’t be easy.

To resolve this, I decided to make a quick-to-use LWC editor in my chrome extension Salesforce Advanced Code Searcher.

How to use:

  1. Install the extension by going to : https://chrome.google.com/webstore/detail/salesforce-advanced-code/lnkgcmpjkkkeffambkllliefdpjdklmi
  2. Navigate to your salesforce setup Page. You should see a “Click here to authorize” button. Click on it to authorize the extension.
Image for post

3. Once the authorization is complete, Navigate to the LWC Editor tab and you should see all the Components that already exists in the Org. In case there are none then you can start by creating one.

Image for post

What can you do?

  1. You can edit the components and save it back.

Look for the extension that you are looking for in the left file explorer, click open the link and that should open the file in a new tab. Make the required changes and hit Ctrl+s (PC) or Cmd +s (Mac) to save the change. In case there are errors it will be displayed in the console log right below the editor.

2. You can add a file in an existing components.

Image for post
Image for post

Right-click on the component where you want to add a file. You will be presented with 2 options : New File & Delete. Click on the New File to open a modal dialog where you can key in the file name (do not add an extension). Click on the Create File button and it will add the file under the component.

3. You can delete the files in the component.

Image for post

5. You can also change the theme:

Image for post