Beyond the Studio: Unlocking Canvas App Inner Workings with the Source Code Tool

Every seasoned canvas app builder eventually hits a wall. You need to rename a variable that spreads across fifty controls. You need to audit every Collect call to understand a tricky bug. You want to compare what was deployed last sprint with the current version. The maker portal and Power Apps Studio, powerful as they are, simply aren't built for these deep surgical strikes. The .msapp file is a black box—until you open it.

Enter the Power Apps source code tool (pasopa). This open-source utility peels back the compressed layers of your app, exposing its logic as readable YAML and JSON files. It isn't a viewer; it is a workshop that empowers you to treat your canvas app like the serious piece of software it is.

Let's walk through setting it up and using it to solve real, frustrating problems using a fictional app, the Contoso Asset Tracker.

Getting the Tool Up and Running

The tool is still officially experimental, so there isn't a one-click installer. It requires a quick, manual build.

1. Install the prerequisite: You need the .NET Core 3.1 SDK (x64). Check your runtime version before downloading.
2. Clone the repository: Grab the latest source code from the Microsoft PowerApps Language Tooling GitHub repo.
3. Build the solution: Navigate to the cloned folder and run the build.cmd script. If successful, a bin\debug folder will appear containing the pasopa.exe executable.

It is easiest if you add this folder to your system's PATH environment variable. This allows you to run pasopa from any command prompt or terminal window without navigating to the build folder first.

Your First Extract: Understanding the Artifacts

Let's save our app locally. In Power Apps Studio, go to File > Save As > This Computer and download ContosoAssetTracker.msapp.

Open a terminal and run the unpack command:

pasopa -unpack "C:\Apps\ContosoAssetTracker.msapp" "C:\Source\ContosoAssetTracker"

After a few seconds, a folder filled with the innards of your app appears. Here is what matters:

• Src/ : The motherlode. Every screen, component, and theme is serialized into individual .fx.yaml files. This is where your Power Fx logic, property values, and control hierarchy live.
• Assets/ : Embedded media—images, videos, and audio files extracted for reuse or optimization.
• Connections/ & Datasources/ : Data source definitions and sample data. Handled carefully, as these can contain sensitive references.
• Entropy/ : App metadata. The Entropy.json file is your new best friend for performance auditing.

Real-World Scenarios

The real power of the tool isn't viewing the files—it is using standard developer tools (like VS Code and Git) to manipulate them.

Scenario 1: The Great Rename

Your app has a variable called locSelectedCategory. The new naming convention demands locSelectedAssetType. In the Studio, this is a click-by-click nightmare without any official refactoring support.

With the source code tool, it becomes a safe, structured operation.

1. Open the Src/ folder in VS Code.
2. Hit Ctrl+Shift+F (Find in Files).
3. Search for locSelectedCategory. The results pane shows you every single usage across every screen YAML.
4. Hit Ctrl+Shift+H (Replace in Files).
5. Enter locSelectedAssetType as the replacement.
6. Review each change carefully. The context pane shows the surrounding formulas.

You can now update this variable in seconds instead of hours.

Scenario 2: The Elusive Collection Origin

The Studio's built-in dependency checker works well for variables, but it completely ignores collections. Finding where the colAssetAudit collection is populated can involve expanding every OnVisible and OnSelect in your app.

In VS Code, you just search.

Search term: Collect(colAssetAudit
Search scope: /Src/

The search result immediately jumps to the exact line in the YAML file where the collection is initialized or appended to. This is invaluable for debugging data flow and understanding application state.

Scenario 3: Code Review at Scale

Imagine reviewing a complex screen like InventoryDetailScreen.yaml. In the YAML format, every single property of every single control is listed vertically. You can quickly scan for:

• Hardcoded color values (RGBA(0,0,0,1) instead of a theme variable).
• Unnecessary If statements that could be Switch.
• Missing error handling on Patch calls.
• Inefficient delegation patterns in Items properties.

You can collapse the YAML outline and see the entire screen's logic at a glance. This is a massive leap forward from expanding every individual control in the Studio tree view.

Scenario 4: Bringing Sanity to Version History

The maker portal stores versions, but doesn't offer a meaningful diff. You cannot see exactly what a co-worker changed in the last week.

By saving two versions of the .msapp file, unpacking both, and using VS Code's Compare Selected feature on the Src/ folders, you get a side-by-side diff of every single file. You can see the exact line of YAML that was added, removed, or modified. This is the foundation of a healthy ALM process.

Guarding Against Pitfalls: Security, Performance, and Delegation

Having your code in flat files gives you new superpowers, but also new responsibilities.

Security

The Connections and Datasources folders contain connection references and sample data. Treat these as sensitive configuration files. If you push your source to a public GitHub repo, ensure a solid .gitignore that excludes these folders, or scrub them before your first commit.

Performance

Open Entropy/Entropy.json. Find the "ControlCount" property. Microsoft's recommended soft limit is 500 controls. If you are far over this number, the source code makes it easy to identify which screens are bloated—just check the file sizes in Src/.

Delegation

You can now audit delegation en masse. Search the entire Src/ folder for Filter(LargeSharePointList, ...) or LookUp(BigSqlTable, ...). If the Items property of a gallery is using a filter that exceeds your data source's delegation limit, you will spot it immediately in the YAML. This is much faster than checking every single gallery manually in the Studio.

Common Obstacles and How to Navigate Them

• The Unpack Produces an Empty Folder: Double-check your paths in the command line. Spaces in folder names require quotes. The .msapp file might also be corrupted or from an incompatible runtime version.
• Packing Fails with an Obscure Error: YAML is indentation-sensitive. An extra space in a YAML file within Src/ can break the entire pack process. The error message rarely points to the exact line. The best mitigation is to make small, incremental changes, pack and test frequently. Don't create a monster diff without verifying it compiles.
• Overwriting Changes from the Studio: The tool has no concept of "who edited last." If a teammate updated a control in the Studio while you were editing the YAML files, your pack operation will overwrite their work. Always start a session by extracting the latest .msapp from the shared environment.

The Road Ahead

The source code tool is more than a utility—it is a glimpse into the future of Canvas App development.

• Automated Pipelines: Imagine a GitHub Action that unpacks your app, runs linting rules against the YAML, and then packs and deploys it. This is completely viable today.
• Collaborative Development: The days of the "who has the latest msapp" game are numbered. Merging YAML files isn't always easy, but it is the only viable path to true multi-developer canvas apps.
• Code Generation: Having the app surface as structured text opens the door to scaffolding tools that can generate screens and components from a specification.

The setup is a minor hurdle, but the productivity gains in refactoring, auditing, and versioning are immediate and profound. Start with a small, non-critical app. Get comfortable with the YAML files. You will never look at a .msapp file the same way again.

References

• Original article by Matthew Devaney: Power Apps Source Code Tool
• Microsoft Power Apps Blog: Source Code Files for Canvas Apps
• GitHub Repository: PowerApps-Language-Tooling
• Microsoft Learn: Understand canvas app source code file structure