@softgenai/element-tagger

A lightweight loader that injects tracking attributes into React/JSX elements for visual editing capabilities.

Installation

npm install --save-dev @softgenai/element-tagger

Usage

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    turbo: {
      rules: {
        "*.tsx": {
          loaders: ["@softgenai/element-tagger"],
          as: "*.tsx",
        },
        "*.jsx": {
          loaders: ["@softgenai/element-tagger"],
          as: "*.jsx",
        },
      },
    },
  },
};

export default nextConfig;

How It Works

The loader injects two data attributes into JSX elements at build time:

• data-sg-el - File path and element position (filepath:line:column)
• data-sg-name - Element/component name

License

MIT