Multi M
Tick a few things, press M again, and they become one comment about all of them.
Something looks off on the page. You click it, say what's up, and your coding agent gets the file and the line that made it. No screenshots. No going looking.
Roasted the Tuesday before it reaches you.
Yirgacheffe
Jasmine, bergamot
£14Huila
Cocoa, red apple
£12Kirinyaga
Blackcurrant
£16Whatever you build with. One script tag.
How it works
The middle bit is yours. Laminator handles either side of it.
One element, some words, a few things at once, or a box round a whole area.
Type it, or just say it out loud. It already knows which rule made it.
It opens with the lot. Pins turn grey as each one gets fixed.
Pointing
One element. You get the rule behind it, what the browser worked out, the component it came from, and any neighbour sitting a couple of pixels off.
Highlight some words and those exact words come through. Nobody has to guess which sentence you meant.
Tick a few things, press M again, and they become one comment about all of them.
Drag a box. You get the container and everything in it, for when the layout is the problem.
Pauses every animation so you can point at the frame that's actually wrong.
Grabs a real picture of the element with a bit of room around it, so the spacing you mean is visible.
If the rule is one it can write to, the box lists what it says. Edit a value, hit Enter, and it lands in the file.
Setup
There's nothing to fill in. The first time you run it, Laminator reads your repo: what you build with, which stylesheets it's allowed to touch, and which rule lives on which line. After that it just knows.
ruleA stylesheet rule made it. You get the file, the line, what it says now, and how many other elements share it.
utilityTailwind, or something like it. No rule to open, so you get the class list and the component name.
noneA CSS module, a style block, or CSS-in-JS. You get the classes to go looking for.
CSS modules are left out on purpose. Their class names get scrambled when you build, so what you see in the browser can't be traced back. Pointing at a line there would look right and be wrong.
The numbers
Install
Run it in your project. It prints a script tag — put that in, but only for development.
$ npm i -D laminator $ npx laminator init
It reads your repo and prints the line for step two.
<!-- before </body> -->
<script src="http://127.0.0.1:7317/client.js"></script><!-- index.html, before </body> -->
<script src="http://127.0.0.1:7317/client.js"></script>// app/layout.tsx
{process.env.NODE_ENV === 'development' && (
<script src="http://127.0.0.1:7317/client.js" />
)}<%# application.html.erb %>
<% if Rails.env.development? %>
<script src="http://127.0.0.1:7317/client.js"></script>
<% end %>{# your base template #}
{% if debug %}
<script src="http://127.0.0.1:7317/client.js"></script>
{% endif %}Only in development. It talks to a server that can edit your CSS.
$ npx laminator
Open your app and press Ctrl/Cmd + Shift + F.
Safety
It listens on 127.0.0.1 only, so nothing else on your network can reach it.
No npm packages come along with it. What you download is the whole thing.
Any site you visit can quietly poke localhost. Your browser stops it reading the answer, but not asking — so anything that writes needs a key, and only your own pages get one.
Writing takes a file, a line, a property and a value. It can't write anything else, anywhere else.
.laminator/ comes with its own gitignore, so it won't turn up in your diffs.
Questions
No. Send writes the file and copies the prompt either way. The agent just saves you a paste.
Some, but less. There's no rule to point at, so you get the class list, the component name and what the browser worked out. Still better than a screenshot and a sentence.
Yes, if the rule is one it can write to. The box lists what the rule says. Change
a value, press Enter, and it goes in the file. Your dev server reloads it. To undo,
use git diff.
The stylesheet has moved since it last looked. Run laminator scan
and it'll catch up.
Not really, and nothing can. Nothing types into a terminal that's already running. So for that case it copies the prompt and you paste it. It says so rather than pretending.
Next time something looks off, just click it.