PulseDev for Next.js.Click it, fix the page.
Click any element in your running Next.js app and say what’s wrong. Your agent opens the component or route behind it, and Fast Refresh shows the edit before you approve the diff.
One minute of setup.
None of it ships.
Add one script to app/layout.tsx and start your dev server. Keep the PulseDev app open while you work; it runs the server on port 3899 that the widget talks to. Set up project in the app shows this snippet with your token.
- Add
Add the script to your layout.
Put it inside <body> in app/layout.tsx (pages/_document.tsx on the Pages Router). The NODE_ENV check keeps it out of production builds.
app/layout.tsx import Script from 'next/script' // inside <body> {"production" === 'development' && ( <Script src="http://localhost:3899/widget.js" data-token="YOUR_TOKEN" /> )} - Run
Start Next.js as usual.
The widget shows up in the corner of every page. Click it, then click the element you want changed.
terminal $npm run dev➜Local:http://localhost:3000➜PulseDev:widget connected
It fits how
Next.js works.
A click carries more than a selector. The page, the element and its selector go to your agent, which follows them to the right file.
App and Pages Router
The widget reads the rendered page, so it works the same on either router.
Fast Refresh feedback
The agent edits your component and Fast Refresh shows the result in the same tab before you approve the diff.
Your styling stack
Tailwind, CSS Modules, styled-components or plain CSS. The agent follows the pattern already in your project.
Page and selector
The page, the element and its selector go to your agent, which follows them to the right file.
Next.js questions.
- Does it work with Turbopack?
- Yes. It only needs the page to render on localhost, so the bundler doesn’t matter.
- Can I use this with the Pages Router?
- Yes. Add the tag to pages/_document.tsx instead of app/layout.tsx.
- Does it support CSS Modules?
- Yes. CSS Modules, Styled Components, Emotion and Tailwind CSS all work.
- Is there a native Next.js package?
- It’s coming. The script tag works today, and the package will add component, props, route and source location to every click.
Your Next.js app is running.Go point at the bug.
Windows coming soon. Free to start.