KivTools

Exécuteur HTML, CSS et JavaScript

Écrivez ou collez le code puis lancez l’aperçu. La nouvelle fenêtre exécute le JavaScript fourni ; utilisez du code de confiance.

Fonctionne localement dans votre navigateur

Comment exécuter du HTML, du CSS et du JavaScript dans le navigateur

Collez du HTML avec du CSS et du JavaScript dans l’éditeur, puis lancez l’aperçu : le code s’ouvre dans une nouvelle fenêtre du navigateur, où le balisage est rendu et les scripts exécutés. C’est un moyen rapide de voir réagir un fragment, une modification de mise en page ou un petit script DOM dans un vrai navigateur, sans créer de fichier ni démarrer un serveur local.

La page collée s’exécute dans un cadre en bac à sable, séparé de ce site. Les scripts et les boîtes de dialogue fonctionnent, mais le code ne peut lire ni le stockage ni le DOM de cette page, et rien de ce que vous saisissez n’est envoyé : l’aperçu se passe entièrement dans votre navigateur.

  1. Collez ou tapez le code dans l’éditeur : un document HTML complet ou un fragment, par exemple une div avec un bloc de style et un bloc de script.
  2. Lancez l’aperçu. Une nouvelle fenêtre s’ouvre avec la page rendue ; si le navigateur bloque les pop-ups, la page le signale : autorisez les pop-ups pour kivtools.com et relancez.
  3. Utilisez Tout sélectionner, Copier et Effacer au fil des essais : Tout sélectionner sélectionne tout l’éditeur, Copier met le contenu dans le presse-papiers et Effacer vide la zone pour repartir de zéro.
  4. Fermez la fenêtre d’aperçu quand vous avez terminé ; ni le code ni l’aperçu ne sont enregistrés, gardez donc votre propre copie de ce que vous voulez réutiliser.

Ce qui se passe quand vous lancez l’aperçu

Comment l’aperçu est isolé

La fenêtre d’aperçu charge votre code dans une iframe dont l’attribut sandbox vaut allow-scripts, allow-modals, allow-forms et allow-popups. Les scripts s’exécutent, les boîtes de dialogue (alert, confirm, prompt) et les contrôles de formulaire fonctionnent, les liens peuvent ouvrir d’autres fenêtres — et le cadre est traité comme une origine opaque.

Cette origine opaque est l’essentiel : une page placée dans le bac à sable n’atteint pas le document parent et ne lit pas le localStorage de ce site ; du code collé depuis une source inconnue ne peut donc pas toucher votre onglet KivTools. Il ne peut pas non plus faire quitter cette page ; tout ce qu’il fait reste dans son cadre.

Ce que l’on peut vérifier avec

Pour le code fourni, l’aperçu se comporte comme un onglet de navigateur : le HTML est analysé, le CSS appliqué, les scripts internes et externes exécutés, et les modifications du DOM visibles immédiatement. Redimensionner la fenêtre d’aperçu est un bon moyen d’observer les media queries et les mises en page flexibles.

L’outil n’ajoute pas de console d’erreurs : quand un script échoue, vous voyez ce qu’afficherait une page ordinaire, souvent un cadre vide ou à moitié rendu. L’aperçu convient donc à une vérification rapide, et les outils de développement du navigateur restent l’endroit où regarder en cas de problème.

Limites, confidentialité et remarques pratiques

Rien n’est envoyé à KivTools : votre navigateur analyse et exécute le code, aucune requête ne le transporte. Aucune exécution côté serveur n’a lieu non plus : du code PHP, Python ou de base de données ne s’exécutera pas ici.

L’éditeur est volontairement simple — pas de coloration syntaxique, de chargement de fichier ni d’historique — et un rafraîchissement de la page le vide. Du code qui dépend de cookies ou du localStorage ne trouvera pas de session enregistrée dans l’aperçu isolé ; et si le bloqueur de pop-ups empêche la fenêtre, la page affiche un message à la place de l’aperçu.

Outils récents :