# Pages and navigation

> The page menu of the top bar, the page tree and its order, creating and removing pages, the pages of a dynamic route, and the Assets tab.

- Page: https://midcode.app/docs/editor/pages
- From the midcode docs. Every page as Markdown: https://midcode.app/llms.txt

The canvas shows one page of your site at a time. Which one is in the top bar, next to the branch: the page's path ("Home" for `/`). Click it and a menu opens with a search field, the page tree, and, on a dynamic route, the list of that route's pages.

Pages aren't something midcode keeps: the tree is read from your project's files, the way your framework reads them.

## Go to a page

- Click the page in the top bar, then click a page in the tree.
- Type in the field to filter the tree.
- Type a path that starts with `/` and press `Enter` to go straight there, listed or not. That's how you reach a page midcode didn't find.

The breakpoints move to the new page without reloading the editor, and your selection is cleared.

## The page tree

Routes are shown as a tree by their path: `/work/process` sits inside `/work`. Home comes first. A row with a folder icon is a path that has pages inside it; a row with a database icon is a dynamic route (`/work/[slug]`), with the number of pages found for it. Point at a row to see its file.

Right-click a page for its menu:

| Item | Does |
| --- | --- |
| Open | Goes to the page |
| Find its pages again | On a dynamic route: looks for its pages again |
| Copy path | Copies `/work/process` |
| Open code | Opens the page's file in the [code view](https://midcode.app/docs/editor/code.md) |
| Page settings… | Its title, description and social image, in Next.js projects and, from the next release, in a folder of plain HTML (see [Site settings](https://midcode.app/docs/editor/site-settings.md)) |
| New page inside | Starts a new page under this one, where midcode can [create pages](#create-a-page) |
| Remove | Moves the page's file to the Trash, where midcode can [remove pages](#remove-a-page) |

### Reorder

Drag a page above or below its siblings; a blue line shows where it lands. Pages only reorder among the pages of the same parent, and Home stays first.

The order is yours, not your framework's, so midcode keeps it in a small file that travels with the project:

```json title=".midcode/pages.json"
{
  "version": 1,
  "order": [
    "/work",
    "/work/[slug]",
    "/about",
    "/contact"
  ]
}
```

Pages that aren't in the list come after, in alphabetical order. The file only affects midcode's tree. See [What midcode adds to your project](https://midcode.app/docs/start/project-files.md).

## Create a page

In a Next.js project with the App Router:

1. Click the plus beside "Pages" in the menu ("New page"), or right-click a page → "New page inside".
2. Type its path, like `/about` or `/work/process`.
3. Click "Create page".

midcode writes a `page.tsx` for it in your app folder. It goes next to its closest parent that already has a page, so route groups are respected: with `/work` at `app/(site)/work/page.tsx`, the page `/work/process` is `app/(site)/work/process/page.tsx`. With no parent, it goes beside the home page.

```tsx title="app/about/page.tsx"
export default function Page() {
  return (
    <main className="mx-auto max-w-3xl px-6 py-24">
      <h1 className="text-4xl font-semibold">About</h1>
      <p className="mt-4">A new page, made in midcode.</p>
    </main>
  )
}
```

The path is cleaned as you'd expect (lowercase, dashes for anything that isn't a letter, a number, `_` or `-`), and the heading is its last part in words. The canvas goes to the new page as soon as your dev server answers for it.

Creating a page is not a step in the undo history. To take it back, remove the page.

### Other frameworks (next release)

The next release creates and removes pages in more kinds of project, each the way its framework keeps them. A new page at `/about` is:

| Project | What's written |
| --- | --- |
| Astro | `src/pages/about.astro`, inside the layout the home page uses, or as a whole document with the home page's stylesheets |
| SvelteKit | `src/routes/about/+page.svelte` |
| Nuxt | `pages/about.vue` (or `app/pages/`), when the project has a pages folder |
| Plain HTML | `about.html` at the top of the site, with a copy of the home page's `<head>` |
| Remix | `app/routes/about.tsx` |
| React Router | `app/routes/about.tsx`, and its `route("about", "routes/about.tsx")` line in `app/routes.ts` |
| TanStack Router | `src/routes/about.tsx`, with its `createFileRoute('/about')` |
| Qwik City | `src/routes/about/index.tsx` |
| Hugo | `content/about.md` |
| Jekyll | `about.md`, with the home page's layout and a permalink |
| Eleventy | `about.njk` (or the home page's own extension), with its layout |
| Laravel | `resources/views/about.blade.php`, and `Route::view('/about', 'about');` at the end of `routes/web.php` |

The page gets utility classes only when the project has Tailwind in its `package.json`. In a folder of plain HTML, new pages go at the top of the site, not in subfolders. Remix needs its `app/routes` folder and React Router its `app/routes.ts`.

In any other kind of project the plus isn't shown: a Vite app without file routes, Angular, Django, Rails, Flask. Pages there are written in code, by you or your agent.

## Remove a page

Right-click a page → "Remove". midcode asks first, then moves the page's file to the Trash, so you can put it back from there or from git. If the page was the only file in its folder, the folder goes with it. Pages inside it stay. Home can't be removed.

If the canvas was on that page, it goes back to Home.

In the released version this is for Next.js projects. In the next release it also works in the projects listed above, and takes out the line that names the page in `app/routes.ts` or `routes/web.php`.

## Dynamic routes

A route like `/work/[slug]` is many pages. The canvas shows one of them, the last one you looked at, and the top bar names it: `/work / Oak House`, with the number of pages found. Open the menu to switch: the section "Pages of /work/[slug]" lists them.

midcode finds those pages on your running site, whatever your data source is:

- the site's `/sitemap.xml`;
- the links on the route's parent page (`/work`), then on the home page, then on the other pages;
- the page's own `generateStaticParams`, for pages nothing links to: the values written there, or the field it maps from an imported list (`projects.map((p) => ({ slug: p.slug }))`). Only the ones your dev server answers are kept.

Each page is named by its `<title>`, without the part every title shares, or by its `<h1>`. Up to 200 pages are listed per route. If none are found, midcode says so: link to one from your site, or type its path in the field. "Find its pages again" looks again after you add content.

A dynamic route is one file, so a change to its layout or its styles shows on every one of its pages. Text that comes from your data is changed where the data is written: see [Text, images and video](https://midcode.app/docs/editor/text-and-media.md) and the [CMS](https://midcode.app/docs/data/cms.md).

## Where pages come from

| Project | The tree lists |
| --- | --- |
| [Next.js](https://midcode.app/docs/frameworks/nextjs.md) | Every `page` file under `app/` and every file under `pages/` (also inside `src/`). Route groups like `(site)` don't show in the path; folders starting with `_` or `@`, and `api`, are skipped. |
| [React Router and Remix](https://midcode.app/docs/frameworks/react-router.md) | The routes of `app/routes.ts`, or the files of `app/routes/` |
| [Astro](https://midcode.app/docs/frameworks/astro.md) | The files of `src/pages/` |
| [SvelteKit](https://midcode.app/docs/frameworks/svelte.md) | Every `+page` under `src/routes/` |
| [Nuxt](https://midcode.app/docs/frameworks/nuxt.md) | The `.vue` files of `pages/` |
| [Plain HTML](https://midcode.app/docs/frameworks/html.md) | Every `.html` file, at the path it's served from |

A project whose routes are only in code (a Vite app with its own router, for instance) lists only Home. Type a path to go anywhere else.

### More stacks (next release)

The next release also reads the file routes of [TanStack Start](https://midcode.app/docs/frameworks/tanstack-start.md) and Qwik City, the routes of [Angular](https://midcode.app/docs/frameworks/angular.md), [Laravel](https://midcode.app/docs/frameworks/laravel.md), [Rails](https://midcode.app/docs/frameworks/rails.md), [Django and Flask](https://midcode.app/docs/frameworks/python.md), the pages of [Hugo, Jekyll and Eleventy](https://midcode.app/docs/frameworks/static-generators.md) and Gatsby (see [Create React App, Vue CLI, Gatsby, Docusaurus](https://midcode.app/docs/frameworks/webpack.md)), and the templates of a [Shopify theme](https://midcode.app/docs/shopify/themes.md).

## The Assets tab

The Assets tab of the left panel lists what the project is built from, read from the code. Its search field filters all three groups.

- **Templates**: the layouts every page sits in (the App Router's `layout` and `template` files). The root one is "Site layout". Click one to open its code.
- **Components**: your components, grouped by folder. In `.tsx` and `.jsx` files these are the exported components (a function or a constant whose name starts with a capital letter); a `.svelte` file is one component. From the next release, `.vue` files and `.astro` files outside your pages and layouts are listed too. Click a component to [edit it on its own canvas](https://midcode.app/docs/editor/components.md). Drag it onto the canvas to add an instance: midcode writes `<Card />` and its import. The number beside it is how many are on the page you're looking at. Right-click for "Select on page", "Open code" and "Copy reference for your agent".
- **Styles**: your colors, fonts, text styles and link styles. See [Theme and design tokens](https://midcode.app/docs/styling/theme.md).

## Limits

- A new Next.js page is always an App Router `page.tsx`, with the starting markup above. In a project that only has the Pages Router (`pages/`), midcode still writes it under `app/`: add pages to `pages/` in the code instead.
- A page can't be renamed or moved from the tree. Rename its file or folder in [Code mode](https://midcode.app/docs/editor/code.md), or ask your agent.
- A dynamic route's pages are found on the running site, so they need the dev server, and a page that no sitemap, link or `generateStaticParams` leads to isn't listed. You can still type its path.
- React Router routes nested under `prefix()` show without the prefix.