Design Engineer | Built MotionDiv | Curious about design | Love to talk about design theories and manga's || art.

github

Anshuman Rana • Peerlist

<h3>MotionDiv - Visual Studio Code Extension</h3><ul><li>Convert HTML and SVG elements into Motion components directly within VS Code.</li><li>Streamline your workflow by instantly transforming a &lt;div&gt; into a &lt;motion.div&gt; with a simple keyboard shortcut (Ctrl + Shift + M).</li><li>Automatically manages framer-motion imports, converting them to motion/react.</li><li>Supports a wide range of HTML elements including div, section, article, header, footer, nav, main, img, span, button, a, ul, li, p, and headings (h1-h6).</li><li>Also supports common SVG elements such as svg, g, path, circle, rect.</li><li>Features automatic import handling: detects existing Motion imports, inserts new imports after existing ones, places them after use client directives, or at the top of the file if necessary.</li><li>Includes single-step undo support for quick corrections.</li><li>Places the cursor after the Motion tag for faster subsequent editing.</li><li>Future versions plan advanced JSX/AST-based element detection.</li></ul><p>Installation is straightforward: Launch VS Code Quick Open, paste the command, and press enter.</p>