In Plasmic Studio, there are two types of UI you can build: components and pages. While components are used internally as building blocks for your team, pages are published externally to your users.

A page is a special type of component, so everything about components also apply to pages. To learn more about components (and pages!), check out our Plasmic Studio Guide.

However, there are two key differences:

  1. Pages are not reusable. You may not insert a page into another page or component. Note you can easily convert pages to components and vice versa by right-clicking and clicking “Convert to …“.
  2. Pages contain metadata such as its URL path and SEO data.

This article will focus on the special characteristics of pages.


URL stands for “uniform resource locator”—it’s the address for a web page.

Let’s take an example URL:

  • is the domain. The domain is set depending on how you publish your website. See publishing for more details.
  • /path/to/page is the path. It identifies a page within a website/domain.


In Plasmic, each page must have a unique URL path. You can find the “URL Path” field on the right panel under “Page Data”.

A path must start with a slash (/). A path will be appended to the domain to form the full URL.

To make a page the root page of a domain (e.g., set the path to a single slash (/).

While most users won’t actively look at paths, they are still important because of their role in search engine optimization (SEO). Search engines may match keywords in paths, or they may display the path as part of a search hit. Therefore, it’s best practice to set human-friendly paths. We recommend setting paths with the following rules in mind:

  • Concisely describe the content of the page.
  • Use a hyphen (-) in between words.
  • Use a slash (/) to express hierarchy across your pages.

Path parameters

URL paths can be parameterized. This is useful for building dynamic pages that have the same general layout but populated with different data.

Examples include:

  • A storefront with one page per product (e.g. /product/1, /product/2, etc.)
  • A blog with one page per post (e.g. /january-2023, /february-2023, etc.)

Path parameters can be inserted anywhere in the “URL Path” field with brackets, like /product/[id] or /[month]-[year]. Once added, you should see the path parameter appear in the “URL Parameters” section.

Note you can also edit the preview value for each path parameter. In the below image, we set the preview value for “month” to “march” and “year” to “2023”.

URL Path field with path parameters

Once your path parameter is added, you can use it in a dynamic value under “Page URL path params”. Typically, you would plug the path parameter into a data provider component to fetch dynamic data.

Data picker showing path parameters
For developers: code integration

Please read the developer docs on dynamic pages and make sure you’ve completed the one-time setup to enable path parameters and query parameters.

Query parameters

URLs can optionally have query parameters (also called search parameters). These are attributes in the URL that start with a question mark (?) and are separated by ampersands (&).

A common use case for query parameters is filtering results. For example, a product search page might allow you to filter by size or color and encode this data in the URL like /products?size=medium&color=blue.

To add a query parameter, find the “URL Parameters” panel on the right panel under “Page Data”. Click the add button and give it a name.

Once your query parameter is added, you can use it the exact same way as a path parameter, except it’s under “Page URL query params” instead.

For developers: code integration

Please read the developer docs on dynamic pages and make sure you’ve completed the one-time setup to enable path parameters and query parameters.

Meta tags

For each page, you can customize “meta tags”. Meta tags are extra information about a page, used to customize how it’s displayed on search engines and social platforms. Meta tags are also important for search engine optimization (SEO), since search engines may search meta tags for keywords.

You can set the following meta tags in Plasmic Studio:

  • Title - Shown in search results. Also shown in browser windows/tabs.
  • Description - Shown in search results.
  • Open Graph image - Shown by social platforms when a page is linked. The recommended dimensions of the image is 1200x630 pixels.
  • Canonical URL - Tells search engines what the preferred URL of a page is, in case you have multiple URLs for the same or similar content. The canonical URL should be an absolute URL, like instead of /pricing.

To set meta tags, click the gear icon on the right panel under “Page Data” to open up the “Page Settings” panel.

You can link between pages using link elements or interactions.

Any element can be converted to a link by right-clicking and selecting “Convert to a link”. This will either convert the element to a link element or wrap the element in a link element. Select the new link element, and on the “Settings” tab on the right panel, find “Destination” under “HTML Attributes”. Your existing pages will autocomplete here. You also have the option to open the destination in a new tab.

Destination field for linking

For dynamic pages with path parameters, you’ll also need to input path parameters. The destination and path parameters can be dynamic values.

Linking to a specific element or section of a page

To link to a specific element, you must first assign an ID to it. Select the element you want to link to. In the “Settings” tab on the right panel, under “HTML Attributes”, give it an ID, like name-of-section.

Now, the element is ready to be linked to. Let’s say the element is on a page with path /my-page. Then you can set a link’s destination to /my-page#name-of-section.

If the link is on the same page as the element, then the path can be omitted (you can set the destination to #name-of-section instead).

Example: This link will take you back up to the Linking section on this page.

Linking to other websites

To link to an external website, instead of selecting an existing page, simply type in the full URL, including https://, such as

Example: This link will take you to Google in another tab.

Linking to the top of the current page

To link to the top of the current page, set the destination to #.

Example: This link will take you back up to the top of this page.

Linking to an email address

To link to an email address like, set the destination to

Example: This link will open up your preferred email client and start drafting an email to

Linking to a phone number

To link to a phone number like +1 (123) 456-7890, set the destination to tel:+11234567890.

We recommend following these rules:

  1. Start with the plus character (+) and country code.
  2. Omit all non-digit characters.

Example: This link will start dialing a non-existent number.

Linking to pages built outside Plasmic Studio

If you build pages in your own codebase outside Plasmic Studio, then you might have pages you want to link to that Plasmic Studio doesn’t know about. Link destinations behave similarly to <a> tags (or your framework-specific link component), so you can type in relative URLs to link to any other pages.

Hidden pages and page templates

You can create your own page templates in a Plasmic project, or mark pages to prevent it from being published.

To hide a page from publishing, add an underscore before its title—for example _FutureCampaignPage. Any pages with a leading underscore in its title won’t be published, no matter its URL path.

To use a page as a template, right-click the page and click “Duplicate page”.

Duplicate page
Was this page helpful?

Give feedback on this page