Power Pages: Inserting Content Snippets in Design Studio

I have written before Content snippets in Power Pages and how it is one of those features that I feel doesn’t get enough attention.

Here is the video version of this blog post.

Check out the post below on what Connect Snippets are and how they used in Power Pages websites:

Currently, the only way to use Content Snippets is to add them via code. You can do this by inserting the following Liquid code to a web page or web template, referring to the content snippet that you can setup in the Power Pages management app:

{{ snippets["<<snippet name>>"] }}

One request that I have been asking pestering the product team about for years is the ability to add content snippets directly in the Power Pages design studio similar to other components.

Web template components to the rescue!

The ability create web templates as components and be able to insert them from the design studio opens up a new world of possibilities!

I had also blogged about this when they first were released in preview, but they have been enhanced so that they can be inserted directly in the design studio.

So I created a web template component specifically to insert content snippets directly in the design studio!

The code is posted near the end of this post.

Here is how it works when the custom component template is added. Choose to insert a code component directly on the page the same as you would any other component:

You then have to key in (or cut and paste) the content snippet, unfortunately at this point we are unable to have a “lookup” to available content snippets…

Enter in the content snippet name, in the Power Pages management app I created a simple HTML snippet as an example:

And then I enter the name in the custom Web Template component:

And voila! When the page is published, we see the content snippet on the page:

Why content snippets?

If you noticed, content snippets are language aware, meaning that we can setup up multiple content snippets in various languages and the Power Pages site will render the content snippet based on the user’s language or the browser locale (or what the visitor selected). This can save you time by designing your web page once (with snippets) and then managing the translations all in one place.

Creating and updating content snippets short-cut

As part of the configuration of a web template component, you can specify a specific table, this allows the makers to navigate directly to the data workspace and add and edit data, including content snippets! This provides a directly link to the content snippet data without having to navigate to the Power Pages management app.

You can edit the data directly in the grid or by opening up a form:

Web template custom component code

The following is the web template code for inserting content snippets:

{% comment %}
Content Snippet Custom Component
Nick Doelman, @readyxrm

Create a manifest to allow component to be added via the design studio.
It will accept the content snippet name as a parameter.
The tables property allows makers to navigate directly to the data workspace.
{% endcomment %}

{% manifest %} 
    { 
    "type": "Functional", 
    "displayName": "Content Snippet", 
    "description": "This will insert a content snippet.", 
    "tables": ["mspp_contentsnippet"], 
    "params": [ 
        { 
        "id": "snippet", 
        "displayName": "Content Snippet", 
        "description": "The content snippet to insert on this page." 
        }] 
    } 
{% endmanifest %} 

{% comment %} Simply display the content snippet on the page. {% endcomment %}

{{ snippets[snippet] }}

Copy and save this code as a web template with the name “Content Snippets” (or whatever you like) using the Power Pages management app (or Visual Studio Code).

You then should have the ability to add content snippets directly to your web pages in the design studio:

Summary

Web templates open up a lot of possibilities in allowing makers to create rich Power Pages experiences with re-usable, configurable components. The ability to add content snippets makes it easier to build consistent, multi-lingual websites.

What will you build?

Nick Doelman is a Microsoft MVP, podcaster, trainer, public speaker, and competitive Powerlifter. Follow Nick on X at @readyxrm or LinkedIN, and now; Bluesky. Listen or watch the the Power Platform Boost podcast with Nick and co-host Ulrikke Akerbæk every second week for news and updates from the Power Platform community.

Original Post https://readyxrm.blog/2025/03/20/power-pages-inserting-content-snippets-in-design-studio/