Pages and navigation

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:

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:

{
  "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.

Create a page

In a Next.js project with the App Router:

1. 1

   Click the plus beside “Pages” in the menu (“New page”), or right-click a page → “New page inside”.

2. 2

   Type its path, like /about or /work/process.

3. 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.

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 frameworksNext 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:

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 and the CMS.

Where pages come 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 stacksNext release

The next release also reads the file routes of TanStack Start and Qwik City, the routes of Angular, Laravel, Rails, Django and Flask, the pages of Hugo, Jekyll and Eleventy and Gatsby (see Create React App, Vue CLI, Gatsby, Docusaurus), and the templates of a Shopify theme.

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. 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.

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, 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.