---

OdinEye is a React component that checks the page you are working on and marks problems on the elements that have them: an image without alt text, a button without a name, an element that makes the page scroll sideways. Hover a marked element to see what is wrong and how to fix it, or open the panel to see everything at once.

It runs in your app during development, so you see issues while you write the code instead of in an audit afterwards.

Features

• Issues are outlined on the page, with a badge on each element.
• Hovering a marked element explains the problem and the fix.
• A panel lists every issue by category. Clicking one scrolls to it.
• Checks run again after route changes, DOM updates and image loads.
• No configuration and no browser extension.
• Renders nothing on the server, so it works with SSR and static generation.
• The overlay's styles are scoped and the page stays clickable.

Quick start

npm install -D odin-eye

Then render it once, behind a development check:

import { OdinEye } from "odin-eye";

export default function App() {
  return (
    <>
      {/* your app */}
      {process.env.NODE_ENV === "development" && <OdinEye />}
    </>
  );
}

That's it. Open your app and look at the bottom right corner.

Setup for Next.js (App and Pages Router), Vite, Remix / React Router and Gatsby is in the package README.

Works with

What it checks

25 checks across three categories.

Accessibility (9)

Check	Severity
Button without accessible name	Error
Link without accessible name	Error
Image without alt text	Error
Form field without label	Error
Duplicate id	Error
Page without language	Error
Page without title	Error
Skipped heading level	Warning
Multiple <h1> headings	Warning

SEO (10)

Check	Severity
Missing meta description	Error
Missing viewport meta tag	Error
Page without <h1>	Error
Meta description length	Warning
Page title length	Warning
Missing canonical link	Warning
Missing Open Graph tags	Warning
Link without destination	Warning
Generic link text	Warning
Page is set to noindex	Warning

UI and layout (6)

Check	Severity
Element wider than the page	Error
Broken image	Error
Distorted image	Warning
Image larger than needed	Warning
Touch target too small	Warning
Text too small	Warning

Want to see them fire? The playground has a wrong and a right example of every check.

Repository

This is an npm workspaces monorepo.

odin-eye/
├── packages/
│   └── odin-eye/     the library published to npm
└── apps/
    └── web/          the website and playground (Next.js)

Development

git clone https://github.com/SRamoras/odin-eye.git
cd odin-eye
npm install

# rebuild the library on every change
cd packages/odin-eye && npm run dev

# in another terminal, run the website on localhost:3000
cd apps/web && npm run dev

Contributing

Found a false positive, a problem OdinEye missed, or have an idea for a new check? Open an issue; there is a template for each case.

Pull requests are welcome. Read the contributing guide first: it covers running the project, testing in your own app and adding a check.

License

MIT © Diogo Silva