Snaplensy

What is Snaplensy?

Snaplensy is a Chrome extension that lets you inspect any UI element on a webpage and instantly copy its selector, React component path, props, styles, and AI-ready context. It's designed for developers who use AI coding assistants like Claude Code, Cursor, GitHub Copilot, Windsurf, or Aider.

How does Snaplensy work?

After installing, press Ctrl+Shift+Z (or Cmd+Shift+Z on Mac) to activate the inspector. Hover over any element to see its details, click to select it and view the full inspector panel with DOM tree, attributes, styles, React info, and quick-copy buttons.

What's included in Free vs Pro?

The Free version includes element inspection, CSS selectors, computed styles, DOM tree, attributes, colors, typography, and dimensions. Pro unlocks Playwright & Cypress locators, AI-ready copy, React Props & State, element context, element state badges, keyboard arrow navigation, and Copy Styles.

Does Snaplensy collect my browsing data?

No. Snaplensy runs entirely locally in your browser. It only analyzes the page DOM when you explicitly activate it. No data is sent to any server.

Which frameworks does Snaplensy support?

Snaplensy works on any website regardless of framework. It has enhanced support for React (component names, props, ancestors), but the DOM inspection, CSS, attributes, and selector features work with Vue, Angular, Svelte, Next.js, plain HTML, and any other framework.

Can I generate Playwright or Cypress selectors?

Yes! With Snaplensy Pro, you get one-click generation of Playwright locators (page.getByRole, page.getByTestId, etc.) and Cypress selectors (cy.get, cy.contains, cy.findByRole) optimized for your selected element.