Pixel Mirror is a lightweight tool for front-end developers that overlays design mockups on web pages. With features like adjustable transparency, scaling, alignment, and grid guides, it helps developers achieve pixel-perfect accuracy when implementing UI designs.
1. For Vite projects
Install the package via npm:
npm install pixel-mirror --save-devThen, add Pixel Mirror's Vite plugin to your vite.config.js:
import { defineConfig } from "vite";
import pixelMirror from "pixel-mirror/vite";
export default defineConfig({
plugins: [pixelMirror()],
// ... other configurations
});The plugin is automatically injected into your HTML during development and will be removed in production builds.
2. For Astro projects
Install the package via npm:
npm install pixel-mirror --save-devThen, add Pixel Mirror's Astro Integration to your astro.config.mjs:
import { defineConfig } from "astro/config";
import pixelMirror from "pixel-mirror/astro";
export default defineConfig({
integrations: [pixelMirror()],
// ... other configurations
});3. For Next.js projects
Inject the following code to the <Head></Head> section in _document.jsx:
// import Script from "next/script"
{process.env.NODE_ENV === "development" && (
<Script
src="https://cdn.jsdelivr.net/npm/pixel-mirror/dist/index.js"
strategy="afterInteractive"
/>
)}Integrate Pixel Mirror by injecting its script into your HTML:
<script defer src="https://cdn.jsdelivr.net/npm/pixel-mirror/dist/index.js"></script>This allows you to use Pixel Mirror out of the box without additional setup. Remember to remove the script in the production environment.
Before using this tool, please note that it sets the position of the :root element to relative. This ensures overlays work correctly with minimal impact on the host project. Be sure to verify compatibility with your project before proceeding.
For an interactive usage example, please refer to https://peiwen.lu/posts/pixel-mirror.
Icons by https://hugeicons.com