Pages define both the structure of your app and how users navigate through it in Codux. If you started your project using one of our Remix templates, you're ready to go. Otherwise, refer here for information on defining your Remix app so that Codux can manage its pages effectively.

In the context of Codux, pages are the visual representation of Remix routes, forming the core structure of your web application. Each page corresponds to a specific URL path and can include dynamic segments to handle parameters. When a user navigates to a particular URL, the associated component is rendered, and any dynamic segments in the URL can be used to pass parameters to the component. Pages in Codux do more than just display content – they can fetch data before rendering, handle errors gracefully, and so on.

Codux makes navigating your app's pages easy. If you're starting from one of our Remix templates, your pages will already be detected. Just click on a page in the Pages panel to view and edit it, or navigate to a page through the navigation bar on the stage, or while interacting with your app while in Preview mode.

Note: Codux uses the same file structure system as Remix projects. Routes can be created using folders in the app/routes directory, where the folder name determines the route's URL path, and a route.tsx file inside the folder defines the route's content. The folder may contain other files as well, such as style files.

When Codux creates and edits pages, it modifies the project files and folders, makes changes directly to this path, and warns you as such when applicable.

To create a new page in your app, navigate to the Pages tab, and click Create New Page.

Enter the route for the new page to determine the URL where the page can be accessed. You can create a subpage by adding a slash. For example:

When you create a new page, Codux will add a file and folder for that page in the routes directory.

The homepage of your app is handled differently. It's represented by the root's _index/route.tsx file. This file has no specific route settings, as it represents the root URL ("/"). If you remove this file, you'll need to manually create it to define your homepage content. For more details on how Remix handles index routes, refer to the Remix documentation on index routes.

If you want the route to be dynamic, click Add Parameter in the Create New Page and Page Settings dialog. Codux with then add the placeholder /$param to your route which you can then change, as well as a <Loader> within the page file.

For example, you can create a route such as products/electronics/$productId to display different products based on the productId parameter.

To view a dynamic page in your app, you can't currently just select it from the Pages panel. Instead, you have two options:

To change a page, access its settings from the Page Settings icon.

Here you can modify a route, view its code, view in VS Code, and delete a page.