awesome-repositories.com
Blog
awesome-repositories.com

Descubre los mejores repositorios open-source con nuestra búsqueda potenciada por IA.

ExplorarBúsquedas curadasAlternativas open-sourceSoftware autohospedableBlogMapa del sitio
ProyectoAcerca deCómo clasificamosPrensaServidor MCP
Aviso legalPrivacidadTérminos
© 2026 Bringes Technology SRL·VAT RO45896025·hello@awesome-repositories.com
·

19 repositorios

Awesome GitHub RepositoriesInline Styles

Support for applying CSS styles directly to elements.

Distinguishing note: Focuses on object-based style application.

Explore 19 awesome GitHub repositories matching user interface & experience · Inline Styles. Refine with filters or upvote what's useful.

Awesome Inline Styles GitHub Repositories

Encuentra los mejores repositorios con IA.Buscaremos los repositorios que mejor coincidan usando IA.
  • solidjs/solidAvatar de solidjs

    solidjs/solid

    35,621Ver en GitHub↗

    Solid is a declarative JavaScript framework for building user interfaces through fine-grained reactivity. By utilizing a compile-time template transformation process, it converts JSX into direct DOM manipulation instructions, eliminating the need for a virtual tree. This architecture allows the framework to track dependencies at the individual element level, ensuring that state changes trigger surgical updates to the interface. The framework distinguishes itself through its isomorphic rendering pipeline, which shares reactive logic across server and client environments to support both initial

    Applies inline CSS styles using strings or objects.

    TypeScriptdeclarativefine-grainedjavascript
    Ver en GitHub↗35,621
  • greensock/gsapAvatar de greensock

    greensock/GSAP

    23,877Ver en GitHub↗

    GSAP is a comprehensive JavaScript animation library designed for orchestrating complex motion sequences and interactive user interfaces. It provides a robust property-interpolation engine that calculates intermediate values for CSS styles, attributes, and numeric properties, enabling smooth visual transitions across web elements. The framework is built on a core architecture that manages animation lifecycles, timeline-based sequence orchestration, and virtual property interception to ensure precise control over motion. The library distinguishes itself through a modular, plugin-based extensib

    Cleans up inline CSS styles upon animation completion to restore control to external stylesheets.

    JavaScriptanimationgsapjavascript
    Ver en GitHub↗23,877
  • lit/litAvatar de lit

    lit/lit

    21,679Ver en GitHub↗

    Lit is a library for building lightweight, interoperable web components. It provides a base class that leverages native browser APIs to encapsulate state, logic, and styles, allowing developers to create custom elements that function consistently across any modern web project. The framework distinguishes itself through a reactive property system that automatically triggers efficient, batched DOM updates. By utilizing tagged template literals, it defines declarative UI structures that are compiled into optimized update instructions. Its architecture emphasizes modularity through a reactive con

    Applies inline CSS styles to elements using object-based property mappings.

    TypeScripthtml-templateslitlit-element
    Ver en GitHub↗21,679
  • markdoc/markdocAvatar de markdoc

    markdoc/markdoc

    8,060Ver en GitHub↗

    Markdoc is a documentation content framework that extends standard Markdown with custom tags, typed schemas, and reusable components, parsing content into an abstract syntax tree and rendering it as React elements or HTML. It provides a structured authoring system where documents are processed through an AST-based pipeline, enabling validation, transformation, and flexible output generation. The framework distinguishes itself through a schema-driven validation pipeline that checks document structure and attribute values against defined rules, and a pluggable renderer architecture that accepts

    Defines new tags that render as inline elements, automatically wrapped in paragraph nodes.

    TypeScriptauthoringdocumentationmarkdoc
    Ver en GitHub↗8,060
  • midudev/preguntas-entrevista-reactAvatar de midudev

    midudev/preguntas-entrevista-react

    7,785Ver en GitHub↗

    This project is a technical study resource and interview preparation guide focused on the React library. It provides a comprehensive frontend interview question bank and concept references designed to help developers master core library primitives and prepare for professional job interviews. The resource covers detailed explanations of React's technical architecture, including state management patterns, performance optimization strategies, and component design. It serves as a knowledge assessment tool for developers to test their understanding of modern frontend engineering through a structur

    Explains object-based style application to dynamically change element appearance.

    JavaScripthacktoberfestjavascriptreact
    Ver en GitHub↗7,785
  • formidablelabs/radiumAvatar de FormidableLabs

    FormidableLabs/radium

    7,346Ver en GitHub↗

    Radium is a CSS-in-JS styling library that transforms static inline styles into dynamic, responsive, and animated CSS for React components. It functions as a component style toolchain and React inline style enhancer, allowing developers to define styles using plain JavaScript objects while gaining capabilities like browser state handling, vendor prefixing, and style composition. The library extends React's inline style system by automatically resolving browser state styles for hover, focus, and active interactions without manual event handlers. It supports inline media queries that evaluate a

    Extends React's inline style system with browser state handling, vendor prefixing, and style merging.

    JavaScript
    Ver en GitHub↗7,346
  • guodongxiaren/readmeAvatar de guodongxiaren

    guodongxiaren/README

    7,050Ver en GitHub↗

    This is a reference guide for GitHub Flavored Markdown syntax, focused on formatting README files and other repository documentation. It covers the full range of Markdown elements supported on GitHub, including tables with column alignment, images, hyperlinks, emoji shortcodes, inline code, and badges from external services. The guide explains how to create structured content such as alert blocks with NOTE, TIP, WARNING, and CAUTION labels, as well as diff blocks that highlight added and removed lines. It also covers centering content on the page and using reference-style links for reusable l

    Explains how to wrap inline code, file paths, or short commands in backticks to distinguish code from prose.

    flavoredgfmgithub
    Ver en GitHub↗7,050
  • imsky/holderAvatar de imsky

    imsky/holder

    5,800Ver en GitHub↗

    :city_sunrise: Client-side image placeholders.

    Configures placeholder appearance via JavaScript object parameters for colors, text, and alignment.

    JavaScripthacktoberfest
    Ver en GitHub↗5,800
  • pbek/qownnotesAvatar de pbek

    pbek/QOwnNotes

    5,792Ver en GitHub↗

    QOwnNotes is a desktop note editor that stores each note as a plain-text Markdown file on the local filesystem, avoiding proprietary formats and enabling direct file access. It functions as a Nextcloud Notes client, syncing notes and metadata with Nextcloud or ownCloud servers through a companion API service for versioning and sharing. The application also integrates with AI providers and exposes a local MCP server for external agents to search and fetch notes, and includes a companion browser extension for capturing web content, bookmarks, and screenshots. The editor distinguishes itself thr

    Provides Markdown code snippet rendering with backticks and fenced blocks for readability.

    C++
    Ver en GitHub↗5,792
  • code-hike/codehikeAvatar de code-hike

    code-hike/codehike

    5,365Ver en GitHub↗

    Codehike es un framework de documentación basado en React y una herramienta interactiva para recorridos de código. Funciona como un orquestador de contenido markdown que transforma markdown decorado en datos estructurados y componentes de React, sirviendo como capa de visualización para resaltar rangos de código, diffs y errores de compilación. El proyecto destaca por su capacidad para crear experiencias de "scrollycoding" y tutoriales técnicos paso a paso. Cuenta con animaciones a nivel de token que demuestran visualmente cómo evoluciona la lógica entre versiones de código y proporciona un sistema para sincronizar el estado de la UI con la posición del scroll del navegador. El framework cubre una amplia gama de capacidades de visualización, incluyendo la creación de presentaciones de código, diseños de spotlight y bloques de código con pestañas. Admite anotaciones detalladas mediante tooltips, callouts y notas al pie, así como utilidades funcionales como selectores de lenguaje, transpilación de código e integración de datos de compiladores en tiempo real. El sistema utiliza validación basada en esquemas para garantizar la seguridad de tipos y la consistencia de los datos estructurados extraídos de archivos markdown.

    Assigns CSS classes to specific lines or inline fragments of code to modify visual appearance.

    TypeScriptblogcodedocs
    Ver en GitHub↗5,365
  • tchapi/markdown-cheatsheetAvatar de tchapi

    tchapi/markdown-cheatsheet

    5,270Ver en GitHub↗

    This project is a markdown syntax cheatsheet and reference guide designed for writing documents with a focus on GitHub Flavored Markdown. It serves as a formatting reference and documentation template for creating technical content and project landing pages. The guide provides a comprehensive collection of examples for GitHub specific extensions, including task lists and callout alerts. It functions as a visual directory for implementing structured layout elements such as tables, mathematical equations, and code blocks. The reference covers broad capability areas including content and media

    Provides examples of rendering inline code spans and fenced code blocks.

    markdownmarkdown-cheatsheet
    Ver en GitHub↗5,270
  • webpack/mini-css-extract-pluginAvatar de webpack

    webpack/mini-css-extract-plugin

    4,663Ver en GitHub↗

    Esta es una extensión de Webpack utilizada para extraer CSS de archivos JavaScript en hojas de estilo independientes para compilaciones de producción. Funciona como un empaquetador de CSS y optimizador de activos que separa los estilos de los paquetes de scripts para permitir la carga paralela y prevenir destellos de contenido sin estilo (FOUC). El proyecto proporciona utilidades para generar exportaciones de módulos de JavaScript que mapean definiciones de estilo locales a componentes de la aplicación. También implementa la gestión dinámica de temas cargando condicionalmente diferentes variantes de CSS a través de consultas de recursos y admite el almacenamiento en caché del navegador a largo plazo mediante el uso de nombres de archivo con hash de contenido. Las áreas de capacidad cubren la optimización del rendimiento frontend mediante la obtención asíncrona de estilos bajo demanda y optimizaciones de renderizado del lado del servidor, incluyendo la inserción de estilos en línea y la prevención de etiquetas duplicadas. La herramienta también admite un flujo de trabajo de desarrollo con recarga de módulos en caliente para actualizaciones de estilo instantáneas. El plugin se integra en la tubería de construcción de Webpack y proporciona opciones de configuración para patrones de nombres de archivo de salida y hooks de ciclo de vida para personalizar la generación de etiquetas de enlace de estilo.

    Emits style definitions directly into the initial HTML response to prevent flashes of unstyled content.

    JavaScriptwebpack-plugin
    Ver en GitHub↗4,663
  • react-syntax-highlighter/react-syntax-highlighterAvatar de react-syntax-highlighter

    react-syntax-highlighter/react-syntax-highlighter

    4,638Ver en GitHub↗

    react-syntax-highlighter is a React component that renders source code with language-specific syntax coloring. It wraps the Prism and Highlight.js syntax highlighting libraries, tokenizing source code using their language grammars and mapping each token to a styled React element. The component operates in two styling modes: inline style objects applied directly to each token, or CSS class names that can be themed via external stylesheets. This dual-mode approach makes the highlighter portable across environments where CSS class injection may or may not be available. The component is built aro

    Provides inline style application for syntax-highlighted code tokens.

    JavaScript
    Ver en GitHub↗4,638
  • yomguithereal/react-blessedAvatar de Yomguithereal

    Yomguithereal/react-blessed

    4,496Ver en GitHub↗

    react-blessed is a React renderer for the blessed library that enables the construction of interactive command-line interfaces using a component-based architecture. It functions as a terminal user interface framework that maps a virtual component tree to a terminal environment, allowing React's declarative state management to control blessed terminal widgets and layout nodes. The system supports the integration of custom renderers through a dedicated creation function to change how nodes are instantiated. It provides a mechanism to retrieve original terminal library objects through references

    Transforms JavaScript style objects and arrays into terminal formatting rules during the render cycle.

    JavaScriptblessedclireact
    Ver en GitHub↗4,496
  • vercel/streamdownAvatar de vercel

    vercel/streamdown

    4,420Ver en GitHub↗

    Streamdown is a streaming markdown renderer for React that transforms incoming markdown text into sanitized HTML in real time, handling incomplete blocks as they arrive. It parses GitHub-Flavored Markdown syntax including tables, task lists, and footnotes, and renders LaTeX math expressions using KaTeX, Mermaid diagrams as interactive SVGs, and code blocks with Shiki-based syntax highlighting supporting over 200 languages with dual light and dark themes. The renderer includes an XSS-safe HTML sanitizer that strips dangerous tags and validates URLs to prevent injection attacks. What distinguis

    Applies monospace font, background color, and rounded corners to backtick-delimited inline code spans.

    TypeScriptaimarkdownstreaming
    Ver en GitHub↗4,420
  • waylan/python-markdownAvatar de waylan

    waylan/Python-Markdown

    4,215Ver en GitHub↗

    Python-Markdown es una librería que convierte texto Markdown en documentos HTML o XHTML. Funciona como un procesador de texto Unicode, soportando todos los idiomas basados en Unicode y texto bidireccional para asegurar la compatibilidad global. El proyecto es un procesador de markdown extensible que permite a los desarrolladores añadir sintaxis y reglas de formato personalizadas a través de una arquitectura de plugins. Este sistema permite el registro de nuevas reglas de análisis, la modificación del comportamiento del analizador y la implementación de sintaxis de documento personalizada como tablas y notas al pie sin alterar el código fuente principal. La herramienta proporciona una variedad de capacidades de renderizado, incluyendo soporte para sintaxis compleja, elementos de formato avanzados y renderizado de listas estandarizado. Admite tanto el procesamiento programático de contenido dentro de aplicaciones de software como la conversión basada en archivos a través de una interfaz de línea de comandos. El proceso de conversión de la librería incluye capacidades para el pre-procesamiento de texto fuente, transformación de árbol de documentos y post-procesamiento de salida.

    Maps specific text patterns to custom element tree nodes to implement specialized inline formatting styles.

    Python
    Ver en GitHub↗4,215
  • python-markdown/markdownAvatar de Python-Markdown

    Python-Markdown/markdown

    4,215Ver en GitHub↗

    This project is a Python library and command-line tool designed to convert Markdown text and files into structured HTML fragments. It functions as a Markdown-to-HTML converter and parser that transforms piped text or source files into web-ready documents. The project is an extensible text processor featuring a pluggable API for defining custom inline and block syntax. This modular framework allows for the registration of specialized syntax extensions, such as tables and footnotes, and provides a system for managing runtime configuration settings. The conversion process covers multilingual te

    Ships a mechanism to replace matched text patterns with new element tree nodes for customized inline formatting.

    Python
    Ver en GitHub↗4,215
  • angular/universalAvatar de angular

    angular/universal

    4,001Ver en GitHub↗

    Angular Universal es un framework de renderizado del lado del servidor (SSR) y generador de sitios estáticos para aplicaciones Angular. Proporciona los motores y herramientas necesarios para generar HTML en un servidor o durante el proceso de compilación para mejorar el rendimiento de carga inicial y la optimización para motores de búsqueda (SEO). El proyecto permite tanto el renderizado dinámico del lado del servidor para la generación de HTML bajo demanda, como el prerrenderizado en tiempo de compilación para crear archivos estáticos para rutas predefinidas. Cuenta con un motor de hidratación que transfiere el estado del lado del servidor y las respuestas HTTP cacheadas al cliente, evitando que el navegador duplique solicitudes de red durante el inicio de la aplicación. El framework cubre optimizaciones de entrega web más amplias, incluyendo la ejecución de código isomórfico y la inyección de estilos en línea para cumplir con las políticas de seguridad de contenido (CSP). Estas capacidades aseguran que la misma lógica se ejecute en el servidor y en el navegador mientras se mantiene un estado de aplicación consistente y estabilidad visual.

    Injects CSS definitions directly into the initial HTML response to prevent flashes of unstyled content.

    TypeScript
    Ver en GitHub↗4,001
  • midudev/jscampAvatar de midudev

    midudev/jscamp

    3,811Ver en GitHub↗

    jscamp is a full-stack web development and education project focused on mastering JavaScript, TypeScript, and AI integration. It provides a structured curriculum and interactive exercises covering language fundamentals, frontend engineering, and backend API development. The project distinguishes itself through the implementation of autonomous AI agents capable of complex task automation, such as modifying files, managing servers, and executing API calls. It includes advanced AI development tools for conversational querying, real-time code suggestions, and automated repository analysis to gene

    Allows applying CSS styles directly to elements using JavaScript objects to achieve state-driven visual changes.

    JavaScriptbootcamp
    Ver en GitHub↗3,811
  1. Home
  2. User Interface & Experience
  3. Inline Styles

Explorar subetiquetas

  • Code Inline Styling1 sub-etiquetaApplying inline styles specifically for syntax highlighting of code tokens. **Distinct from Inline Styles:** Distinct from Inline Styles: focuses on applying inline styles for code syntax highlighting, not general element styling.
  • Media Query SupportIncluding @media query rules directly inside style objects and resolving them based on the current viewport. **Distinct from Inline Styles:** Distinct from Inline Styles: focuses on embedding media queries inside style objects rather than general inline style application.
  • Merging EnginesSystems that combine multiple style objects into a single inline style by merging them in order. **Distinct from Inline Styles:** Distinct from Inline Styles: focuses on the merging/composition mechanism rather than the general concept of applying inline styles.
  • Object-Based Style ConfiguratorsSets background and foreground colors, text properties, and alignment via JavaScript object parameters. **Distinct from Inline Styles:** Distinct from Inline Styles: focuses on configuring styles via JavaScript objects for placeholder generation, not general CSS inline style application.
  • React EnhancersExtensions for React that add browser state handling, vendor prefixing, and style merging to inline style objects. **Distinct from Inline Styles:** Distinct from Inline Styles: focuses on enhancing React's inline style system with additional capabilities rather than general inline style application.
  • Server-Side Style InliningInjecting CSS definitions directly into the initial HTML response to prevent flashes of unstyled content. **Distinct from Inline Styles:** Focuses on server-side injection for performance (FOUC prevention), not client-side element styling.