Skip to content
OdinEye
Playground

See what's wrong with your page

OdinEye marks accessibility, SEO and layout problems right on the page, and tells you how to fix them.

Open the playground
npm install -D odin-eye

Works with

Fits the React stack you already use.

OdinEye reads the page the browser renders, so it doesn't care how you built it.

  • ReactReact 18 and up
  • Next.jsApp and Pages Router
  • ViteReact templates
  • RemixAnd React Router
  • GatsbyStatic sites
  • TypeScriptTypes included

How it works

Problems show up on the page, not in a report you have to go and read.

OdinEye reads the page the browser rendered, runs its checks, and draws what it finds on top. Your elements and styles are never touched.

Setup

One component

Add <OdinEye /> once at the root. No config file, no rules to choose.

Production

Nothing ships

Render it behind a development check and your users never download it.

On the page

Marked on the element

Every problem gets a red or amber outline on the exact element that causes it. Hover the marker to read the fix.

Panel

Everything in one list

The button in the corner opens every issue by category, including the ones you can't see, like a missing description.

Self-aware

Ignores itself

Its own markers and panel are left out of the checks.

Late content

Checks again after load

Images that load late are measured at their real size.

Setup

Two steps, then it watches every page you open.

It only renders in development, so nothing ships to your users.

  1. Install it as a dev dependency

    Pick your package manager. It only needs to be in development.

    Terminal
    npm install -D odin-eye

  2. Add the component once, at the root

    Next to the rest of your app, behind a development check.

    app/layout.tsx
    import { OdinEye } from "odin-eye";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        {process.env.NODE_ENV === "development" && <OdinEye />}
      </body>
    </html>
  );
}

Checks

25 problems that are easy to miss by eye.

A first pass while you write the code, not a full audit. Errors will break the page for some people; warnings are worth a second look.

  • Error
  • Warning

Accessibility

9 checks
  • Images without alt text
  • Buttons without an accessible name
  • Links without an accessible name
  • Form fields without a label
  • Duplicate ids
  • Page without a language
  • Page without a title
  • More than one h1
  • Skipped heading levels

SEO

10 checks
  • Missing meta description
  • Meta description too short or too long
  • Page without an h1
  • Missing viewport meta tag
  • Page title too short or too long
  • Page set to noindex
  • Missing Open Graph tags
  • Missing canonical link
  • Generic link text
  • Links without a destination

Layout

6 checks
  • Broken images
  • Elements wider than the page
  • Distorted images
  • Images larger than needed
  • Touch targets that are too small
  • Text that is too small

Catch it now,not after your users do.

One component, every page checked while you work. Free and open source.

Open the playground
npm install -D odin-eye
Star it on GitHub