#PowerPlatformTip 119: 'Web-Based Editing with VS Code'

TL;DR: Open vscode.dev in the browser when the formula bar or the expression editor is too small. Paste a flow’s code view as JSON or an app’s copied YAML, and use multi-cursor editing, find and replace with regular expressions, and JSON validation. No install, works on any machine with Edge or Chrome.

💡 Challenge

The Power Apps formula bar and the Power Automate expression editor are fine for one-liners. For a long Switch(), a 200-line flow definition from the code view, or a YAML snippet copied from Power Apps Studio, you need more space, search and replace, and an overview, ideally on a machine where you can’t install anything.

✅ Solution

Use VS Code for the Web at vscode.dev. It runs entirely in the browser, needs no installation, and brings the VS Code editor with multi-cursor editing, find and replace and syntax coloring. JSON gets nearly the same support as in the desktop version, including validation and formatting.

🔧 How It’s Done

1. Open the editor.

🔸 Go to https://vscode.dev. Select New Text File for a quick scratch pad, or open a local folder. Opening a local folder needs a browser with the File System Access API such as Edge or Chrome; in Firefox and Safari you open single files instead.

2. Choose the language mode.

🔸 Bottom right in the status bar, select the language: JSON for a flow definition or an HTTP body, YAML for code copied from Power Apps Studio. Power Fx has no built-in language mode, so leave formulas as plain text.

3. Edit with the power tools.

🔸 Multi-cursor: Alt + click places several cursors, Ctrl + D selects the next occurrence of the current word. Rename a variable in ten places at once.

🔸 Find and replace with regex: Ctrl + H, then enable regular expressions, for example to swap a column name in every Patch().

🔸 Format JSON: Shift + Alt + F formats a flow definition you pasted from the code view, and the Problems pane shows missing commas or brackets.

4. Paste back.

🔸 Copy the result back into the formula bar, the expression editor or the action’s code view, and save in Power Apps or Power Automate.

🎉 Result

Long formulas and definitions get the space and editing tools they need, and nothing has to be installed on the machine you work on.

🌟 Key Advantages

🔸 More space: a full editor instead of a single-line formula bar.

🔸 JSON support: validation and formatting for flow definitions and HTTP bodies.

🔸 Anywhere: runs in the browser, also on locked-down machines.

⚠️ Good to Know

🔸 VS Code for the Web has no terminal and no debugger, and only extensions built for the browser run there. For Power Platform CLI work or the Power Platform Tools extension, use the desktop VS Code.

🔸 Text you paste into New Text File stays in the browser. Don’t leave secrets such as connection strings or keys in an unsaved tab on a shared machine.

🛠️ FAQ

1. What is vscode.dev and why use it for Power Platform?

It is the browser version of Visual Studio Code. It gives you a full editor with no local installation, which is handy for long formulas, flow definitions and YAML.

2. Is there syntax highlighting for Power Fx?

Not built in. JSON, YAML, HTML and CSS are highlighted, and JSON, HTML and CSS get nearly the same support as in the desktop version; Power Fx formulas are edited as plain text, which still gives you multi-cursor and find and replace.

3. Do I need to sign in?

No. Signing in is only needed for Settings Sync, so your settings and extensions follow you between browsers and the desktop app.

🔗 Related Tips

• #PowerPlatformTip 89: Code View / Peak Code, get the code of a control or action you then edit here.
• #PowerPlatformTip 130: Build Apps Faster with YAML, the YAML you copy from Power Apps Studio and edit in the browser.
• #PowerPlatformTip 145: Power Platform Tools, more browser-based helpers for formulas and expressions.