HTMLコードを貼り付けてリアルタイムプレビュー＆視覚的編集

コード貼り付け

生のコードを、見て調整できるページへ

HTML、CSS、SVGを貼り付けてページをすぐに表示し、ローカルプロジェクトを用意せずにAI生成コードや手書きコードの最後の視覚的な調整を行えます。

01
AIコーディングツール、テンプレートライブラリ、自分のプロジェクトからページ全体またはコードスニペットを貼り付けます。
02
ソースコードだけで結果を判断せず、コードをすぐに実際のページとしてレンダリングします。
03
ビジュアルキャンバス上でテキスト、画像、レイアウト、スタイルを直接編集します。
04
最後の視覚的な調整が終わったら、精修したHTMLを保存・共有・書き出しできます。

貼り付けたコードを完成したビジュアルページに変える

HTML、CSS、SVGをすぐに表示し、重要な見た目の調整を行ってから、仕上げたHTMLを保存・共有・書き出しできます。

01—04

コードを貼り付け、プレビューして視覚的に仕上げる

1上の入力ボックスにHTML、CSS、SVG、またはAI生成コードを直接貼り付けます。
2プレビューをクリックすると、ローカル環境を構築することなく即座にレンダリングされます。
3要素をクリックしてレイアウトを微調整するか、指定部分を直感的に精修します。
4仕上げたHTMLをエクスポートするか、クリーンなコードをそのままコピーします。

その他の取り込み方法

他の方法でHTMLを取り込みますか？

生のコード、ローカルファイル、公開URLを自由に切り替え、キャンバス上で視覚的に編集できます。