Create a new page

A page is a part of your application that has its unique URL. This allows users to share links to a specific page in your app.

Pages are essentially just components and have all the same features. The biggest difference is that pages do not have Attributes and Events since they never have a parent component they need to communicate with

You can create new pages by clicking the "Create New +" button at the bottom of the project panel and then selecting "New Page."

Learn how to work with pages in toddle. A page is a part of your application with a unique URL. This allows users to share links to specific pages in your app.

Now you can give your page a name and a URL path where you want the page to be found.

This is how you create a page in toddle. You give it a name and then you simply click on "Create page" to create a new page. You can also copy the current page.


Path and query

Instead of the Attributes and Event sections you see with components, you will see a Page section in the data panel.

Instead of the Attributes and Event sections you see with components, you will see a Page section in the data panel. This is where you change your pages.

You can open the page configuration panel by clicking the page in this section.

The URL preview shows the URL for this page. You can add or remove path segments to change your page's path. You can specify query parameters for your page.

At the top, you will see a URL preview, which shows how the URL for this page will look.

If you are not familiar with how URLs are structured we recommend first reading our post about URLs

Add or remove path segments to change your page's path. You can also specify any query parameters that your page will use.

We will cover path parameters and query parameters on the next page

Configuring metadata

Each page in your application should have a unique title and description.

Add custom meta tags to optimize your SEO efforts. You can add an unlimited amount of meta tags. Click the fx. icon on the right to make your meta tags dynamic.

These provide basic information about your page to search engines, and when, e.g., sharing links on social media sites.

Ensure your title and descriptions are short and clear about what content the user can expect to find on the page. This is great for SEO and general discovery.
The title you set here will also appear as the title for the tab in your browser

Ensure your title and descriptions are short and clear about what content the user can expect to find on the page.

You can also add custom meta headers to your page. This could include additional open graph data or viewport information. You get unlimited meta tags to support your specific needs, which makes toddle great for SEO.

Note custom meta tags will only be rendered for applications on a paid plan. Please see our pricing page for more details.

Configure a custom 404 page.

If a user ends up on a URL/path of your app that doesn't match a page, toddle will show a 404 (page not found) page by default. If you want to show a custom 404 page instead, add a new page and name it "404". After you have added a 404 page, that page will be used whenever we encounter a URL that doesn't match any of your app's pages.

Note custom 404 pages and proper 404 handling is only available on paid plans. Please see our pricing page for more details.

Stop scrolling. Start building.

toddle is a visual web app builder that rivals custom code โ€” but accessible to your entire team!

Try toddle โ€” it's free!

ยฉ Copyright 2024 toddle. All rights reserved.