Flowing
Dev
他のツールも見る
プロジェクトに追加
プロジェクトモード
Search tools and commands…
⌘ K
日本語
HTMLビューアー
無料
HTMLを貼るだけで、ソースの隣にライブレンダリングされたページが出てくる。 データがこのブラウザの外に出ることはありません。
基礎
変更が必要ですか?このコンテンツをツリー、テーブル、フォームモードで編集してください。
開く HTMLエディター
入力
20 lines
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Demo page</title> <style> body { font-family: system-ui, sans-serif; margin: 2rem; background: #f8fafc; color: #0f172a; } .card { background: white; border: 1px solid #e2e8f0; border-radius: 12px; padding: 1.5rem; max-width: 420px; } h1 { font-size: 1.25rem; margin: 0 0 0.5rem; } button { background: #4f46e5; color: white; border: 0; border-radius: 8px; padding: 0.5rem 1rem; } </style> </head> <body> <div class="card"> <h1>Hello from FlowingDev</h1> <p>Edit the HTML on the left and watch this preview update live.</p> <button>Click me</button> </div> </body> </html>
レンダリング済み
ソース
準備完了