Summary
Add a utility to convert standard HTML code into JSX syntax. This is essential for developers migrating legacy templates or using CSS frameworks like Tailwind where class must be changed to className, and self-closing tags must be respected.
Proposed User Interface
Dual Editor Views:
Input (HTML): Code editor with syntax highlighting.
Output (JSX): Read-only editor with JSX syntax highlighting.
Options:
Create Function Component: Wrap the output in a export default function Component() { ... } block.
Inline Styles to Object: Automatically convert style="color: red" to style={{ color: 'red' }}.
Technical Implementation Details
Logic: Use a library like htmltojsx or hast-util-to-jsx.
File Path: app/components/developmentToolsComponent/htmlToJsxConverter.tsx
Make sure to raise PR against develop branch , not main.
Summary
Add a utility to convert standard HTML code into JSX syntax. This is essential for developers migrating legacy templates or using CSS frameworks like Tailwind where class must be changed to className, and self-closing tags must be respected.
Proposed User Interface
Dual Editor Views:
Input (HTML): Code editor with syntax highlighting.
Output (JSX): Read-only editor with JSX syntax highlighting.
Options:
Create Function Component: Wrap the output in a export default function Component() { ... } block.
Inline Styles to Object: Automatically convert style="color: red" to style={{ color: 'red' }}.
Technical Implementation Details
Logic: Use a library like htmltojsx or hast-util-to-jsx.
File Path: app/components/developmentToolsComponent/htmlToJsxConverter.tsx
Make sure to raise PR against develop branch , not main.