3 dépôts
Specialized tabbed interfaces for displaying multiple code snippets with syntax highlighting.
Distinct from Tabbed Interfaces: Distinct from Tabbed Interfaces: specifically designed to wrap and switch between multiple code snippets.
Explore 3 awesome GitHub repositories matching user interface & experience · Tabbed Code Blocks. Refine with filters or upvote what's useful.
Spectacle is a React-based presentation framework that enables developers to author slide decks using JSX and MDX syntax. It provides a component-driven approach to building presentations, where slides are composed as React components with declarative layouts, theme-driven styling, and step-based animation sequencing. The framework distinguishes itself through its support for live coding demonstrations within slides, allowing presenters to execute and display code directly during a talk. It includes a presenter mode with dual-view architecture that shows speaker notes, a timer, and upcoming s
Places a single code pane on a slide with an optional title and language specification.
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.
Groups multiple related code blocks into a tabbed interface for easy switching.
Yoopta-Editor is a headless framework for building customizable block-based rich text editors. It utilizes a JSON-based document engine to manage editor state and provides a WYSIWYG interface for creating structured documents. The system separates core document logic from the visual layer, allowing for complete customization of the user interface. The framework is designed for real-time collaborative editing, featuring a synchronization engine with conflict resolution and remote cursor presence tracking. It offers a highly extensible plugin system that allows developers to define new content
Displays multiple code snippets within a single tabbed interface with language-specific highlighting.