Awesome GitHub RepositoriesInteractive Documentation Frameworks

Codehike est un framework de documentation basé sur React et un outil de walkthrough de code interactif. Il fonctionne comme un orchestrateur de contenu markdown qui transforme le markdown décoré en données structurées et en composants React, servant de couche de visualisation pour mettre en évidence des plages de code, des diffs et des erreurs de compilation. Le projet se distingue par sa capacité à créer des expériences de "scrollycoding" et des tutoriels techniques étape par étape. Il propose des animations au niveau des tokens qui démontrent visuellement l'évolution de la logique entre les versions de code et fournit un système pour synchroniser l'état de l'UI avec la position de défilement du navigateur. Le framework couvre un large éventail de capacités de visualisation, incluant la création de diaporamas de code, des mises en page en surbrillance et des blocs de code à onglets. Il supporte l'annotation détaillée via des tooltips, des callouts et des notes de bas de page, ainsi que des utilitaires fonctionnels comme des sélecteurs de langage, la transpilation de code et l'intégration de données de compilation en temps réel. Le système utilise une validation basée sur des schémas pour garantir la sécurité des types et la cohérence des données extraites des fichiers markdown.

react-live est une suite d'outils pour la transpilation React dans le navigateur, l'édition en direct et la documentation interactive. Elle fournit un composant React pour construire des terrains de jeu (playgrounds) en direct où le code source est transpilé et rendu en temps réel, accompagné d'un éditeur de code en direct qui offre une coloration syntaxique et un retour visuel immédiat. Le projet permet la création de documentation vivante en intégrant des exemples de code React modifiables aux côtés de leur sortie rendue. Il prend en charge l'exécution de balisage modifiable ou de composants fonctionnels, permettant aux utilisateurs de modifier le code et d'observer le comportement résultant instantanément. Le système inclut des capacités pour le rendu de composants dynamiques, la transpilation de code en temps réel et l'injection de dépendances globale. Il dispose également de mécanismes de gestion des erreurs pour détecter et afficher les erreurs de compilation, de syntaxe et d'exécution sans faire planter l'application.