Overview

Magic Patterns supports multiple pages within one design, so the AI can show different views.

If you want the view to exist as a separate page with its own URL path, such as /settings, you need to specify that route in your prompt. This tells the system to create a distinct page that reflects real routing behavior and can be accessed independently.

Pages in a design are defined by route paths. When your design is published, these paths become part of your live URL structure. For example, a settings page at /settings would be accessible at www.yourdomain.com/settings. This lets you simulate full application flows and structure your design around real navigation logic without needing to split across separate files.

Creating a New Page

To create a new page in your design, you simply need to describe it in your prompt. You should include the route path, what should be on the page, and how it should be accessed.

Sample Routing Prompt
Add a /settings route. The gear icon should take me to that page. The settings page should have a form with input boxes for name, email, and password.

Once your design includes multiple pages, you’ll want to move between them easily during editing and preview. You can switch pages using the page navigation dropdown in the top-left of the interface or by clicking on elements in your design that are linked to other routes.