How to edit your power page directly on VS Code

This post has been republished via RSS; it originally appeared at: New blog articles in Microsoft Tech Community.


When you think of low code development, you think of inclusive technology as this introduces a visual approach (drag-drop) to developing software. Low code development empowers a citizen developer to quickly put together custom software solutions and increase focus on high-impact business operations. On the other hand, a code-first developer takes pride in writing code, working with source control - the traditional way of software development. But what happens when code-first developers need to contribute to the same project as citizen developers? Does this imply that either the code-first developers leave their area of comfort (dev environment) and fit into the citizen developer's world of low/no code and vice versa? Absolutely not!

Microsoft introduces you to fusion development, an approach that allows code-first developers to build low code solutions without having to leave their development environments.


Follow along and see how you can edit your power page on visual studio code and have your simple customer facing site live in no time.


What you need.

Step 1: Create your power page, here is a step-by-step guide on how to do so by   


Step 2: Install the Power Platform Tools Extension on Visual Studio Code

Switch to VS Code, and on the vertical tab on the left, see 1, click the extension icon and type 'Power Platform Tool' to install the extension. This action will also make the power platform Command Line Interface (CLI), also referred to as pac, available on your terminal.


Once you install the extension, verify that you have the CLI available and get its version by opening a new terminal, Ctrl+Shift+`, then type in the command below






Step 3: Create an authentication profile to connect to your Microsoft Dataverse 

Type in the command below, click enter and follow the prompts to sign into your account to create a new authentication profile and connect it to your environment. Give your profile a name and replace the url with your instance url. 

#Students can use the M365 developer account to create their own environments



pac auth create --name GivenName --url


To get your instance url, navigate to your power pages environment >> click on the gear/settings) icon (1) >> click on session details (2) >> copy the instance url (3)



Once you do that, you can type in the below command on your terminal to view the website(s) present in the newly added authentication account.


pac paportal list


Tip: You do not have to cram all these commands, if you need help performing a particular action, you literally just ask the terminal of help. Example

If you need to know what you can do as admin, just type pac admin help, and so on




Step 4: Download your power page to your local machine

Type in the below command to download the power page. Specify the website ID and the path to save it (see website Id at previous step - pac portal list)


pac paportal download -- path –- websiteId




Navigate to file explorer and open the downloaded folder in VSCode


Step 5 (Optional) : Let’s now make our files a little more appealing


Click the extensions icon on the left and the select the power platform tools extension (see 1) >> click the ‘Set File Icon Theme’ – blue button (see 2) >> then select the PowerApps Portals Icons (Visual Studio Code)


Having successfully connected to your dataverse environment, downloaded your power page and set the icon theme, next up is to simply edit your site.


Step 6: Edit your power page/site

Navigate to the web page that you would like to edit to see the code.


With your code ready for changes, you would need to have a live view of the updates, and this is all possible without you leaving your editor, by clicking on the preview icon on the far right, see 1 above.



 You can now customize your site to meet your preferences on code. I’ve made a few changes on mine.



Step 7: Upload your customized site to power pages

Copy the path to your downloaded folder and type in the below command on your terminal. This action will update the files that you have locally modified to the power pages.



pac paportal upload --path





That's all to be done. Switch back to the power pages site and preview your website to see the updates you've just made.



Congratulations!! You have just edited a power page as a code-first developer while still on your favorite editor. 

Happy coding! #FusionDevelopment


Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.