Edit Code with Visual Studio Code for the Web in Microsoft Power Pages
Edit Code with Visual Studio Code for the Web
Microsoft Power Pages allows makers and developers to edit website code directly using Visual Studio Code for the Web. This browser-based development environment enables editing of HTML, CSS, JavaScript, Liquid templates, forms, lists, content snippets, and web templates without installing additional software.
Tip: Visual Studio Code for the Web is free and works entirely in your browser, making Power Pages development more accessible and efficient.What Can Be Edited?
Power Pages supports editing a variety of website components directly from Visual Studio Code for the Web.
| Metadata | Editable Content |
|---|---|
| Advanced Forms (Multistep) | JavaScript |
| Basic Forms | JavaScript |
| Content Snippets | All Supported Content |
| Lists | JavaScript |
| Web Files | View, Download, and Edit Text Files |
| Web Pages | HTML, CSS, JavaScript, Liquid |
| Web Templates | All Template Content |
Edit Code from Design Studio
- Open Power Pages Design Studio.
- Select Edit Code from the top-right corner.
- Choose Open Visual Studio Code.
- Sign in if prompted.
- Wait for Power Platform Tools to initialize.
- The site source code loads into Visual Studio Code.
Edit Web Pages
From the Pages workspace, select a page and choose Edit Code. You can modify HTML, CSS, JavaScript, and Liquid code associated with the selected page.
Edit Site Header
Use the Edit Site Header option to modify the header web template and customize the global navigation experience across the website.
Edit Custom CSS
Navigate to the Styling workspace and select Edit Code to modify custom CSS files that control the appearance of your Power Pages website.
Power Pages Actions View
The Actions View is available within Visual Studio Code and provides quick access to common Power Pages development tasks.
- Preview Site
- Open in Power Pages Studio
- Open in VS Code Desktop
Merge Conflict Notifications
If you attempt to save outdated files, Power Pages displays a merge conflict notification allowing you to compare or overwrite changes before saving.
Important: Always review merge conflicts carefully before overwriting existing changes.Update Content and Code
- Edit files using Visual Studio Code.
- Press Ctrl + S to save changes.
- Return to Design Studio.
- Select Sync to refresh metadata.
- Use Preview to verify updates.
VS Code for Web vs VS Code Desktop
| Feature | VS Code Web | VS Code Desktop |
|---|---|---|
| Direct Site Editing | Yes | No |
| Site Metadata Editing | Limited | Full |
| Power Platform CLI | No | Yes |
| GitHub Integration | No | Yes |
| Advanced Development | Limited | Yes |
Editing Code in Portal Management
If Visual Studio Code for the Web is unavailable in your environment, you can edit code through the Portal Management app.
- Web Pages
- Basic Forms
- Multistep Forms
- Lists
- Web Templates
Summary
Visual Studio Code for the Web provides a powerful browser-based development environment for Microsoft Power Pages. It enables makers and developers to edit website code, manage templates, customize forms, update styling, and streamline portal development without leaving the browser.