bext Play, Éditeur en ligne
Un éditeur en ligne pour écrire un projet bext et PRISM dans le navigateur : fichiers, code, aperçu mis à jour à chaque frappe, HTML rendu, JS compilé et partage par lien.
Essayer PRISM sans rien installer
Pour découvrir bext et son framework PRISM, installer un projet est une étape de trop. Le site play.bext.dev ouvre directement un éditeur dans le navigateur, avec les fichiers du projet, le code et un aperçu de la page.
Nous l’avons conçu et développé pour que tout se passe dans le navigateur du visiteur : le code est transpilé et la page rendue à chaque frappe. Le même éditeur s’affiche dans les exemples de demo.bext.dev, pour modifier un exemple sur place.
Le projet en bref
- Besoin
- Installer un projet est une étape de trop pour découvrir PRISM.
- Ce que nous avons livré
- Un éditeur de projets PRISM qui s’exécute dans le navigateur et recalcule le rendu à chaque frappe, avec les vues HTML et JavaScript, un lien de partage et un téléchargement en archive.
- Résultat
- Le même éditeur est intégré aux exemples de bext Demo.
Un projet PRISM dans le navigateur
Nous développons bext Play pour essayer bext et son framework PRISM sans rien installer. L’écran se partage entre les fichiers du projet, l’éditeur de code et un aperçu présenté comme un petit navigateur, avec sa barre d’adresse et ses boutons de navigation.
Tout se passe dans le navigateur du visiteur. À chaque frappe, le code est transpilé, les loaders s’exécutent, la page est composée avec son layout et l’aperçu se met à jour. Le moteur de transpilation se choisit dans l’en-tête : Babel, ou tsc-rs, le compilateur de bext, compilé en WebAssembly.
L’aperçu peut aussi afficher le HTML rendu côté serveur ou le JS compilé de la route ouverte, et une console reprend les messages du code. Une barre de taille indique le poids du document, et peut l’estimer tel qu’il serait envoyé en production.
Faites glisser le schéma pour le voir en entier.
Modèles, partage et intégration aux exemples
Un menu propose des projets de départ : une page seule, un tableau de bord, des données et des routes, un formulaire de recherche, Tailwind, des îlots, des signaux, des routes API, et des paires qui comparent la même interface écrite avec React et avec des signaux.
Le projet se modifie librement, fichier par fichier, et reste dans le navigateur d’une visite à l’autre. Le bouton Partager copie un lien vers le projet, et le projet se télécharge en archive .zip.
Bext Play sert aussi aux exemples de demo.bext.dev : sous l’intitulé « Essayez en direct », l’éditeur s’ouvre dans la page, sans son en-tête, et un lien reprend le même projet en plein écran.
Faites glisser le schéma pour le voir en entier.
Le site, page par page
8 pages capturées sur play.bext.dev le 25 septembre 2026, sur ordinateur et sur téléphone. Cliquez sur un aperçu pour l’agrandir, puis faites défiler à l’intérieur pour découvrir toute la page. Les flèches permettent de changer de page.
L’éditeur
L’éditeur et son aperçu, avec le modèle Bonjour proposé à l’ouverture.
3 pages, 3 vues mobiles
Vues et moteur
Le résultat vu autrement : HTML rendu, JS compilé, autre moteur de transpilation, estimation de production.
4 pages, 0 vues mobiles
Les fonctions de l’éditeur
Ce que propose bext Play, de l’écriture du code au partage du projet.
Éditeur
- Éditeur de code avec coloration syntaxique et fermeture des parenthèses
- Suggestions de saisie pour les fonctions de PRISM et de React
- Arborescence de fichiers : ajout, renommage et suppression
- Modèles de départ, du simple Bonjour aux routes API
- Exécution à chaque frappe, ou avec Ctrl+S
- Réinitialisation d’un fichier ou du projet
Aperçu
- Aperçu de la page dans un navigateur intégré, avec barre d’adresse
- Navigation entre les routes du projet : précédent, suivant, recharger
- Vue du HTML rendu côté serveur, avec mise en forme
- Vue du JS compilé de chaque route
- Console qui reprend les console.log
- Aperçu agrandi
Moteur et mesures
- Transpilation au choix : Babel ou tsc-rs en WebAssembly
- Loaders, routes dynamiques, routes API et îlots hydratés
- Barre de taille du document, épinglable pour comparer deux versions
- Estimation de ce qui serait envoyé en production
- Messages d’erreur situés dans le fichier, avec une piste de correction
Partage et intégration
- Lien de partage copié en un clic
- Téléchargement du projet en archive .zip
- Projet en cours conservé dans le navigateur
- Mode intégré, sans en-tête, pour les exemples de demo.bext.dev
- Interface en français et en anglais
- Onglets Code et Aperçu sur téléphone
Technologies utilisées
- Page : PRISM, le framework de bext
- Éditeur : CodeMirror
- Transpilation : Babel, ou tsc-rs, le compilateur de bext, compilé en WebAssembly
- Réactivité : îlots « use client » et runtime de signaux de bext
Pour un projet du même type
Le site a pu évoluer depuis notre intervention.
