Power Apps: Canvas Apps vs. Code Apps – When Low-Code Hits Its Ceiling

Canvas Apps vs Code Apps decision point - visual representation of low-code meeting its architectural ceiling with pro-code path ahead

Estimated reading time: 25 minutes

Most Power Platform architects reach for Canvas Apps by default — because they know them, and they work. This article will help you compare Canvas Apps vs Code Apps and understand the pros and cons of each. But there’s a moment in every serious project where Canvas stops being an advantage and starts being a ceiling. In this article, I break down exactly where that line is, what Code Apps actually are (they’re not PCF), and how to decide which one belongs in your next solution.


Introduction

Let me tell you about a moment I’ve lived more than once — the moment every Power Platform architect faces when deciding between Canvas Apps vs Code Apps.

You’re three months into a Power Platform engagement. The Canvas App you built in week two has grown into something impressive — multiple screens, a solid data model in Dataverse, Power Automate flows humming in the background. The stakeholders are happy. The maker on the client side has already started adding screens themselves. Everything looks great.

Then the requirements change. They always do.

Suddenly you need a dynamic, filterable data grid that performs well against 50,000 Dataverse rows. Or a custom chart that needs real-time updates via a WebSocket connection. The client’s design team hands you a Figma file with pixel-perfect components that look nothing like the standard Power Apps controls. And then — my personal favourite — someone asks: “Can we write unit tests for the business logic?”

And you’re standing there, looking at Power Fx, knowing it can’t get you there.

This is the ceiling. And it’s not a flaw — Canvas Apps are genuinely excellent tools. But every tool has a boundary, and as a Power Platform architect, knowing exactly where that boundary sits is one of the most valuable things you can offer a client.

This article is about that boundary, and what’s on the other side of it. It’s about understanding when to choose Canvas Apps vs Code Apps, and why that decision matters more in 2026 than ever before.


The Moment Everything Changed

I’ve been building on the Microsoft stack for over 25 years. I remember when building a business app meant spinning up an ASP.NET project, writing data access layers, and deploying to IIS with a prayer. Power Apps changed the game. Canvas Apps in particular gave teams the ability to ship working, Dataverse-connected business applications in days instead of months.

But something happened in 2024 and into 2025 that shifted my thinking. Working on the AIDevMe Environment Management Application — a solution for managing Power Platform environments through Dataverse, Power Automate, and a custom frontend — I hit the Canvas App ceiling hard. The frontend requirements called for a dynamic, state-rich interface that would have required so many workarounds in Canvas that it would have become unmaintainable within a year.

That’s when I looked seriously at Power Apps Code Apps — not as a curiosity, but as the right tool for that specific job.

What I found changed how I think about Power Platform architecture. And if you’re building serious solutions on this platform, it should change how you think too.


Three tiers of Power Apps architecture - Canvas Apps (UI-first), Model-Driven Apps (data-first), and Code Apps (developer-first)

The Three Tiers of Power Apps: A Quick Map

Before we go deep, let’s orient ourselves. Power Apps today has three distinct paradigms, each responding to a different design logic:

Canvas Apps — UI-first. You start with a blank canvas, drag controls, wire data with Power Fx formulas. The interface is completely yours to design. Over 1,500 connectors available out of the box.

Model-Driven Apps — Data-first. You define the Dataverse schema, and the app interface is generated from it. Forms, views, dashboards, and BPFs. Less UI flexibility, more structural power.

Code Apps — Developer-first. You write React (or Vue, or another framework) and TypeScript in VS Code, access Power Platform data sources and connectors via the Power Apps client library in JavaScript, and manage your project with the PAC CLI or the new npm-based CLI. The app is packaged into a solution and deployed like any other Power Platform component.

Most comparison articles stop at Canvas vs. Model-Driven, because that’s the decision most teams face most of the time. But the comparison that matters for architects in 2026 is Canvas vs. Code Apps — the new axis, and the one nobody is writing about clearly enough.


Canvas Apps strengths - rapid development, multiple connectors, citizen developer friendly interface

Canvas Apps: Where They Truly Shine

I want to be clear about something before this turns into a Canvas Apps hit piece: they are genuinely excellent, and I reach for them constantly. The question is always when, not whether.

Canvas Apps are the right choice when:

You need to connect multiple heterogeneous data sources. Canvas Apps have historically been the clear winner here with 1,500+ connectors. That gap has narrowed — Code Apps now support access to Power Platform data sources and connectors directly from JavaScript via the Power Apps client library. But for rapid multi-connector scenarios without custom wiring, Canvas Apps still have the lower-friction path.

Your maker is a citizen developer or a Power Platform developer (not a pro-code dev). Canvas Apps are designed for makers. Power Fx is approachable, the studio is browser-based, and you don’t need a local development environment. The persona fit is real.

You need to ship quickly. A Canvas App that covers 80% of requirements can be in production within a week. That time-to-value proposition is hard to beat for internal tools, prototypes, and straightforward data entry scenarios.

Your UI requirements are achievable with standard controls. The Power Apps control library is extensive and improving. If your design doesn’t require custom components beyond what PCF controls can handle, Canvas gets you there without the overhead of a pro-code project.

The team needs to maintain it long-term without a developer on call. Canvas Apps can be maintained and extended by trained makers without code review, merge conflicts, or CLI tooling.

These are not small advantages. For a huge proportion of Power Platform projects, Canvas Apps are the correct answer, full stop.


Canvas Apps architectural ceiling - performance constraints, limited testing, complex state management challenges

The Ceiling: Where Canvas Apps Start to Fight Back

Here’s what nobody tells you in the official documentation: Canvas Apps have a capability ceiling, and when you hit it, you feel it immediately.

Performance at scale. Canvas Apps struggle with large datasets. The delegation model in Power Fx helps, but complex filtering, aggregations, and dynamic sorting against tens of thousands of Dataverse rows require workarounds — intermediate collections, stored Power Automate flows, and defensive UI patterns that add complexity without adding value. A Code App loading the same dataset with a React component using the Power Apps client library’s direct OData access? No comparison.

Component reuse and maintainability. Power Apps components exist, but they’re not the same as proper software components. State management across screens becomes painful in large apps. You can’t import npm packages. There’s no dependency injection. When I’ve seen Canvas Apps grow beyond 30–40 screens, they almost always become difficult to maintain — not because the developers were careless, but because the paradigm doesn’t scale to that complexity.

No real unit testing. This one hurts on serious enterprise engagements. You cannot write meaningful unit tests for Power Fx formulas in the way a professional development team expects. PAC CLI has some testing support, but it doesn’t compare to what you get with Jest and React Testing Library in a Code App.

Theming and pixel-perfect design. Modern theming in Canvas Apps has improved, but if a client’s design system requires precise, consistent styling that goes beyond what the theming panel offers — custom fonts loaded dynamically, complex layout systems, animation — you’ll be fighting the platform every step of the way.

ALM friction for complex solutions. Canvas Apps in source control look like a bundle of JSON and YAML. Merge conflicts are painful. Code reviews are nearly impossible when the diff is a serialised canvas object model. Code Apps live in your repository as real TypeScript source files with a meaningful diff.

I want to be honest: none of these limitations mean Canvas Apps are wrong. They mean Canvas Apps have a context, and when your project exceeds that context, you need something else.


Code Apps architecture - React, TypeScript, VS Code, PAC CLI, and Power Platform integration

Code Apps: What They Actually Are

This is where most people’s mental model breaks down. When I say “Power Apps Code Apps,” a lot of architects immediately think “oh, PCF controls.” That’s not what this is.

PCF (Power Apps Component Framework) controls are custom UI components — a single control you embed in a Canvas App or Model-Driven App. They’re React components with a specific lifecycle, wrapped in a framework that integrates them into the Power Apps runtime.

Code Apps are full applications. A Code App is a React + TypeScript project that you develop in VS Code, run locally against a live Dataverse environment, and deploy as a solution component into Power Platform. It has its own routing, its own state management, its own component tree. It accesses Power Platform data sources — including Dataverse and the full connector catalogue — directly from JavaScript through the Power Apps client library.

One more operational prerequisite worth noting: Code Apps must be explicitly enabled per environment by a Power Platform admin or environment admin in the Power Platform admin center. It’s not on by default. If you’re planning to introduce Code Apps into a client environment, add this to your project setup checklist early — waiting for admin access on day one of development is a painful and avoidable delay.

One important tooling note before the code sample: Microsoft recently introduced a new npm-based CLI (@microsoft/power-apps) specifically for Code Apps, and the older pac code commands in the Power Platform CLI are being deprecated. The new CLI reduces prerequisites and is the direction Microsoft is heading. That said, the current “create from scratch” quickstart in the official docs still uses a hybrid approach — the Vite scaffold comes from the official GitHub templates repository, while pac code init and pac code push remain the PAC CLI commands for initialising and deploying. Here’s the accurate workflow as documented:

Bash
# 1. Scaffold a new Code App from the official Vite template
npx degit github:microsoft/PowerAppsCodeApps/templates/vite my-app
cd my-app

# 2. Authenticate the PAC CLI against your tenant and select your environment
pac auth create
pac env select --environment <Your environment ID>

# 3. Install the Power Apps client library and initialise the Code App
npm install
pac code init --displayname "My Code App"

# 4. Run the local dev server (open the "Local Play" URL in the same
#    browser profile as your Power Platform tenant)
npm run dev

# 5. Build and push to your Power Platform environment
npm run build | pac code push

You write real TypeScript and use real React patterns — hooks, context, custom components. Any npm package that runs in a browser is available. The full developer experience comes with it: VS Code IntelliSense, proper debugging, source maps, and a test suite that runs in CI/CD.

Developer gotcha: Since December 2025, Chrome and Edge both block requests from public origins to local endpoints by default. When running npm run dev, open the Local Play URL in the same browser profile as your Power Platform tenant, and grant local network access when the browser prompts. This is not a Code Apps bug — it’s a browser-level security change affecting all localhost dev workflows.

And critically: when you’re done, the app lives inside a Power Platform solution, inheriting enterprise-grade managed platform capabilities — Microsoft Entra authentication, DLP policy enforcement at launch, Conditional Access per app, App Quarantine, health metrics, tenant isolation, and Azure B2B external user access. It’s not an escape hatch out of the platform — it’s the platform’s highest capability tier.

There are, however, a handful of current limitations worth knowing before you commit to Code Apps on a project:

  • Code Apps don’t support Power Platform Git integration — so your ALM strategy needs to account for this. Source control works through your own repo and PAC CLI, not through the built-in Power Platform Git integration feature.
  • Code Apps aren’t supported in the Power Apps mobile app or Power Apps for Windows — they run in the browser only.
  • Code Apps don’t yet support Power BI data integration (the PowerBIIntegration function), though they can be embedded in Power BI Reports via the Power Apps Visual.
  • Code Apps don’t support SharePoint forms integration.

These are documented limitations as of early 2026. Some will be resolved in future releases — the GitHub issues list in the Power Apps Code Apps repository is the best place to track progress.

Agentic development: the microsoft/power-platform-skills marketplace

One thing I didn’t expect when I started working with Code Apps is how quickly Microsoft moved to integrate agentic coding tools into the development workflow. There’s now an official plugin marketplace — microsoft/power-platform-skills — that ships Claude Code and GitHub Copilot plugins for every Power Apps type, not just Code Apps.

The marketplace currently includes four plugins:

  • code-apps — Build and deploy Code Apps using React, Vite, and Power Platform connectors. This is the one you want for the pro-code path described in this article.
  • canvas-apps — Author Canvas Apps using the Canvas Authoring MCP server, writing .pa.yaml files rather than clicking through the studio. Requires the .NET 10 SDK.
  • model-apps — Build and deploy generative pages for Model-Driven Apps using React + TypeScript + Fluent, deployed via PAC CLI.
  • power-pages — Create and deploy full Power Pages sites (SPAs) with React, Angular, Vue, or Astro.

Installing it is straightforward. Run the one-liner installer in PowerShell or bash — it detects whether you’re using Claude Code or GitHub Copilot CLI, installs the PAC CLI if missing, and registers all plugins with auto-update:

Bash
# Mac/Linux/Windows (cmd)
curl -fsSL https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js | node

# Windows (PowerShell)
iwr https://raw.githubusercontent.com/microsoft/power-platform-skills/main/scripts/install.js -OutFile install.js; node install.js; del install.js

Or install selectively inside a Claude Code or GitHub Copilot CLI session:

/plugin marketplace add microsoft/power-platform-skills
/plugin install code-apps@power-platform-skills
/plugin install canvas-apps@power-platform-skills

What makes this significant from an architectural standpoint is the implication: Microsoft now treats Claude Code and GitHub Copilot as first-class development surfaces for Power Platform — not afterthoughts. The code-apps plugin in particular gives you an agent that understands the Code Apps stack end-to-end: scaffolding, connector wiring, PAC CLI deployment, and the platform conventions that a general-purpose coding agent wouldn’t know without guidance.

For the fusion team pattern I describe later in this article, this is worth noting: the canvas-apps plugin gives your maker-side developer an agentic authoring surface too, generating PA YAML through the Canvas Authoring MCP server. Different plugins for different personas, all under the same marketplace — which is exactly the pattern.

The plugins are in preview as of early 2026. I’d treat them as a productivity accelerator rather than a production dependency for now, but the direction is clear.

The development experience is closer to writing a modern web application than building in Power Apps Studio. That’s the trade-off, and it’s deliberate.


Side-by-side comparison infographic of Canvas Apps vs Code Apps across key dimensions

Head-to-Head: Canvas Apps vs. Code Apps

Now that we’ve explored where each app type shines and where it struggles, let’s put them side by side across the dimensions that matter most to architects and development teams. This comparison isn’t about declaring a winner — it’s about understanding which tool fits your specific project constraints, team capabilities, and long-term maintenance requirements.

DimensionCanvas AppsCode Apps
ParadigmUI-first, drag-and-dropDeveloper-first, code-first
Primary languagePower FxReact + TypeScript
ToolingPower Apps Studio (browser)VS Code + PAC CLI + npm
Data access1,500+ connectors via Power Fx1,500+ connectors via Power Apps client library (JS)
Unit testingLimited (PAC CLI basic)Full (Jest, React Testing Library)
Component reuseCanvas components (limited)npm packages, full React ecosystem
ALM / source controlJSON/YAML bundlesReal TypeScript files, clean diffs
Performance ceilingMedium — delegation constraintsHigh — full SDK access, OData control
Pixel-perfect UIConstrained by control libraryUnconstrained — full CSS control
Time to first prototypeHoursDays
Target developer personaMaker, Power Platform developerPro developer, fusion team
Long-term maintainabilityGood for small/medium appsBetter for large, complex apps
LicensingStandard Power Apps per-user / per-appPower Apps Premium required for end-users
Platform governanceFull (environments, DLP, solutions)Full (environments, DLP, solutions)
CI/CD integrationPower Platform PipelinesGitHub Actions + PAC CLI

mportant distinction from standard Power Apps per-user licensing — make sure you account for it in your project’s licensing model. The Premium requirement reflects the platform-managed capabilities Code Apps inherit: Managed Environments, Conditional Access, DLP enforcement, and enterprise governance. The capability uplift is real, and so is the cost.


Architecture Deep Dive: How Each App Type Actually Works

The comparison table tells you what each app type does differently. Understanding the runtime architecture tells you why — and that matters when you’re making a long-term commitment on an enterprise project.

Canvas Apps runtime architecture showing data flow through connector layer, API Management, and platform runtime

Canvas Apps architecture

When a user opens a canvas app, the app goes through several phases of execution before showing any user interface: authenticating the user, retrieving metadata about the platform version and data sources, initialising the app by running the OnStart property, and then rendering the first screen with data.

The data flow is equally layered. Data calls from canvas apps send data to tabular data sources by using connectors over the OData protocol. OData requests flow to back-end layers to reach out to the target data source and retrieve data for the client, or commit data to the data source.

There are three distinct paths depending on the data source:

  • Standard online connectors — requests travel from the client through Azure API Management and the connector layer to the target data source and back. Each layer adds latency.
  • On-premises sources — if a canvas app connects to an on-premises data source like SQL Server, you need an on-premises data gateway. This gateway is mandatory for accessing on-premises data sources and converts OData protocol requests to SQL Data Manipulation Language (DML) statements.
  • Dataverse — the fast path. When you use Microsoft Dataverse as the data source, data requests go to the environment instance directly — without passing through Azure API Management. Because of this, the performance of data calls is faster compared to the rest of the data sources.

This layered connector model is Canvas Apps’ greatest strength (1,500+ sources, unified abstraction) and its primary performance constraint — every data call traverses infrastructure you don’t control, which is why delegation matters so much at scale.

The Canvas App itself is authored and stored as a .msapp bundle — a ZIP archive containing serialised screen definitions, Power Fx expressions, and control metadata. It runs inside the Power Apps player runtime, which handles rendering, connector orchestration, and formula evaluation. There is no direct DOM access, no npm ecosystem, no module bundler. Your logic lives entirely inside Power Fx.

Code Apps runtime architecture showing compiled React app, Power Apps client library, and platform host integration

Code Apps architecture

Power Apps code app architecture consists of: the Power Apps client library for code apps (sometimes called the ‘Power Apps SDK’), generated models and services for connectors, the power.config.json configuration file, and the Power Apps host.

The development and runtime layers are cleanly separated:

At development time:

An HTML or TypeScript/JavaScript app is a prerequisite to use code apps technology. Code apps support Single-Page Applications (SPAs). The Power Platform CLI and Power Apps client library for code apps enable your app to use Power Platform connectors and be hosted in a Power Platform environment.

The three development components are:

ComponentRole
power.config.jsonMetadata file generated by the client library. Used by both CLI and the library to manage Power Platform connections and publish the app. Your application logic never touches this file directly.
Power Apps client library (@microsoft/power-apps)The npm package. Exposes APIs your app interacts with directly, and manages models and services as connectors are added or removed.
PAC CLI (pac code push)Takes the compiled app bundle and publishes it to a Power Platform environment where it can be shared and run.

At runtime:

When a code app runs, there are three logical components: your code, the Power Apps client library for code apps, and the Power Apps host. The Power Apps client library exposes APIs that your code can use and the generated models and services your app uses to perform data requests via Power Platform connectors. The Power Apps host manages end-user authentication, app loading, and presenting contextual messages to the user if an app fails to load.

Your TypeScript code communicates with the platform through the client library, which handles the connector plumbing. The Power Apps host handles authentication and app lifecycle — you never write authentication code yourself. What runs in the browser is your compiled, bundled JavaScript (via Vite), loaded and orchestrated by the host.

The architectural difference that matters

The distinction isn’t just technical — it’s philosophical, and it shapes every architectural decision downstream.

Canvas Apps operate on a platform-managed abstraction. The runtime interprets your Power Fx formulas, manages state, handles rendering, and routes data calls through the connector layer. You work within the platform’s model. This is powerful for rapid delivery and broad connector coverage, but it means the platform controls performance boundaries, state management patterns, and what’s possible at the component level.

Code Apps operate on a developer-controlled execution model. Your TypeScript runs as compiled JavaScript in the browser. The platform provides the host (authentication, app lifecycle) and the client library (connector access), but everything between — component architecture, state management, rendering logic, data fetching strategy — is yours to design and own. You get full React patterns: hooks, context, custom components, lazy loading, memoisation. The platform constraints don’t disappear, but they move from “the runtime won’t let you do this” to “the CSP policy needs to allow this origin.”

For architects, the key implication is: Code Apps are closer in architecture to a React web application that happens to run inside Power Platform than to a Canvas App that happens to be built with code. That’s both their power and their cost.


Content Security Policy comparison between Canvas Apps (permissive by default) and Code Apps (strict by default)

Security by Default vs. Security by Configuration

Here’s something the comparison table can’t fully capture: the security posture of Canvas Apps and Code Apps is philosophically different, and that difference has real consequences on enterprise and regulated-industry projects.

With Canvas and Model-Driven Apps, Content Security Policy is off by default. An admin has to explicitly enable it in the Power Platform admin center. Even when enabled without Strict Mode, the default policy is deliberately permissive — script-src * 'unsafe-inline' 'unsafe-eval' blob: — which means virtually any script source is allowed. The platform trades security tightness for compatibility, because Canvas Apps can embed third-party controls, PCF components, and custom connectors from a wide range of sources that a restrictive CSP would block.

With Code Apps, CSP is enforced by default, and it’s strict from day one. There’s no opt-in step. The moment you deploy a Code App, the platform ships a restrictive policy — script-src 'self' <platform>connect-src 'none'form-action 'none'worker-src 'none'. This is the right default for a pro-code app where you control the entire dependency tree. But it also means that if your app calls external APIs, loads fonts from a CDN, or embeds an iframe from a third-party service, you’ll need to explicitly open those directives before they’ll work.

That connect-src 'none' default is the one that catches developers off guard most often. Every outbound fetch or XHR call — including calls to your own Azure Functions backend — is blocked until you allowlist the origin. You configure this per environment in the Power Platform admin center under Settings → Privacy + Security → Content Security Policy → App tab, or via the Power Platform REST API (PowerApps_CSPConfigCodeApps setting).

The other major difference: directive control. For Canvas and Model-Driven Apps, the only customisable directive is frame-ancestors — everything else is platform-controlled and fixed. Code Apps give you full control over all 15 directives individually. This matters in regulated industries where your InfoSec team needs to lock down exactly which origins the app can communicate with — something simply not possible with Canvas Apps today.

I’ll be direct about the architectural implication: if you’re building a Code App for a financial services or healthcare client with strict security requirements, the CSP model is actually an advantage. You can prove to a security auditor exactly which origins are allowlisted, enforce it at the platform level rather than relying on application code, and get violation reports sent to a dedicated SIEM endpoint. Canvas Apps can’t offer that level of CSP specificity.

The flip side is that Code Apps require more intentional security configuration upfront. Spin one up without reading the CSP docs first, and you’ll spend an afternoon wondering why your fetch calls are silently failing. The head-to-head comparison table and the official CSP documentation for Code Apps and Canvas/Model-Driven Apps are your starting points — bookmark both before your first Code App deployment.


Fusion team architecture pattern showing Canvas Apps and Code Apps working together with shared Dataverse backend

The Fusion Team Pattern: Using Both Together

Here’s the architectural insight that changed how I design Power Platform solutions: Canvas Apps and Code Apps are not mutually exclusive. In fact, the most capable solutions use both.

In the AIDevMe Environment Management Application, the architecture looked like this:

  • Dataverse as the shared backend — environment records, configuration tables, audit logs.
  • Power Automate flows for long-running operations — environment provisioning, GitHub API sync, approval workflows.
  • A Canvas App for the operational dashboard used daily by the Platform team — quick environment status, simple request submission, notifications. Maintained by a maker without developer involvement.
  • A Code App for the environment management frontend used by architects — dynamic filtering across large environment datasets, complex state management, real-time status updates, integration with the GitHub API response data rendered in custom components.

The maker built the Canvas App screens herself, after an initial setup I provided. The Code App was something I owned end-to-end as a developer, with proper unit tests and a GitHub Actions pipeline.

Neither app was a compromise. Each was exactly the right tool for its audience and its requirements.

This is the fusion team pattern in practice: citizen developers and professional developers working in parallel, on different parts of the same solution, each in the paradigm that fits their skills and their requirements.

The governance model is the same. The Dataverse tables are shared. The solution boundary is common. The Power Platform environment holds everything together.

When a stakeholder asks “should we use Canvas or Code Apps?” — often the right answer is “yes.”


Decision flowchart for choosing between Canvas Apps and Code Apps based on project requirements

The Decision Framework: Which One Do You Choose?

If I had to distill this into a set of signals, here’s the framework I use when evaluating a new project:

Reach for Canvas Apps when:

  • Your team includes makers or Power Platform developers (not necessarily pro-code devs)
  • You need to connect multiple data sources beyond Dataverse
  • Time-to-value matters more than long-term architectural purity
  • The UI is achievable with standard Power Apps controls
  • The dataset sizes are manageable (under ~5,000–10,000 rows with delegation)
  • The app will be maintained by the business without ongoing developer involvement

Reach for Code Apps when:

  • The team includes professional developers comfortable with React and TypeScript
  • You need pixel-perfect UI that matches a defined design system
  • Performance against large Dataverse datasets is a hard requirement
  • The project requires unit testing and a proper CI/CD pipeline
  • Component reuse and maintainability are long-term priorities
  • The business logic is complex enough to warrant software engineering discipline
  • Your InfoSec or compliance team needs granular, auditable CSP control over exactly which origins the app communicates with

Use both when:

  • Different user personas use different parts of the solution (makers vs. professionals)
  • Some screens are simple enough for Canvas, others require pro-code capability
  • You have a fusion team and want each persona working in their natural environment

And one more signal I’ve found reliable: if you’re spending more time fighting Canvas App limitations than solving the business problem, it’s time to move up the stack.


Key Takeaways

  • Canvas Apps are UI-first, Power Fx-based, and designed for makers and Power Platform developers. They excel at multi-connector scenarios and rapid delivery.
  • Code Apps are React + TypeScript (or Vue) apps built with VS Code and the Power Apps npm CLI, deployed as solution components into Power Platform. They’re designed for professional developers and complex requirements.
  • The capability ceiling of Canvas Apps shows up in performance at scale, complex UI requirements, ALM friction, and the absence of real unit testing.
  • Code Apps are not PCF controls. They are full applications — not components embedded inside other apps.
  • End-users running Code Apps require a Power Apps Premium license — factor this into your project’s licensing model from day one.
  • Code Apps ship with CSP enforced and strict by default — connect-src 'none' will block your external API calls until you explicitly configure the allowed origins. Canvas and Model-Driven Apps have CSP off by default, with only frame-ancestors customisable when enabled.
  • The fusion team pattern — Canvas Apps for makers, Code Apps for developers, shared Dataverse backend — is the most powerful architectural pattern in the Power Platform toolkit right now.
  • The question “Canvas or Code?” is often better answered as “Canvas and Code.”

Frequently Asked Questions

Do Code Apps replace Canvas Apps?

No. They serve different personas and different requirement profiles. Canvas Apps remain the right choice for a large majority of Power Platform scenarios. Code Apps extend what the platform can do — they don’t replace the existing paradigm.

Does Code Apps need to be enabled before I can use it?

Yes — and this catches teams off guard. A Power Platform admin or environment admin must explicitly enable Code Apps on each environment via the Power Platform admin center (Settings → Product → Features → Power Apps code apps). It’s off by default. Add this to your project setup checklist on day one — waiting for admin access mid-sprint is a painful and avoidable delay.

Are Code Apps the same as PCF controls?

No. PCF controls are individual UI components embedded inside Canvas or Model-Driven Apps. Code Apps are full, standalone React + TypeScript applications packaged into Power Platform solutions.

Why are my fetch calls failing in a Code App even though the code looks correct? 

Almost certainly a CSP issue. Code Apps default connect-src to 'none', which blocks all outbound network requests including calls to Azure Functions, external REST APIs, or any origin outside the platform. You need to explicitly whitelist your target origins in the Power Platform admin center under Settings → Privacy + Security → Content Security Policy → App tab, or via the PowerApps_CSPConfigCodeApps REST API setting. This is the single most common Code App “gotcha” in first deployments.

Do Code Apps require extra licensing?

Yes — and this is a common trap. End-users who run Code Apps need a Power Apps Premium license. This is different from a standard Power Apps per-user or per-app license. Budget for this early in your project. The Premium tier unlocks the full managed-platform capability set — DLP enforcement, Conditional Access per app, Managed Environments, tenant isolation — which Code Apps inherit automatically.


References

Microsoft Official Documentation

Community & Blog Articles

Leave a Reply