> ## Documentation Index
> Fetch the complete documentation index at: https://docs.xkat.space/llms.txt
> Use this file to discover all available pages before exploring further.

# エディタ + ライブプレビュー

> ブラウザ内で即座に描画されるフロントエンド練習。

フロントエンドレッスンでは、Dynamic Workspace が**エディタとライブ Web プレビュー**
を組み合わせ、変更を即座に描画します。

## 仕組み

<Steps>
  <Step title="マークアップ、スタイル、コンポーネントを編集する">
    エディタで HTML、CSS、またはフレームワークのコードを変更します。
  </Step>

  <Step title="すぐに描画を確認する">
    ライブプレビューパネルがリアルタイムで更新されます — 保存して再読み込みする手間
    はありません。
  </Step>

  <Step title="素早く反復する">
    本物のフロントエンド作業のように、短いフィードバックループで調整と確認を繰り返
    します。
  </Step>
</Steps>

## 安全でサンドボックス化された描画

コードは隔離された環境内で描画されるため、ブラウザで安全に実行されつつ、本物のペー
ジのように振る舞います。

<Tip>
  UI を作っていて何かおかしいですか？ [AI Tutor](/ja/learn/ai-tutor) にコードを調べ
  て修正を提案してもらいましょう。
</Tip>

## 関連

<CardGroup cols={2}>
  <Card title="バックエンド練習" icon="terminal" href="/ja/learn/workspace/editor-terminal">
    リモートコンパイル付きのエディタ + ターミナル。
  </Card>

  <Card title="セットアップ不要" icon="bolt" href="/ja/learn/workspace/zero-setup">
    なぜインストールが不要なのか。
  </Card>
</CardGroup>