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 >

Enter fullscreen mode

Exit fullscreen mode

After

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

Enter fullscreen mode

Exit fullscreen mode

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 >;

Enter fullscreen mode

Exit fullscreen mode

You can try them online:

React playground

Solid playground

Please switch between App.before.tsx and App.after.tsx to…