Layers

Layers is the page as a tree: every element your code writes, nested the way it’s nested in the page. It’s the middle tab of the left panel, next to “Agent” and “Assets”. Use it to select what’s hard to click on the canvas, to move elements by dragging rows, and to give layers names that mean something.

How the list is grouped

On a page, the list has two parts:

1. 1

   Each breakpoint, widest first, with a device icon, its name, and its width (or “Primary” on the primary one). The primary breakpoint starts open and the others closed. Under each one are the page’s layers.

2. 2

   What floats on the canvas, after the last breakpoint, in Next.js App Router projects. Each floating element is a top-level row with its own layers inside. See The free canvas.

The page’s layers are the same tree under every breakpoint, because it’s the same code. What changes is where a click lands: pick a layer under “Phone” and it’s selected in the Phone frame, so what you change is written for that breakpoint. See Breakpoints.

Click a breakpoint’s row to mark its frame; double-click it to bring that frame into view.

While you edit a component, the list is the component’s own layers, with no breakpoints over them. See Components.

What a row shows

A layer is an element written in your project’s files. An element a library draws isn’t listed; what your code puts inside it is, one level up.

The name is, in this order: the name you gave it, the component’s name, the element’s own text (the first words), an image’s alt text or file name, or the tag.

A layer hidden with “Hide” (⌘;) is dimmed. An element rendered by a loop has one row per item it renders; they are all the same line of code.

The list and the canvas follow each other. Hover a row and the element is outlined in the frames. Hover an element and its row lights up. Select on the canvas and the tree opens down to that layer and scrolls to it.

Select from Layers

What you can do with several layers selected is in Select, move and resize.

Drag to reorder

Press on a row and drag it over the list. A blue line shows where the layer would go, indented to the depth it would have:

• –

  Over the top part of a row: before that layer.

• –

  Over the bottom part: after it. If that layer is an open container, it becomes the container’s first child.

• –

  Over the middle of a container: inside it, as its last child. The container’s row is outlined.

Release to move it. Esc cancels. A layer can’t go inside itself.

Containers are div, section, main, article, header, footer, nav, aside, form, figure, ul, ol, li, fieldset, details and dialog. A component instance isn’t one: open the component to change what’s inside it.

A drag in Layers is the same edit as a drag on the canvas: the element’s code moves, with the comment above it.

 <main>   <Hero />-  <Features />   <Pricing />+  <Features />   <Footer /> </main>

The same rules apply: within one file, never out of a .map(), never into an instance. They’re listed in Select, move and resize. The floating part of the list is the exception to the first rule: a floating layer can be dragged into the page, and a page’s layer into a floating container. Beside a floating element, at the top level, only another floating element can go.

Rename a layer

1. 1

   Double-click a row. Or select the layer and press ⌘R, or right-click it and choose “Rename”.

2. 2

   Type a name.

3. 3

   Press Enter. Esc leaves it as it was.

Clear the name and press Enter to go back to the default.

A name is a label for you and for your agent. It changes nothing in the element’s code. The right panel’s title and the reference you copy for an agent (⌘C, or ⇧⌘C for the reference alone) use it too.

Name layers with Apple Intelligence

The colored mark at the top right of the list is “Name layers”. It names the layers a tag says nothing about: containers and media that have no name yet, up to 120 at a time. “Auto rename” (⌥⌘R, or the element’s menu) names one layer.

The model runs on your Mac. Nothing is sent anywhere and it costs nothing. What it’s given for each layer is a description: its tag, a few of its classes, its text, what’s inside it and the heading of the section it’s in.

It needs macOS 26 or later on Apple silicon, with Apple Intelligence turned on in System Settings. Without it the button is disabled and says why.

What midcode writes

Names are kept in the project, in .midcode/layers.json, so they travel with the repository and an agent working there can read them.

{
  "version": 1,
  "names": [
    {
      "file": "src/app/page.tsx",
      "tag": "section",
      "classes": "mx-auto max-w-6xl px-6 py-24",
      "text": "",
      "loc": "src/app/page.tsx:14:7",
      "name": "Pricing"
    },
    {
      "file": "src/components/Hero.tsx",
      "tag": "h1",
      "classes": "text-5xl font-semibold tracking-tight",
      "text": "Design in code",
      "loc": "src/components/Hero.tsx:8:7",
      "name": "Hero title"
    }
  ]
}

How a name is found again

Code moves: add a line above an element and its loc is off by one. So a name isn’t tied to the line alone. For each layer, midcode looks at the names saved for the same file and tag, and takes the best match:

• –

  same loc: the name is its own, whatever its classes are now;

• –

  otherwise, same classes: it’s the same element, on another line.

Matching text alone isn’t enough. So a name holds while one of the two is still true. Once both have changed (lines were added above the element and its classes were edited), the entry no longer matches and the layer shows its default name. The entry isn’t updated as the code changes: rename the layer again to save where it is now.

An entry that matches nothing stays in the file and does no harm. Delete the file to remove every name. Commit it if you want the names shared; nothing breaks if you don’t.

Limits

• –

  Layers lists what’s on the page now. A menu that isn’t open or a section behind a condition isn’t in the tree until it renders.

• –

  The tree stops after about 4,000 layers on one page.

• –

  In a project midcode can show but not edit (see Open a project), Layers lists the page’s elements as the browser has them. You can select them and comment on them. Names need elements that map to code, so renaming isn’t available there.

• –

  A name belongs to one place in the code. An element drawn by a loop has one name for all its items.

• –

  Changing an element’s tag (a div into a section) drops its name: names are matched within one file and one tag.