A small Vite plugin for moving heavy JSX attributes into comments

Thanh Dat Vo — Sun, 10 May 2026 06:21:28 +0000

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:

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!

DEV Community: Thanh Dat Vo

A small Vite plugin for moving heavy JSX attributes into comments