UTILS.
100% в браузере

HTML в JSX / React

Преобразуйте фрагмент HTML в валидный JSX для React — переименовывая атрибуты, самозакрывая void-теги и превращая инлайн-стили в объекты style.

— результат появится здесь —

Об этом инструменте

Конвертер HTML в JSX / React разбирает фрагмент HTML нативным браузерным DOMParser и повторно сериализует его как валидный JSX, исправляя всё, что нужно React. Он работает полностью на стороне клиента, поэтому вставляемая разметка остаётся на вашей машине. Вставьте любой HTML — экспорт из дизайна, шаблон письма, набросок компонента — и получите JSX, который можно сразу вставить в файл React.

Переписывание переименовывает зарезервированные атрибуты (class становится className, for становится htmlFor), приводит остальные к camelCase — tabindex в tabIndex, maxlength в maxLength, stroke-width в strokeWidth — оставляя атрибуты data-* и aria-* нетронутыми. Void-элементы вроде img, br, input и hr делаются самозакрывающимися (<img />), HTML-комментарии становятся {/* ... */}, буквальные фигурные скобки в тексте экранируются как {'{'}, а инлайн-строка style="a:b;c:d" преобразуется в объект style={{ a: 'b', c: 'd' }} с CSS-ключами в camelCase. Логические атрибуты вроде disabled можно выдавать голыми или как ={true} с помощью переключателя.

Выберите вывод фрагмента — несколько корневых узлов автоматически оборачиваются во фрагмент <>...</> — или вывод полного компонента, который оборачивает JSX в export default function с выбранным вами именем и отступом (2 пробела, 4 пробела или табуляции). Результат готов к вставке; поскольку разбор использует настоящий DOM, некорректная вложенность нормализуется так же, как это сделал бы браузер.

Часто задаваемые вопросы

Какие атрибуты переименовываются?
class становится className, а for становится htmlFor; другие дефисные или зарезервированные атрибуты приводятся к camelCase (tabindex в tabIndex, maxlength в maxLength, stroke-width в strokeWidth). Атрибуты data-* и aria-* сохраняются точно как написано.
Как обрабатываются инлайн-стили?
Строка style="color:red;font-size:14px" становится style={{ color: 'red', fontSize: '14px' }} — каждое свойство CSS приводится к camelCase, а каждое значение выдаётся как строка, что всегда валидно для инлайн-стилей React.
Что происходит с несколькими корневыми элементами?
JSX нужен один корень, поэтому, когда в вашем фрагменте несколько верхнеуровневых узлов, они оборачиваются во фрагмент (<>...</>). Режим полного компонента вместо этого оборачивает их в возвращаемое выражение в скобках.
Преобразует ли он комментарии и void-теги?
Да. HTML-комментарии становятся JSX-комментариями {/* ... */}, а void-элементы (img, br, input, hr, meta, link и остальные) отображаются самозакрывающимися как <img />, чего требует JSX.

Больше инструментов