bext Démo, Exemples exécutables
La galerie d’exemples du moteur bext et de son framework PRISM : pour chaque sujet, l’explication, le résultat en direct et le code source, en français et en anglais.
Montrer le moteur par l’exemple
bext est un moteur web à code source disponible, accompagné du framework PRISM. Pour en montrer les possibilités, une documentation ne suffit pas : il faut voir le code tourner. Le site demo.bext.dev réunit des exemples exécutables, un par sujet, du compteur à signaux au streaming, de la mise en cache aux actions serveur.
Nous l’avons conçu et développé avec PRISM lui-même. Chaque page d’exemple associe une explication, le résultat en direct et le code source, et une partie des exemples s’ouvre dans l’éditeur bext play pour être modifiée sur place.
Le projet en bref
- Besoin
- Montrer ce que fait le moteur demande du code qui s’exécute, pas seulement de la documentation.
- Ce que nous avons livré
- Une page par exemple, avec l’explication, le résultat en direct, la source et la documentation liée, en français et en anglais, dont certains s’ouvrent dans l’éditeur bext Play.
- Résultat
- Une galerie publique d’exemples exécutables, classés par thème.
Des exemples qui s’exécutent
Nous développons bext, un moteur web à code source disponible, et son framework PRISM. Le site demo.bext.dev en rassemble les exemples : chacun a sa page, avec une courte explication, une astuce d’usage, le résultat en direct et le code source des fichiers qui le produisent.
Le résultat n’est pas une capture. Le compteur réagit au clic, le flux de données s’affiche au fil de l’envoi, le formulaire est traité par une action serveur. Le code affiché en dessous reprend les fichiers de l’exemple, avec la coloration syntaxique et un bouton pour le copier.
En bas de chaque page, des liens mènent aux pages de la documentation qui traitent du même sujet.
Faites glisser le schéma pour le voir en entier.
Les exemples rangés par thème
La barre latérale range les exemples par thème : conventions de fichiers, rendu PRISM, mise en cache, données, services du SDK, formulaires, modèles d’interface et authentification. L’accueil reprend le même classement, précédé de quelques exemples mis en avant.
Un champ de recherche filtre la liste au fil de la saisie, sur le titre des exemples. Les exemples encore inachevés portent la mention « en cours ».
Le site existe en français et en anglais. La version anglaise vit sous /en, avec les mêmes adresses, et un sélecteur permet de passer d’une langue à l’autre depuis n’importe quelle page.
Faites glisser le schéma pour le voir en entier.
Un exemple à modifier dans l’éditeur
Une partie des exemples est accompagnée d’un petit projet exécutable, présenté sous le titre « Essayez en direct ». Il s’ouvre dans bext play, notre éditeur en ligne, intégré à la page.
L’éditeur ne se charge qu’au clic sur « Lancer l’éditeur » : la page reste légère pour qui ne fait que lire. Une fois lancé, on modifie le code et l’aperçu se recompile à chaque frappe, dans le navigateur.
Le lien « Ouvrir dans play » reprend le même projet dans l’éditeur en plein écran.
Le site, page par page
25 pages capturées sur demo.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.
- Accueil et navigation 3 pages
- Rendu et interactivité 8 pages
- Cache et services 5 pages
- Formulaires et interface 6 pages
- Essayer en direct 3 pages
Accueil et navigation
La galerie d’exemples, en français et en anglais, et la recherche dans la barre latérale.
3 pages, 2 vues mobiles
Rendu et interactivité
Les exemples du framework PRISM : signaux, streaming, îlots et routage.
8 pages, 8 vues mobiles
Cache et services
La mise en cache des pages et des données, et les services du SDK.
5 pages, 5 vues mobiles
Formulaires et interface
Actions serveur, validation et modèles d’interface courants.
6 pages, 6 vues mobiles
Essayer en direct
L’éditeur bext play, ouvert dans la page d’un exemple.
3 pages, 1 vues mobiles
Ce que montre le site
Les fonctions du site d’exemples et les sujets couverts par les exemples.
Parcours des exemples
- Exemples rangés par thème dans la barre latérale et sur l’accueil
- Recherche d’un exemple au fil de la saisie
- Sélection d’exemples mis en avant sur l’accueil
- Mention « en cours » sur les exemples inachevés
- Site en français et en anglais, avec une adresse par langue
- Liens vers la documentation, les composants bext/ui et bext.dev
Page d’exemple
- Explication de ce que montre l’exemple
- Astuce d’usage mise en évidence
- Résultat en direct, rendu par le moteur
- Code source des fichiers utiles, coloré et à copier
- Liens vers les pages de documentation associées
Rendu et interactivité
- Îlots interactifs à signaux
- Streaming et frontières Suspense
- Îlots serveur et reprise sans réexécution
- Routes dynamiques, route API et routage par langue
- Conventions de fichiers : loading, error, not-found, template
- Rendu Markdown côté serveur
Cache et services
- Cache de page ISR et fragments mis en cache
- Invalidation par étiquette et GET conditionnel
- Cache de données réactif Bext Query
- Workflow en plusieurs étapes
- E-mails rendus en HTML et en texte
Formulaires et interface
- Formulaire relié à une action serveur
- Validation avec les erreurs de chaque champ
- Pagination par l’adresse de la page
- Recherche avec anti-rebond
- Interface optimiste
- Image de partage générée à la demande
Essayer en direct
- Projet exécutable joint à une partie des exemples
- Éditeur bext play chargé seulement au clic
- Code modifiable, aperçu recompilé à chaque frappe
- Ouverture du même projet dans bext play en plein écran
Technologies utilisées
TypeScript- Framework : PRISM, le framework de bext, en TypeScript
- Rendu : côté serveur, avec îlots interactifs à signaux
- Code affiché : coloration syntaxique des fichiers d’exemple
- Essai : éditeur bext play intégré à la page
Pour un projet du même type
Le site a pu évoluer depuis notre intervention.
