Dynamic pages

We say a page is dynamic when an API provides some or all of its content. The opposite is a static page, where the content is added directly in toddle and does not change without you publishing a new version.

For example, the toddle landing page, https://toddle.dev, is a static page. Each section is built in toddle, and the page is not fetching any content from an API.

Our blog is also built in toddle but fetches content from https://contentful.com . It then renders the page based on the content that was returned. This is a dynamic page; the same page in toddle is used to render all blog posts.

Path and query parameters

For our blog post page to know which article to fetch and render, we need to provide it with a unique "slug" as part of its URL.

https://toddle.dev/blog/ What-Happens-When-an-Address-Goes-Into-a-Browser

In this case, the last path segment of the URL tells the page what article to render. This is done with a parameter that we use to set the last path segment in the URL panel as a parameter .

When setting a path segment to a parameter that part of the URL will match any string when toddle is deciding what page to render.

• /blog/ What-Happens-When-an-Address-Goes-Into-a-Browser
• /blog/ unleash-the-power-of-edge-computing-for-no-code-developers
• /blog/ why-we-built-toddle

The value of the path parameter is now available inside the formula editor anywhere inside the page.

You can set a test value for your path parameter. This is the value that the parameter will have when you are editing your page inside the toddle editor. It does not affect your application in preview mode or when it is live.

toddle will always prioritize static pages over dynamic ones if there are multiple pages that match the current URL. This means that a page with the path /blog/new where new is not set to be a parameter will be rendered instead of our blog post page assuming that the current url matches /blog/new.

Query parameters

In addition to specifying path segments as parameters you can also add query parameters. This allows you to specify any additional information you would like to be able to add to the URL of your page.

In the case of our blog post page, we use a query parameter to dictate if we want to see the preview version of the page, which allows us to browse an article while we are writing it in Contentful.

Updating parameters

When you create a path or query parameter on your page you will see some new actions in your workflow editor.

These allow you to update the value of a URL parameter , which is the common name for both path and query parameters. The main benefit of using this action rather than just linking to the URL with the values you want is that it does not trigger a full reload of the page you are on. It is also often simpler since you only have to specify the value for the parameter you are trying to change.

When to use Path over query

Initially, path and query parameters might seem to be doing the same thing, and that is mostly the case. However, there are differences. Changing the path, e.g., through updating the parameter, is considered navigation and will add an entry in the browser's history. This means clicking the browser's back button will take you to the same page but with the previous value in the path.

Changing a query parameter is not a navigation, so clicking back will not revert the value but will navigate to the previous page.

When to use URL parameters over variables

URL parameters are essentially a way for your page to store data. Using formulas and actions, you can read and write data to a URL parameter. In that sense, URL parameters are like variables. So when should you use URL parameters, and when should you reach for a variable?

Use URL parameters when you want the data to be part of the URL. With URL parameters, you maintain the current value when the user reloads the page and shares the link with others.
Examples of things that should be stored in a URL could be:

• Which tab is active inside a tab pane
• Which item in a list is selected?
• Should a "Create / Edit" modal be shown?

Examples of data that should probably be stored in variables:

• The value of an input field
• Should a "Confirm Delete" modal be shown?

learn more about dynamic pages: