12 مستودعات
User interface components designed for code editors and developer dashboards.
Distinguishing note: Focuses on UI components specifically for developer-facing tools.
Explore 12 awesome GitHub repositories matching user interface & experience · Developer Tooling UI Components. Refine with filters or upvote what's useful.
This project is a cross-platform UI toolkit and universal UI framework providing a collection of pre-styled interface components for building mobile and web applications. It functions as a mobile design system and themed component library, allowing developers to maintain a cohesive visual language across different screens and devices using a shared codebase. The toolkit centers on a themed component architecture that supports global and component-level style configurations. This enables the definition of colors and property defaults in a central location to ensure consistent branding and a un
Provides shorthand component snippets and recipes to accelerate the assembly of user interfaces in editors.
Highlight.js is a syntax highlighting library that automatically detects and applies color-coded styling to source code blocks within web pages. It functions as a language-agnostic formatting engine, utilizing a modular processor that applies consistent visual themes to diverse programming languages based on their specific grammatical rules. By decoupling the core parsing logic from language-specific definitions, the library provides a unified execution environment that operates without requiring internal knowledge of the target language. The project is distinguished by its modular architectu
Provides visual feedback components for code editors and internal dashboards.
Devicon is a comprehensive library of scalable vector graphics representing programming languages, frameworks, and development tools. It provides a standardized set of visual assets designed to help users identify software stacks and technical technologies within web interfaces and documentation. The collection supports multiple integration methods, including direct vector rendering and font-based mapping, allowing icons to be embedded as text elements or standalone graphics. By utilizing semantic class-based styling and declarative markup, the library enables consistent visual branding acros
Provides standardized iconography for use in developer dashboards and tooling interfaces.
Vditor is a browser-based Markdown editor and rendering engine that supports multiple editing interfaces, including a visual rich-text experience, instant rendering, and a traditional side-by-side split-view preview. It serves as an authoring tool for technical documentation and a component for web-based editor integration. The project is distinguished by its support for complex technical content, utilizing specialized rendering for mathematical formulas, flowcharts, sequence diagrams, and mind maps. It also functions as a collaborative document review tool, enabling users to attach anchored
Enables the programmatic insertion of predefined markdown snippets and strings at the current cursor position.
This repository contains a collection of code examples that demonstrate how to build extensions for Visual Studio Code using its extension API. The samples cover the core patterns for extending the editor, including implementing code actions, completions, snippets, and semantic token highlighting. The examples show how to integrate a language server to provide diagnostics, completions, and hover information, as well as how to register a source control provider with file status and commit operations. Custom task types that run shell commands or scripts are also demonstrated, along with virtual
Inserts predefined code templates triggered by a prefix in the editor.
Quarto is an open-source scientific and technical publishing system built on Pandoc that converts Markdown and Jupyter notebooks into a wide range of output formats. It functions as a multi-format document converter, a reproducible research platform, a static site generator for technical content, and an interactive dashboard builder, all within a single framework. The system is distinguished by its ability to produce HTML, PDF, Word, ePub, and slide decks from a single Markdown source, while embedding executable code blocks in Python, R, Julia, or Observable for dynamic, reproducible document
Inserts pre-built templates for common patterns like code blocks, callouts, and divs into the document.
gluestack-ui is a cross-platform React component library built with Tailwind CSS. It provides over 30 pre-built, accessible components that can be installed by copying their source files directly into a project, giving developers full control over customization without external runtime dependencies. Every component implements WAI-ARIA patterns, keyboard navigation, and screen reader support out of the box. A key differentiator is the copy-paste architecture: rather than a traditional package dependency, component source code is placed in the project, allowing direct editing and eliminating ve
Provides a CLI and VS Code snippets for inserting pre-built component code into projects.
Playroom هي أداة لنظام تصميم الواجهات الأمامية (frontend design system) وبيئة تجريبية لمكونات JSX. تعمل كمنصة عمل لمكونات واجهة المستخدم وأداة للنماذج الأولية تدعم TypeScript، مما يسمح للمطورين بتصميم واجهات المستخدم واختبارها في بيئة حية وتفاعلية. يتيح المشروع الاختبار البصري من خلال عرض نفس المكون عبر سمات (themes) وأحجام شاشات وإعدادات خصائص متعددة في وقت واحد. كما يوفر آلية لأدلة الأنماط التفاعلية وتوثيق نظام التصميم، حيث يمكن بناء نماذج أولية للمكونات باستخدام مكتبة موجودة وتصديرها كبيئة تجريبية قابلة للتوزيع. تتضمن منصة العمل إمكانيات لتبديل الحالة، وإدارة أبعاد الإطار، وتحليل الأنواع الساكنة (static type parsing) للإكمال التلقائي للخصائص (props). كما تتميز بأدوات لتنظيم مقتطفات الكود، وحقن المتغيرات العامة، وتغليف المكونات في أشجار مزود (provider trees) مخصصة للحفاظ على الحالة العامة المطلوبة. يتم توفير واجهة سطر أوامر (CLI) لتنسيق خادم التطوير المحلي وتجميع بيئة التجربة في تنسيق قابل للتوزيع.
Enables the insertion of predefined code fragments to accelerate the construction of UI components.
This project is a multi-purpose toolkit consisting of an AI agent knowledge base, a developer tool UI kit, a markdown presentation framework, a technical diagram renderer, and a TypeScript library bundler. It provides the infrastructure to curate documented guidelines into structured collections for automated AI outputs while offering tools for creating technical content and distributing software libraries. The markdown presentation framework allows for the creation of interactive slide decks featuring synchronized code blocks, motion transitions, and the rendering of mathematical formulas an
Ships a set of UI components and design tokens specifically optimized for developer tool interfaces.
diff2html is a Git diff visualization library that transforms unified diff text into structured HTML. It serves as a renderer for visualizing code changes in web browsers, providing components to inject stylized diff visualizations and collapsible file lists directly into web page elements. The library enables both side-by-side and line-by-line code comparisons. It includes a syntax highlighting diff viewer that applies language-specific color coding to source code based on file extensions or manual mappings. To maintain alignment during reviews, the project implements synchronized scrolling
Provides UI components specifically designed for developer-facing version control and diff tooling.
This is a VS Code extension that provides a suite of tools for editing, previewing, and managing Markdown documents. It integrates an authoring toolset, a link management system, and a rendering engine to support the creation of structured technical documentation and knowledge bases. The project distinguishes itself through advanced reference handling and accessibility features, such as a system that automatically updates internal links when files or headers are renamed and an artificial intelligence tool for generating descriptive image alt text. It also supports the rendering of Mermaid dia
Inserts pre-defined templates for common Markdown elements like code blocks and images to accelerate writing.
يوفر إطار العمل هذا مكتبة شاملة من مكونات واجهة المستخدم القابلة لإعادة الاستخدام والتي يمكن الوصول إليها لتطبيقات الويب المعروضة من جانب الخادم. يتيح للمطورين بناء واجهات تفاعلية عن طريق مزامنة الحالة بين الخادم والمتصفح، مما يضمن بقاء الترميز والبيانات متسقة دون الحاجة إلى منطق معقد من جانب العميل. يتميز المشروع بالتكامل العميق مع الذكاء الاصطناعي، حيث يقدم أدوات تعرض مخططات المكونات وتعريفات الواجهة لمساعدي البرمجة. يتيح ذلك الاكتشاف والتنفيذ المؤتمت لعناصر واجهة المستخدم، بينما تسرع أدوات سطر الأوامر المدمجة التطوير بشكل أكبر من خلال أتمتة تكوين المشروع وتوفير مقتطفات كود جاهزة لهياكل الواجهة الشائعة. بعيداً عن مكتبته الأساسية، يتضمن إطار العمل دعماً واسعاً لمعالجة النماذج، بما في ذلك التحقق المترجم وعناصر التحكم في الإدخال التي يمكن الوصول إليها. كما يوفر آليات تصميم قوية تحل تعارضات فئات الأداة في وقت التشغيل، إلى جانب مكونات متخصصة لإدارة جداول البيانات، وقوائم التنقل، والتراكبات التفاعلية. تم دمج الأمان والامتثال مباشرة في دورة حياة المكون، ويتميز بفحوصات إمكانية الوصول المؤتمتة، وتقييد المعدل لمسارات المصادقة، وأدوات لإدارة خصوصية بيانات المستخدم. تم تصميم إطار العمل ليتم تثبيته وتكوينه داخل بيئات جانب الخادم الحالية لدعم تطوير واجهة سريع ومتسق.
Provides editor snippets to insert pre-configured interface building blocks into the codebase.