UUUP Tools

デザインツール

HTMLからJSXへ変換 - React 属性変換

HTML スニペットをブラウザ内で React JSX に変換できます。class / for を className / htmlFor に置き換え、void tag を閉じ、inline style を可能な範囲で object 形式へ寄せます。変換処理はローカルで完結します。

クイック切替→CSSからTailwindへ変換
HTMLJSXReact
クイック切替:CSSからTailwindへ変換HTML → MarkdownMarkdown → HTML

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻る すべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

  • 静的マークアップを React コンポーネントの下書きへ変換する
  • 書き出した SVG を JSX 用に整える
  • テンプレート由来の class や for 属性を修正する

使い方

  1. HTML を貼り付けるか入力する
  2. 右側の JSX 出力を確認する
  3. JSX をコピーする

入出力サンプル

HTML

<img src="a" class="b">

JSX

<img src="a" className="b" />

FAQ

script やコンポーネントのロジックも変換されますか？

いいえ。対象は DOM レベルの属性名、void tag の閉じ方、関連する構文調整のみで、フレームワークのロジックまでは扱いません。

inline style はどう処理されますか？

style 属性は可能な範囲で React の style object 形式へ変換します。複雑な式を含む場合は手動確認が必要です。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

CSSからTailwindへ変換

CSSからTailwindへ変換 - 宣言マッピング

利用可能

CSS 宣言を貼り付けると、可能な範囲で Tailwind utility class へ変換します。一般的な layout、spacing、color ルールは標準 class に変換し、対応しない値は arbitrary-value 構文へフォールバックします。

CSS Tailwind 変換
ツールを開く

HTML → Markdown

HTML → Markdown 変換オンライン

利用可能

ブラウザ上で HTML を Markdown に変換します。見出し、リスト、表、リンクなどの一般的な構造を保持し、ウェブコンテンツを編集可能な文書に移行するのに便利です。

HTML Markdown コンバーター
ツールを開く

Markdown → HTML

Markdown → HTML 変換オンライン

利用可能

ブラウザ上で Markdown を HTML に変換します。ライブプレビュー、並列表示、コピーやエクスポートに対応し、処理はページ内で完結します。

Markdown HTML コンバーター
ツールを開く