プレビュー

プレビューは、チャットの右側で動いているあなたのアプリです。ボタンもフォームもページも、すべて公開後と同じように動きます。

上にあるバー

左から順に説明します。

スマートフォンでは

スマートフォンには、一度に1つのパネルを置く余裕しかありません。下にあるChatとPreviewの2つのボタンで、会話とアプリを切り替えます。プレビューを閉じる × は大きい画面にだけあり、Split view（コードをご覧ください）はパソコンだけで使えます。

すべてのサイズで

サイズのメニューは、それぞれの画面でアプリがどう見えるかを表示します。

• No frameは、上の画像のように、パネルいっぱいに表示します。
• Desktopは、ブラウザのウィンドウに入れ、上に公開アドレスを表示します。
• TabletとMobileは、実際の幅のタブレットやスマートフォンに入れて表示します。

どのアプリも3つのサイズすべてに合わせて作られ、ビルドや変更のたびにスマートフォンの幅で測られます。それでも、ここで見るのが、スマートフォンの訪問者に何が見えるかをいちばん手早く確かめる方法です。

その場で編集する

EditをオンにするとボタンがEditingになり、プレビューは、使うためのページから、変更するためのページに変わります。文章にポインターを合わせるとEdit textが上に表示されるので、クリックして入力します。ほかの要素をクリックすると枠線が付き、プレビューの下端にツールのバーが表示されます。

端にある矢印でバーをたたみ、× で要素の選択を解除します。ボタンをダブルクリックすると、そのボタンが開くページに移動します。

ツールで行う変更にクレジットはかかりません。Edit ElementはAIが書くので、チャットの返信と同じように少しかかります。1つの要素より大きなこと、たとえば新しいセクション、フォーム、ページは、チャットで頼んでください。

Theme

Themeは、アプリ全体で使う色とフォントを、右側のパネルにまとめます。1つ変えると、それを使っているすべての場所が、すべてのページで変わります。

• Colorsには、それぞれの色と、その用途、アプリで何回使われているかが一覧表示されます。スウォッチをクリックして、別の色を選びます。
• Fontsには、それぞれのフォントと、何回使われているかが一覧表示されます。リストから別のフォントを選びます。

プレビューには、変更するたびにその結果が表示されます。Save & Applyでコードに書き込まれ、Cancelですべて元に戻ります。テーマの変更にクレジットはかからず、その前のバージョンはHistoryに保存されます。

元に戻すことと履歴

元に戻す、やり直すは、今回のセッションの変更を1クリックにつき1段階ずつたどります。それより前のことは、エディタの上部にあるHistoryに、すべての変更がその内容にちなんだ名前で保存されていて、どのバージョンにも戻れます。戻ったこともバージョンとして保存されるので、また先に進むこともできます。