![見出し画像](https://assets.st-note.com/production/uploads/images/158956288/rectangle_large_type_2_a65b1fd9120176fe0a944423092f7cb0.png?width=1200)
ソースコードがすぐ見えるように
websim.aiの新機能です。まだフューチャーなので全部の人が使えるか分かりませんが。
画面右上のボタンから、View Sourceボタンでソースが見えます。
![](https://assets.st-note.com/img/1729602240-u8ep5tOziVUR0IPrNxCqf2kw.png?width=1200)
ソースも修正が可能です。これはいいですね。見えるだけでなく。
例えばタイトルにハンバーガーが2つあるのですが、一つだけにしたいとします。
ソースコードボタンを押すと、左サイドバーに出てきます。ここで修正します。
![](https://assets.st-note.com/img/1729602347-NxHhaFZCk4X3ne6bI2v0Urtq.png?width=1200)
ハンバーガー絵文字を一つ消しました。修正が加わると、Previewボタンが押せるようになるので押してみましょう。
![](https://assets.st-note.com/img/1729602384-4yILNMiuRHgeQJ3C7UF6jT0Z.png?width=1200)
後ろのハンバーガー絵文字が消えましたね。これでSaveボタンを押せば、この状態で保存が出来ます。便利!
![](https://assets.st-note.com/img/1729602440-wyjW0Raqlg8f3QPDbk5cCiXt.png?width=1200)
バージョンとしては、命令文が<manual-edit>として手動で触ったということになるみたいですね。なるほど。
というわけで、ソースコード編集モード触ってみてください!
公式Xからの動画も分かりやすいですー。
https://x.com/websim_ai/status/1848830472148947456
Direct code editing, now in Websim🔥
— WebSim (@websim_ai) October 22, 2024
Combine coding with prompting and create the ultimate project 😎 🎨 pic.twitter.com/Gl6jqo1Ba5
いいなと思ったら応援しよう!
![readmaster](https://assets.st-note.com/production/uploads/images/158549530/profile_20d8891cdf3ca89003202cbca347e25f.jpg?width=600&crop=1:1,smart)