Hi everybody,
I'm a software engineer for as long as I can remember.

When working with web application frameworks, I often get tired when having to scan long JSX, mostly because of long class names.

I had an idea of writing a Vite plugin that move the classname attributes into comments above element.
For example:

• Before

<h1 class="rounded-lg bg-blue-500 px-4 py-2 text-white">Hello Mom</h1>

• After

{/* @class rounded-lg bg-blue-500 */}
{/* @class px-4 py-2 text-white */}
<h1>Hello Mom</h1>;

Beside making JSX shorter and easier to scan, this also let you try new attribute values during development while keeping the original JSX unchanged.
For example:

{/* @class rounded-lg bg-blue-500 */}
<h1 class="title">Hello Mom</h1>;

You can try them online:

• React playground
• Solid playground

Please switch between App.before.tsx and App.after.tsx to compare the syntax

I’d love feedback from JSX users:

• Is this syntax useful?
• Would you use this in real projects?
• What directives should be supported by default?

This is the plugin repo

Issues, ideas, and pull requests are welcome.

Thank you for taking a look!