Courier (2026)

I use Agentation, a tool for pointing at an element and commenting to that specific element to my coding agent. However, sometimes I find myself needing to see how it’s styled now, so I know how much or what to change.

Take a button that hugs its height and gets its size from padding. Once I can see that, I know I want a fixed height and no padding. And when I see my edits on the page as I make them, I can hand my agent the exact change, down to the code.

Courier is a small overlay that runs in development. Click the pencil, then point at anything on the page to select it. The panel reads that element’s styles from the browser, so you see what the page renders instead of what the code suggests.

Here it is on this site’s contact buttons. Each one is an inline flex row that hugs its width at 47px and fills its height at 28px, with 10px of padding on the left and 6px on the right. I personally wanted that picture before I touch anything.

I think in Figma, so I made the controls speak Figma. CSS has many ways to produce the same result and Figma has one word for each, so translating between them took the most work.

Sizing shows it best. Figma has Fixed, Hug and Fill, and Courier measures the element to tell which one applies. It sizes the element to its content to test Hug and to its parent to test Fill. Anything else counts as Fixed.

Fill then has to become the right CSS for where the element sits. In a flex row Courier makes it grow, across a flex row it makes it stretch, and in normal flow it sets full width. When you switch modes, Courier removes the old mode’s styles.

Courier treats spacing the same way. It measures the distance to the next element, then finds what creates it. If the parent’s gap creates it, editing the gap moves every child, and the panel tells you so.

I got this part right after a bug. While adding the 4px under this page’s title, I saw the same 4px twice, once in Gap labelled as the title’s bottom margin and again in Margin. Both rows edited one property, so changing either changed the other.

In Figma a gap belongs to the parent and spaces its children, and a margin is a separate thing. I changed Courier to show Gap when the parent has one and to keep margins in the Margin row. Space from a parent spreading its children out stays out of Gap too. When a gap and margins add up, Gap shows the total and what makes it, and locks the field so you can’t type over it.

The rest follows Figma too. Layout controls appear for flex and grid, and the align buttons turn with the direction. Each element shows the controls it owns, so a section gets layout and spacing while a button also gets its text and icon.

Tailwind needed its own handling. Utility classes describe styles, so Courier leaves them out when it names an element, and a heading with five utility classes shows as h1. The export keeps the full class string, since an agent finds the element in the code fastest that way.

I translated shadows the same way. CSS writes all of an element’s shadows on one comma separated line, and the word inset turns a layer inward. Figma lists them as effects, one row each, every one a drop or inner shadow with its own position, blur, spread and colour. Courier splits the line into those layers and shows each as a card, where you edit, add or remove a layer like in Figma. A new layer starts as Figma’s default drop shadow.

You see each edit on the page as you make it, and each changed field gets a blue dot and a reset. When an element has twins, like these four buttons, one tick applies your edit to all of them.

Try it on the button below. The panel is open on it, so type a value, nudge one with the arrow keys or switch Hug to Fixed, and the button changes with you. Save copies the brief.

Copy turns your edits into a short brief for the agent. It names the elements, how to find them and the component they live in, and lists each change as a before and after.

I care most about the before. When a height goes from filling its parent at 28px to a fixed 32px, the brief says so, and the agent changes how the button sizes itself instead of swapping a number. The brief also tells the agent to keep values exact and to use the Tailwind class or token that matches.

Courier has no AI inside and never writes to your files. It runs in its own sealed layer, so the page’s styles can’t reach it, and at about 46 KB gzipped it loads in development and stays off your live site. Your edits survive a reload, and if the page changed under them, Courier tells you what it couldn’t find.

I designed Courier and built it with Claude Code. It has 30 unit tests and 85 end to end tests, and you can install it from npm as @galzorigo/courier.

Add it as a dev dependency and load it in development, so it stays out of what you ship.

npm i -D @galzorigo/courier

On a Vite site, whether React, Vue, Svelte or plain, it takes three lines in the entry file.

if (import.meta.env.DEV) {import("@galzorigo/courier").then((c) => c.mount());}

On Next.js with the App Router, a small client component mounts it and the root layout renders that component in development.

"use client";import { useEffect } from "react";export default function CourierDev() {useEffect(() => {if (process.env.NODE_ENV !== "development") return;let unmount: (() => void) | undefined;import("@galzorigo/courier").then((c) => (unmount = c.mount()));return () => unmount?.();}, []);return null;}

import CourierDev from "@/components/courier-dev";// inside <body>{process.env.NODE_ENV === "development" && <CourierDev />}

Run the site, click the pencil in the bottom right corner and pick an element. Edit it, save and copy, then paste the brief into your agent.

Next I want each element to point to the file and line it comes from, so the brief tells the agent where to make the change instead of how to search for it.