Work with your Handlebar based layouts in an interactive way

 

Just a small tips and tricks blog post about working with custom layouts in PnP Modern Search Results web parts.

The Results web part comes with a build in result template editor:

However, my preferred way to work with display template is to use the External Template URL:

1. Select the out of the box template you intend to customize.
2. Grap the base template config from the "Edit result template"
3. Paste it into VS Code/Notepad and save it as a HTML file on your PC.
4. Upload the file to a document library on your tenant
5. Copy the URL of the HTML file (get it from Version history or similar)
6. Paste it into the "Use an external template URL" field 
7. Sync the document library to your PC
8. Open the HTML file from the sync'ed document library on your PC using VS Code or similar.
9. Update the code and save, and all it takes to see the change is a F5 on the page with the web part.

 Easy, right?  👌😊

(And you get all of the modern editor stuff and GitHub Copilot as well)