Vue lecture

Éditer des documents Word en local dans votre navigateur

Si vous avez déjà essayé d'intégrer une fonction d'édition de documents Word dans une application web, vous savez que c'est souvent la croix et la bannière. En fait, pour obtenir un truc correct, on finit souvent par s'appuyer sur des solutions lourdes côté serveur ou des APIs propriétaires qui coûtent un bras. Mais ça, c'était avant que je tombe sur docx-js-editor.

Ce petit bijou open source est un éditeur WYSIWYG conçu spécifiquement pour l'écosystème React qui permet d'ouvrir, de modifier et d'enregistrer des fichiers .docx directement dans le navigateur. Le gros point fort revendiqué par le projet, c'est l'absence de dépendance serveur pour toute la partie édition. Tout le boulot se fait donc en local chez le client, ce qui est plutôt classe côté confidentialité des données puisque vos documents ne transitent pas par un backend obscur.

Techniquement, l'outil s'appuie sur un système qui semble proche de ProseMirror (il permet d'ailleurs d'y injecter des plugins ProseMirror). Perso, j'ai choisi de vous en parler parce que la gestion native du format DOCX est ici au cœur du moteur, et pas juste une couche d'export rajoutée à l'arrache. Le rendu est assez propre d'ailleurs et le projet vise une compatibilité maximale avec Microsoft Word.

On y retrouve l'essentiel évidemment : formatage de texte (gras, italique, polices, couleurs), gestion des tableaux, des images et des hyperliens. Bref, tout ce qu'il faut pour faire un vrai traitement de texte sans avoir à sortir l'artillerie lourde. (et c'est pas peu dire !)

Pour l'installer, c'est hyper fastoche : un petit npm install @eigenpal/docx-js-editor et hop, le dossier débarque dans votre node_modules/ et c'est réglé. D'ailleurs, l'architecture est extensible. Y'a même un plugin pour le surlignage syntaxique des tags docxtemplater, ce qui facilite grandement la vie si vous bossez sur des modèles de documents complexes. C'est très pratique pour les applis métier qui génèrent par exemple des factures ou des contrats à la volée !

Du coup, si vous cherchez une solution open source (licence MIT) pour manipuler des documents Word sans passer par une usine à gaz, allez jeter un œil à ce projet. C'est aussi un bon complément pour ceux qui utilisent déjà des scripts pour organiser leurs fichiers et qui ont besoin d'une interface d'édition rapide.

Ah et y'a une démo live qui tourne et le code est dispo sur GitHub .

Amusez-vous bien !

  •  

Web Flight Simulator - Pilotez un F-15 dans votre navigateur

Survoler la Terre entière depuis son navigateur web, sans RIEN installer, c'est possible et en plus c'est gratuit !

Web Flight Simulator c'est un simulateur de vol qui tourne directement dans votre browser, et qui vous colle aux commandes d'un F-15 au-dessus de la planète entière. Un vrai terrain 3D avec des données satellites, du relief, des textures... le tout grâce à CesiumJS pour la partie géospatiale et Three.js pour le rendu 3D. Du coup vous pouvez survoler n'importe quel coin du monde, que ce soit les Alpes, Manhattan ou le désert australien.

Le cockpit du F-15 avec HUD, minimap et terrain satellite en temps réel

Et contrairement à un Microsoft Flight Simulator où faut limite un brevet de pilote pour décoller, là c'est ARCADE à fond. Flèches directionnelles pour piloter, W/S pour les gaz, Espace pour l'afterburner... hop, vous êtes en l'air en 10 secondes. Pas de checklist de 45 items avant le décollage (oui oui, les vrais pilotes comprendront).

D'ailleurs le F-15 est équipé d'un canon Vulcan et de missiles Sidewinder. Y'a même des leurres thermiques si vous vous sentez d'humeur Top Gun. Les ennemis IA sont encore en développement, mais le système de combat est déjà fonctionnel. Perso, j'aime bien mitrailler dans le vide au-dessus de la Tour Eiffel, chacun ses hobbies...

Le HUD est pas mal foutu avec l'altitude, la vitesse, un compas et même une minimap satellite. Côté son, le moteur réagit aux gaz, y'a du vent aérodynamique et surtout l'alarme GPWS qui vous gueule "PULL UP" quand vous foncez dans une montagne.

Si vous êtes curieux de savoir comment ça marche sous le capot, c'est un mix assez malin de CesiumJS qui gère le streaming du terrain à l'échelle planétaire et de Three.js qui s'occupe de l'avion, des particules et des effets visuels. Le tout tourne avec Vite en dev, du JavaScript pur, et c'est open source avec une licence non commerciale. J'ai préféré tester sur Firefox plutôt que sur Chrome, parce que le WebGL y est mieux géré, et ça tourne nickel sur mon MacBook Air M2.

Attention quand même, sauf si vous avez une machine un peu costaud, ça peut ramer dans les zones urbaines denses. Sur un vieux laptop avec une carte graphique intégrée... ça plantera pas, mais ce sera plus un diaporama.

Pour ceux qui connaissent FlightGear qui est un des simulateurs de vol libres les plus connus, là on est sur un truc complètement différent. FlightGear c'est pour les passionnés qui veulent apprendre le vrai pilotage, alors que Web Flight Simulator c'est pour se marrer 5 minutes (ou 2 heures, je juge pas ^^). Et si vous voulez un peu de nostalgie, allez voir l'histoire des premiers Microsoft Flight Simulator de 1982 à 1989... on a fait du chemin depuis.

Une version Lune et Mars ce serait le pied. D'ailleurs CesiumJS propose déjà des datasets Moon Terrain et Mars depuis 2024-2025... donc affaire à suivre côté Web Flight Simulator.

Bref, allez tester , c'est gratuit et ça marche sur n'importe quel navigateur qui gère le WebGL.

  •  

UxNote - Annotez vos maquettes web sans prise de tête

Il y a quelques jours, un lecteur (merci Benjamin !) m'a envoyé un outil qu'il a bricolé lui-même avec Codex d'OpenAI et ça touche une petite corde sensible chez moi, d'où le fait que je vous en parle.

C'est pas souvent que je bosse avec des clients sur autre chose que des articles mais il m'est arrivé par le passé qu'un client m'envoie ses retours par mail, avec des captures d'écran floues, des flèches rouges partout et des commentaires du genre "le truc là, à gauche, je sais pas trop ??".

Alors de mon côté, j'ai testé pas mal de solutions pour évier ça mais j'ai rien trouvé de foufou... Figma par exemple c'est top pour les retours mais faut que le client crée un compte (et ça, c'est jamais gagné), Marker.io c'est bien fichu mais c'est payant. J'avais même essayé Loom à un moment, mais bon, leur demander d'enregistrer leur écran c'était trop compliqué.

Alors que UxNote, lui, règle exactement ce problème sans rien de tout ça !

En fait, ça permet d'intégrer une balise JavaScript dans votre page (juste avant le </body>) et hop, une petite toolbar apparaît.

<script src="https://github.com/ninefortyonestudio/uxnote/releases/download/v1.0.0/uxnote.min-v1.0.0.js"></script>

Votre client peut alors surligner du texte, épingler des éléments avec des badges numérotés, ajouter des commentaires... et surtout, exporter tout ça proprement en JSON ou l'envoyer direct par mail.

Comme ça, fini le chaos habituel des retours clients façon "j'ai annoté le PDF que j'ai imprimé puis scanné". Là, les commentaires sont directement contextualisés sur la page, exactement là où ils doivent être. C'est vrai que des outils d'annotation web existent depuis des lustres, mais UxNote a choisi le stockage 100% local (via le localStorage) plutôt que de monter un backend avec des comptes utilisateurs. Et c'est ce qui fait toute la différence niveau simplicité, avec les autres outils.

Par contre attention, si votre client vide son cache navigateur, il perd ses annotations... Perso je vous recommande donc de faire l'export JSON dès que possible pour éviter les mauvaises surprises.

L'outil propose aussi un mode "assombrissement" qui met en évidence la zone annotée (pratique pour se concentrer), des couleurs personnalisables, et même la possibilité de bloquer certains éléments de l'annotation avec l'attribut data-uxnote-ignore. Ça fonctionne sur les environnements de staging, en local, et même sur les SPA ... sauf si vous avez une CSP ultra stricte, auquel cas faudra autoriser le script et les styles inline dans votre config.

Bref, si vous bossez avec des clients qui ont du mal à exprimer leurs retours autrement qu'en pièces jointes de 15 Mo, UxNote pourrait bien sauver les quelques cheveux qu'il vous reste. Et en plus c'est gratuit, open source et disponible sur GitHub .

Que demande le peuple ???

Merci Benjamin !

  •  
❌