Loader that injects tracking attributes into React/JSX elements for visual editing
npm install @softgenai/element-taggerA lightweight loader that injects tracking attributes into React/JSX elements for visual editing capabilities.
``bash`
npm install --save-dev @softgenai/element-tagger
`javascript
/* @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;
`
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
-
MIT