Fix Eleventy UI issues visually with AI
Click any element in your Eleventy site. Describe the fix. PulseDev's AI analyzes your templates, data cascade, and styles — then writes production-ready code changes instantly.
What is Eleventy?Eleventy gives you full control. That means full responsibility for CSS.
Eleventy builds fast, zero-JS sites from any template language, but debugging styles across layouts, includes, and data-driven templates means manual DevTools work with every rebuild.
PulseDev vs. the old way
How Eleventy developers fix UI issues — before and after PulseDev.
Tracking down styles across Nunjucks/Liquid layouts, includes, and CSS files without any framework-level tooling.
Click the element on your 11ty site. PulseDev identifies the template source and writes the CSS fix.
PulseDev maps rendered output to your template files — no more guessing which layout or include owns the element.
Install PulseDev
Download the PulseDev desktop app for macOS. Then add the plugin to your Eleventy project.
Configure PulseDev for Eleventy
Add the PulseDev script to your HTML to enable visual debugging. No npm package required.
<!-- Add to your HTML <head> -->
<script src="https://cdn.pulsedev.app/widget.js"
data-project="YOUR_PROJECT_ID"
defer></script>Start the dev server
Run your Eleventy dev server as usual. PulseDev will automatically connect.
$ npx @11ty/eleventy --serve
[11ty] Watching...
[11ty] Server at http://localhost:8080/
→ PulseDev: Visual debugging enabled
→ Status: Template inspector activeHow to use
Point & Inspect
Click any element to see which template, layout, or include rendered it. PulseDev resolves the file path instantly — no DevTools needed.
Pin & Describe
Drop numbered pins on elements and describe fixes in plain English. Attach screenshots or Figma frames for visual reference.
AI Chat & Preview
Claude proposes code diffs in a sidebar chat. See changes live via hot reload. Iterate with follow-up instructions — uses your Claude subscription at zero extra cost.
Ship with Confidence
Review staged diffs, approve or reject per change. Create commits, open PRs, or roll back with one click. Nothing ships without your approval.
Eleventy-Specific Features
Multi-Engine Support
Debug Nunjucks, Liquid, Markdown, or any other template engine that Eleventy supports.
Data File Inspector
View global and directory-level data files used to build the current page.
Collection Debugging
Browse Eleventy collections and tags, and trace how items appear in templates.
Filter & Shortcode Tracing
See which custom filters and shortcodes are applied and their transformations.
Questions, answered.
Does it work with Eleventy 3.0?
Which template engines are supported?
Does it support the data cascade?
Is there a performance overhead?
Ready to debug Eleventy faster?
Download PulseDev and start fixing UI issues visually.
Download Free for macOS