# Select, move and resize > Select elements on the canvas, move, copy and resize them by hand, and line them up with snapping, rulers and guides. With the code each gesture writes. - Page: https://midcode.app/docs/editor/select-move-resize - From the midcode docs. Every page as Markdown: https://midcode.app/llms.txt Everything you do to an element on the canvas with the pointer is an edit of the file it's written in: a drag moves its lines, a handle changes a class, a nudge changes two. This page covers those gestures with the "Inspect" tool (`V`), which is the tool you're in unless you picked another. ## Select Move the pointer over a frame and the element under it gets an outline. Click to select it. The selection shows a label with its tag (or its component's name), and its parent is outlined with a dashed line. The right panel now shows the element. Its "Code" section says where it's written: - "Element": the file and line of the element itself. Click it to copy `file:line:col`; the icon beside it is "Open code". - "Instance": where the component that renders it is used, when it belongs to one. - "Inside": the nearest ancestors written in other files. What you can select is what your code writes. An element drawn by a library (a chart's internals, the markup of a UI kit) isn't in your files, so a click on it selects the nearest element around it that is. When nothing around it is, the panel says so: "A library draws this element: it isn't in your project's files, so there's nothing to edit here." You get the same message for JSX written in a plain `.js` file in a Next.js or Vite project: midcode marks `.tsx` and `.jsx` files there, so rename the file to `.jsx`. An SVG selects as a whole. An element rendered by a loop is one line of code shown several times. The panel says "Item 3 of a list: editing the code changes all of them." | To | Do this | | --- | --- | | Select the parent | `⌘` + click inside the selection: one level up each time. Or `⌘↑`. | | Select from the tree | Click a layer in [Layers](https://midcode.app/docs/editor/layers.md). | | Deselect | `Esc`, or click the empty canvas. | | Edit a text | Double-click it. See [Text, images and video](https://midcode.app/docs/editor/text-and-media.md). | | Open a component | Double-click one of its instances. See [Components](https://midcode.app/docs/editor/components.md). | The same element is outlined in every frame. The frame you clicked in is the breakpoint you're editing: see [Breakpoints](https://midcode.app/docs/editor/canvas.md). ### Select several Hold `⇧` and click another element, on the canvas or in Layers, to add it to the selection. `⇧` + click on one that's already in takes it out. `⌘A` adds every sibling of the selection. The others are outlined without handles, and they're let go when you select something else. While several are selected: - On a page, the style panel writes to all of them. It's one edit, so one `⌘Z` undoes it everywhere. - Dragging one moves them all, if they sit next to each other in the same container. - `⌫` deletes them, `⌘C` / `⌘X` / `⌘D` copy, cut and duplicate them, and `⇧A` wraps them in a stack. - A right-click on any of them opens a menu for all: "Copy", "Cut", "Duplicate", "Delete", "Wrap in a stack" and "Copy references for your agent". To be moved, wrapped, duplicated or deleted together, they have to be written in the same file. Otherwise midcode says "These elements are written in different files." ## Move ### Drag to another place Press on an element and drag. It fades, and a blue line shows where it would land: before or after the element under the pointer, or between the children of the container under it. Over an empty container, the container is outlined instead and the element goes inside. Release to move it. `Esc` cancels. Pressing inside the selection drags the selection. Pressing anywhere else drags (and selects) what's under the pointer. You can also drag a row in [Layers](https://midcode.app/docs/editor/layers.md), which is easier when the target is small or covered. What moves is the element's code: its lines are cut and written at the new place, with the JSX comment right above it if it has one. ```diff title="src/components/Nav.tsx" ``` A component's root moves where the component is used: drag a whole `` section and the line that moves is the instance in the page's file. ### Moves that are refused - **To another file.** An element moves within the file it's written in: "For now elements move within the same file (page.tsx)." The exception is [the free canvas](https://midcode.app/docs/editor/free-canvas.md), where things go in and out of pages with their imports. - **Out of a list.** An item written inside a `.map()` uses values that exist only there, so it stays in its loop and nothing else goes into it: "This element uses values from where it's written (a list, a loop). Move it in the code." - **Into a component instance.** `` has no place in this file to put children in: "Can't put elements inside a component instance." Open the component to edit its inside. - **Into itself.** ### Positioned elements An element positioned with left and top ("Position" → "Type" → "Absolute" or "Fixed" in the right panel, and no right, bottom or inset class) isn't in the flow, so dragging it doesn't reorder anything. It moves freely, a label shows its new left and top, and on release the two classes are written: ```diff -New +New ``` Hold `⇧` to move along one axis. It [snaps](#snapping) to its container and its siblings. ### Arrow keys With a positioned element selected, the arrow keys move it 1 px. With `⇧` they move it by the nudge amount, 10 px unless you changed "Nudge amount" in Settings (`⌘,`). The element moves at once, and the classes are written when the keys rest, so a run of presses is one edit: ```diff -New +New ``` A value that's a multiple of half your spacing unit (2 px, with Tailwind's default of 4) is written as a scale number: `left-30` is 120 px. Anything else is written exactly, in brackets. Arrow keys do nothing to an element in the flow: there, order is the position. They also move what floats on [the free canvas](https://midcode.app/docs/editor/free-canvas.md). ## Copy | To | Do this | | --- | --- | | Duplicate in place | `⌘D`. The copy is written right after the element. | | Copy by dragging | Hold `⌥` while you drag. The element stays where it is and a copy lands where you release. | | Copy and paste | `⌘C`, select another element, `⌘V`. The copy goes after the selection ("Paste after"). | | Cut | `⌘X`: a copy, then a delete. | | Copy only the styles | `⌥⌘C` on one element, `⌥⌘V` on another. | In JSX files a copy made by dragging can land in another file, unlike a move: it takes along the imports it uses. A paste writes the copied code as it is, so pasting an element that uses a component into a file that doesn't import it is refused: midcode says pasting there needs ``, which the file doesn't import. `⌘C` on one element does two things. midcode keeps the element's code for `⌘V`, and the system clipboard gets the element's reference, ready to paste to an agent: ```text

"Design in code" written at src/components/Hero.tsx:8:7 inside src/app/page.tsx:9:5 page / · Desktop 1440px ``` `⇧⌘C` ("Copy Reference" in the Element menu) copies the reference alone. With several elements selected, `⌘C` puts their code on the system clipboard instead. "Paste styles" replaces the target's whole class list with the copied one. It's meant for two elements of the same kind. In a Next.js App Router project, `⌘V` with nothing selected puts the copy on the free canvas, in the middle of what's in view. In other projects, select the element the copy should go after first. `⌘V` checks the system clipboard first: with an image or files on it, it pastes those. See [Text, images and video](https://midcode.app/docs/editor/text-and-media.md). ## Wrap in a stack Select one or more siblings and press `⇧A`. A new `
` is written where the first one was, with all of them inside in their order. It runs the way their parent lays them out, with the parent's gap, so nothing moves on screen: a row inside a row, a column anywhere else. The new stack is selected. ```diff title="src/components/Pricing.tsx"

Pricing

-

One payment, every update.

- Buy +
+

One payment, every update.

+ Buy +
``` The elements have to sit next to each other in the same container: "Select elements that sit next to each other, in the same container." ## Resize Handles show on the sides whose size is "Fixed": - Width fixed: handles on the left and right. - Height fixed: handles on the top and bottom. - Both: the corners too. An element with no handles takes its size from its content or its container ("Fit", "Fill", "Relative"). To size it by hand, set "Width" or "Height" to "Fixed" in the "Size" section of the right panel first. [The style panel](https://midcode.app/docs/editor/styles.md) explains the modes. Drag a handle. The element takes the size as you drag and a label shows it in px. Hold `⇧` on a corner to keep the proportions. On release the size is written: ```diff -The team +The team ``` In the primary breakpoint that's the size everywhere. In another frame it's an override for that breakpoint. The same image, resized to 280 px in the Phone frame instead: ```diff -The team +The team ``` ## Snapping A positioned element being moved lines up with what's around it: - its edges and its center with the edges and centers of its siblings and of the container it's positioned in; - the same distance from a neighbour as its neighbours keep between themselves. It snaps within 6 px on screen. A line shows what it lined up with, and a number shows the distance to the neighbour on each side. | Key | While dragging | | --- | --- | | `⌘` or `⌃` | No snapping: it moves freely. Press it once the drag has started. | | `⇧` | Moves along one axis only. | Elements floating on [the free canvas](https://midcode.app/docs/editor/free-canvas.md) snap the same way, to each other, to the breakpoints' frames and to guides, also while you resize them. ## Rulers and guides Rulers run along the top and left of the canvas, in canvas px. `R` hides and shows them (`⇧R` does too). 1. Drag down from the top ruler for a horizontal guide, or right from the left ruler for a vertical one. 2. Drag a guide to move it. It snaps to the edges and centers of the breakpoints and of what floats on the canvas. 3. To remove one: drag it back onto its ruler, or click it and press `⌫`, or right-click it and choose "Remove guide". "Remove all guides" is in that menu and in the canvas's. What floats on the free canvas snaps to guides. Elements inside a page don't. Guides are yours: they're kept per project on this Mac, in midcode's own settings, and never written into the project. With the rulers hidden, guides are hidden too and nothing snaps to them. Rulers aren't shown while you edit a component. ## Right-click menus Right-click an element, on the canvas or in Layers. It's selected, and the menu offers: | Item | Key | What it does | | --- | --- | --- | | "Edit component" | | On an instance: opens its component. See [Components](https://midcode.app/docs/editor/components.md). | | "Copy reference for your agent" | `⇧⌘C` | The text shown under [Copy](#copy). | | "Comment" | | Starts a comment on the element. See [Comments](https://midcode.app/docs/editor/comments.md). | | "Copy", "Cut", "Paste after" | `⌘C` `⌘X` `⌘V` | | | "Copy styles", "Paste styles" | `⌥⌘C` `⌥⌘V` | | | "Duplicate" | `⌘D` | | | "Wrap in a stack" | `⇧A` | | | "Hide" / "Show" | `⌘;` | Adds or removes the `hidden` class, for every breakpoint. | | "Delete" | `⌫` | Removes the element's code. | | "Rename", "Auto rename" | `⌘R` `⌥⌘R` | Names the layer. See [Layers](https://midcode.app/docs/editor/layers.md). | | "Select parent" | `⌘↑` | | | "Open code" | | Opens the file at the element's line. See [Code view](https://midcode.app/docs/editor/code.md). | The same commands are in the "Edit" and "Element" menus of the menu bar. A right-click on the empty canvas, on a breakpoint's bar, on a guide or on a blue label in the panel opens that thing's own menu: see [The canvas and breakpoints](https://midcode.app/docs/editor/canvas.md). Each command that changes your code is one edit: `⌘Z` undoes it and `⇧⌘Z` redoes it. [How midcode works](https://midcode.app/docs/start/how-it-works.md) covers the history. ## Padding, gap and radius by hand (next release) With the pointer over the selection, three kinds of handles appear inside it: - a blue bar in each side's padding; - a pink bar in each space between its children, when it's a stack or a grid; - a dot in from each corner, for the radius. Drag one. The element shows the value as you drag, with the number in px by the pointer, and the class is written on release. Hovering a padding or a gap bar tints the areas it controls. | Handle | Plain drag | With `⌥` | With `⌥⇧` | | --- | --- | --- | --- | | Padding | That side: `pt-10` | That side and the opposite one: `py-10` | All four sides: `px-10 py-10` | | Gap | `gap-6` | | | | Radius | Every corner: `rounded-2xl` | That corner only: `rounded-tl-2xl` | | Starting from a card with `gap-4`, `rounded-lg` and `p-6`, and dragging the gap to 24 px, the top padding to 40 px and a corner to 16 px: ```diff -
+
``` They're written like the panel writes them: for the breakpoint of the frame you're in, as a scale number when the value allows it, and with your theme's radius names when one matches. A radius of 0 is `rounded-none`. When a pair or all sides are set together, the single-side classes they replace are removed. A handle is left out when there's nothing for it to show: - No padding bars on images, videos, inputs and other elements that hold no content, or on an element with no children and no padding. - No gap bars when the space between children isn't the gap's (`justify-between` and the like), when the element sets its two gaps apart (`gap-x-4`), or when it's rotated. - No radius dots on an element with nothing a radius would show on: no fill, border, shadow or clipping. - None at all when the element is small on screen (under about 40 px, 48 for the radius), with several elements selected, or in a project midcode can't write styles in. ## Limits - Moving, wrapping and deleting several elements at once work in JSX files. In Svelte, Vue, Astro and HTML files and in server templates they arrive in the next release; in version 1.1.2 midcode says so instead. Duplicating several at once stays JSX only: in other files the next release answers "These elements are written in different files." even when they share one. - `⌥` + drag copies in JSX files. In other files it arrives in the next release, for a copy that lands beside or inside an element of the same file. - From the next release, headings, paragraphs and list items that come from a Markdown file (Hugo, Jekyll, Eleventy) can be selected, edited as text and deleted. They can't be moved, copied, wrapped or styled: "This is written in Markdown: its words can be changed here, not its classes or attributes. Style it from the template around it." - `⌥` + drag doesn't copy an element positioned with left and top. Duplicate it with `⌘D` and move the copy. - Snapping and arrow keys apply to positioned elements and to the free canvas. An element in the flow is placed by its order and its container's layout. - Resize handles change `w-*` and `h-*`. Minimum and maximum sizes are set in [the style panel](https://midcode.app/docs/editor/styles.md). - In a project that midcode can only show (see [Open a project](https://midcode.app/docs/start/open-a-project.md)), you can select elements and comment on them, but nothing here writes.