Announcing Visor-App: AI-Powered UI Testing for Your React Projects

Tired of tedious, pixel-by-pixel checking to see if your new code broke a UI component? Ever wondered if your frontend implementation really matches the Figma design?

Introducing Visor-App, a new open-source tool designed to bring confidence and speed to your development workflow. Visor-App provides powerful, ready-to-use React components for visual regression testing and AI-powered design comparison, and you can integrate it into your Next.js project in minutes.

Core Features

• Visual Difference Detection: Upload two versions of a PNG screenshot and instantly see any visual changes. The tool highlights differences in an intuitive UI, making regressions impossible to miss.
• Figma Similarity Analysis: Go beyond pixel-perfect comparisons. Visor-App uses generative AI to analyze a screenshot against your Figma design specifications, providing a similarity score and detailed reasoning. It's like having a design review assistant.
• Interactive UI: A clean, intuitive interface allows you to switch between side-by-side and overlay comparison modes, toggle difference highlighting, and easily input your design specs and screenshots.

Getting Started: Using Visor-App in Your Project

Visor-App is designed to be a drop-in solution for any Next.js application. Before publishing, you must compile the code.

1. Build Before Publishing

This package includes TypeScript source files. Before you can publish it to npm, you need to compile them into JavaScript.

# This will create a `dist` directory with the compiled files
npm run build

After the build is complete, you can publish the package.

2. Installation for Users

First, developers will install the package from npm:

npm install visor-app

3. Prerequisites: Tailwind CSS & shadcn/ui

The components in this package are built with Tailwind CSS and shadcn/ui. For them to work correctly, a project must have these configured.

If they don't have them set up, they can follow the official shadcn/ui installation guide for Next.js. This will automatically set up Tailwind CSS for them.

At a minimum, the project needs:

• A tailwind.config.ts (or .js) file.
• A globals.css file with the core shadcn/ui styles and theme variables.

4. Configure Tailwind CSS

Important: Because the styles for the components are in the package, developers need to configure their tailwind.config.ts to scan the visor-app package for Tailwind classes.

// tailwind.config.ts or tailwind.config.js
module.exports = {
  content: [
    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
    './node_modules/visor-app/dist/**/*.{js,ts,jsx,tsx}', // Add this line
  ],
  // ...
}

5. Usage Example

Once the project is configured, developers can import and use the components just like any other React component.

// In one of your pages or components (e.g., /app/testing/page.tsx)
import { VisualDiff } from 'visor-app/visual-diff';
import { FigmaSimilarity } from 'visor-app/figma-similarity';

export default function TestingPage() {
  return (
    <div className="container mx-auto p-8 space-y-12">
      <h1 className="text-4xl font-bold mb-4">My UI Testing Suite</h1>

      <section>
        <h2 className="text-2xl font-semibold mb-4">Visual Difference Check</h2>
        <VisualDiff />
      </section>

      <section>
        <h2 className="text-2xl font-semibold mb-4">Figma Similarity Analysis</h2>
        <FigmaSimilarity />
      </section>
    </div>
  );
}

And that's it! They now have a powerful visual testing suite integrated directly into their project.

Why We Built This

We believe that high-quality UI development requires better tools. Visor-App aims to bridge the gap between design and implementation, catch visual bugs early, and ultimately help developers ship with more confidence.

This is a community-driven project, and we welcome your feedback and contributions. Give it a try and let us know what you think!