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

# Editor + Live Preview

> Frontend practice with instant in-browser rendering.

For frontend lessons, the Dynamic Workspace pairs the **editor with a live web
preview** that renders your changes instantly.

## How it works

<Steps>
  <Step title="Edit the markup, styles, or component">
    Change HTML, CSS, or framework code in the editor.
  </Step>

  <Step title="See it render immediately">
    The live preview panel updates in real time — no save-and-refresh cycle.
  </Step>

  <Step title="Iterate quickly">
    Tweak and observe in a tight feedback loop, the way real frontend work feels.
  </Step>
</Steps>

## Safe, sandboxed rendering

Your code renders inside an isolated environment so it can run safely in the
browser while still behaving like a real page.

<Tip>
  Building a UI and something looks off? Ask the [AI Tutor](/en/learn/ai-tutor)
  to inspect your code and suggest a correction.
</Tip>

## Related

<CardGroup cols={2}>
  <Card title="Backend practice" icon="terminal" href="/en/learn/workspace/editor-terminal">
    Editor + Terminal with remote compilation.
  </Card>

  <Card title="Zero setup" icon="bolt" href="/en/learn/workspace/zero-setup">
    Why there's nothing to install.
  </Card>
</CardGroup>