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

# Éditeur + aperçu en direct

> Pratique frontend avec rendu instantané dans le navigateur.

Pour les leçons frontend, le Dynamic Workspace associe l'**éditeur à un aperçu web
en direct** qui affiche vos modifications instantanément.

## Comment ça marche

<Steps>
  <Step title="Modifier le balisage, les styles ou le composant">
    Changez le HTML, le CSS ou le code du framework dans l'éditeur.
  </Step>

  <Step title="Voir le rendu immédiatement">
    Le panneau d'aperçu en direct se met à jour en temps réel — aucun cycle
    enregistrer-puis-rafraîchir.
  </Step>

  <Step title="Itérer rapidement">
    Ajustez et observez dans une boucle de rétroaction serrée, comme dans le vrai
    travail frontend.
  </Step>
</Steps>

## Rendu sûr et isolé

Votre code s'affiche dans un environnement isolé afin de s'exécuter en toute
sécurité dans le navigateur tout en se comportant comme une vraie page.

<Tip>
  Vous construisez une interface et quelque chose cloche ? Demandez à l'[AI Tutor](/fr/learn/ai-tutor)
  d'inspecter votre code et de suggérer une correction.
</Tip>

## Pour aller plus loin

<CardGroup cols={2}>
  <Card title="Pratique backend" icon="terminal" href="/fr/learn/workspace/editor-terminal">
    Éditeur + terminal avec compilation distante.
  </Card>

  <Card title="Aucune configuration" icon="bolt" href="/fr/learn/workspace/zero-setup">
    Pourquoi il n'y a rien à installer.
  </Card>
</CardGroup>