> ## 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.

# 编辑器 + 实时预览

> 通过即时浏览器内渲染进行前端练习。

对于前端课程，动态工作区将 **编辑器与实时网络配对
预览** 可立即呈现您的更改。

## 它是如何工作的

<Steps>
  <Step title="编辑标记、样式或组件">
    在编辑器中更改 HTML、CSS 或框架代码。
  </Step>

  <Step title="立即看到它渲染">
    实时预览面板实时更新——无需保存和刷新周期。
  </Step>

  <Step title="快速迭代">
    在紧密的反馈循环中进行调整和观察，这是真正的前端工作的感觉。
  </Step>
</Steps>

## 安全的沙盒渲染

您的代码在隔离的环境中呈现，因此可以在
浏览器，同时仍然表现得像一个真实的页面。

<Tip>
  构建 UI 后有些东西看起来不太对劲？询问【AI导师】(/zh/learn/ai-tutor)
  检查您的代码并提出更正建议。
</Tip>

＃＃ 有关的

<CardGroup cols={2}>
  <Card title="后端实践" icon="terminal" href="/zh/learn/workspace/editor-terminal">
    具有远程编译功能的编辑器+终端。
  </Card>

  <Card title="零设置" icon="bolt" href="/zh/learn/workspace/zero-setup">
    为什么没有什么可安装的。
  </Card>
</CardGroup>