Dynamic pages and paths
You can build pages that have the same general layout but populated with different data depending on what specific URL you’re visiting.
- A blog with one page per post (
- A storefront with one page per product (
If you are using integrations to query your data, and your data source supports listing objects of different types, then you can:
- Create a new page.
- Select dynamic page.
- Specify what table you want to generate a dynamic page for (for instance, I want a dynamic page over my
You can use the controls in the Page Data tab to browse and switch to different records of the given type (switch to different products).
Note that this only supports integrations where Plasmic can understand the data schema, i.e. you can build filters and select columns, etc. This does not apply to integration types like HTTP API, where the response can have any structure and doesn’t conform to a well-known schema.
The way to manually create dynamic pages is by using URL path parameters. You take a single page designed in Plasmic, treat it as a template, and populate it with content that depends on the value of that path parameter.
- Create a page.
- Add a path parameter, like
- Set a preview value for the
slugpath parameter, such as
- Add a data query (or fetcher component) to fetch items from your data source, filtered according to that parameter (using dynamic values).
- Add content to the page that displays this data (using dynamic values).
Path parameters can be inserted anywhere in the “URL Path” field with brackets, like
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”.
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
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.