Onlook is a browser-based visual editor for building and modifying Next.js + Tailwind CSS websites. It provides a Figma-like canvas where users can directly manipulate React components, with changes written back to source code via AST-based transformation. The application integrates an AI chat assistant that can generate code, edit files, and run terminal commands through a set of well-defined tools (e.g., search-replace, file edit, bash). The monorepo architecture separates concerns into packages for AI agents, code parsing, font management, UI components, database access (Drizzle + Supabase), git operations, and sandbox management (CodeSandbox). It also includes a complete billing system (Stripe), GitHub integration for project import, custom domain management, and a publish/deployment pipeline. The codebase demonstrates strong engineering practices with type-safe tRPC APIs, MobX state management in the editor, extensive use of Radix UI primitives, and a consistent monorepo toolchain (Bun workspaces, ESLint, Prettier). While the editor engine is somewhat monolithic, individual packages like the AST parser, font helpers, and utility library are well-isolated and testable.
This repository implements the Salesforce Lightning Design System (SLDS) as a reusable React component library. It provides over 60 accessible UI components including buttons, modals, tooltips, data tables, and layout elements that follow SLDS guidelines. The library emphasizes accessibility with quarterly audits, includes comprehensive documentation via Storybook, and provides utilities for common React patterns like ARIA prop handling and DOM portal management. Components are designed to be composable and customizable while maintaining visual and behavioral consistency with the Salesforce design system.
JSON Server v1 (beta) is a CLI tool and library that spins up a fully functional REST API from a JSON or JSON5 file. It is built on top of lowdb for data persistence and @tinyhttp/app for HTTP handling. The architecture is a clean three-layer design: a CLI entry point (bin.ts) that wires file watching and server startup, an Express-like app layer (app.ts) that defines routes and parses query parameters, and a service layer (service.ts) that encapsulates all data access, filtering, pagination, and relationship embedding. The system supports advanced query capabilities including field operators (gt, lt, in, contains, etc.), JSON-based _where queries, sorting, pagination with navigation metadata, and resource embedding via _embed. It also handles referential integrity on deletes by nullifying foreign keys or cascading dependent deletions. The codebase demonstrates solid TypeScript craftsmanship with strict mode enabled, modern ESM modules, and a clear separation of concerns. Notable engineering patterns include the NormalizedAdapter wrapper that enforces string IDs and strips $schema on read while re-injecting it on write, and the Observer adapter that intercepts lowdb read/write lifecycle events to enable file-watch reloading without feedback loops. The query parsing layer cleanly separates URLSearchParams-based operator syntax from raw JSON _where objects, with proper type coercion for booleans, null, and numbers. The project is in active beta (v1.0.0-beta.15) with recent commits, CI via GitHub Actions, and a pre-commit hook running tests. It targets Node.js >=22.12 and leverages experimental TypeScript stripping for development. Dependencies are current and well-chosen (lowdb v7, @tinyhttp v3, eta v4). The test suite uses Node's built-in test runner and covers the service layer, query parsing, pagination, and full HTTP integration tests.
Buefy is a Vue 3 UI component library providing approximately 40+ Bulma-based components (buttons, inputs, tables, modals, datepickers, carousels, trees, etc.) that can be consumed individually or as a full bundle. It includes programmatic APIs for overlay components (dialog, toast, notification, snackbar, loading) and a global configuration system for icon packs, locale, and default behaviors. The library is published as the `buefy` npm package and is designed for tree-shaking via individual component registration. The architecture is a monorepo with two packages: `packages/buefy` (the library) and `packages/docs` (a Vite-based documentation site). Components are built using Vue 3 Options API with `defineComponent`, mixins for cross-cutting concerns (form validation, tabbed containers, notice behavior, compat fallthrough), and a consistent prop/event/slot pattern. SCSS styles are organized per component and leverage Bulma's CSS variable system for runtime theming. The library does not handle external data; it only manages UI state and provides a structured way to build Bulma-themed Vue 3 interfaces. Key entry points include `packages/buefy/src/index.ts` (main library export), `packages/buefy/src/utils/config.ts` (global configuration), and per-component index files that register each component as a Vue plugin. Data flows are limited to parent-child communication via provide/inject (e.g., Tabs, Steps, Table) and form element integration with a `BField` parent for validation. External dependencies include Vue 3 (>=3.4), Bulma CSS framework, and optional icon packs (Font Awesome, Material Design Icons). Build tooling uses Rollup, esbuild, Babel, and Vitest for testing.
Flowbite is a production-grade UI component library built on top of Tailwind CSS. It provides a comprehensive set of interactive, accessible components (modals, dropdowns, tooltips, carousels, datepickers, etc.) that are initialized via HTML data attributes and backed by a lightweight JavaScript runtime. The library is distributed as an npm package with multiple entry points (ESM, CJS, UMD, Turbo, Phoenix) and includes a Tailwind CSS plugin that injects base styles for forms, tooltips, charts, and third-party integrations. The repository also hosts an extensive Hugo-based documentation site with live examples, framework integration guides (React, Vue, Angular, Laravel, Django, etc.), and a theming system with five pre-built themes (default, minimal, enterprise, playful, mono). The architecture follows a consistent component pattern: each component is a class with `init()`, `destroy()`, and static `init*()` methods that scan the DOM for data attributes. A global `Instances` singleton manages all component instances by ID, supporting override and random ID generation. The library uses Popper.js for positioning dropdowns, tooltips, and popovers, and relies on an external `flowbite-datepicker` for datepicker functionality. The Tailwind plugin (`plugin.js`) uses `plugin.withOptions` to conditionally add base styles and component classes, and the CSS theming system leverages CSS custom properties for colors, fonts, radii, and shadows with dark mode support. While the library is well-structured and actively maintained, its large surface area (30+ components) and extensive documentation create maintenance overhead. The integration guides for 20+ frameworks are prone to drift, and the inline SVG icons and hardcoded Tailwind classes in documentation examples require careful version alignment. The codebase demonstrates solid engineering practices with TypeScript, Webpack builds, and consistent patterns, making it a reliable choice for projects needing a Tailwind CSS component library with JavaScript interactivity.
MCP-UI is a monorepo SDK implementing the MCP Apps standard for rendering interactive UIs over the Model Context Protocol. It provides server-side tools (in TypeScript, Python, and Ruby) to create UI resources, and a client-side React SDK to render them in sandboxed iframes. The architecture centers on a secure double-iframe proxy pattern that isolates third-party HTML and external URLs, with JSON-RPC communication via AppBridge. The codebase is well-structured with comprehensive tests, semantic release automation, and cloudflare workers example, demonstrating strong engineering practices across multiple languages.
San is a Baidu-developed, production-grade frontend component framework that enables building reactive UIs with a Vue/React-like model, but using custom template syntax and a standalone runtime. It provides a template parser (producing an ANode AST), a reactive data system (Data class, Proxy-based this.d), directives (s-if, s-for, s-bind, s-show, s-html, s-ref, s-transition), slots (named, scoped, dynamic), computed properties, filters, lifecycle hooks, two-way binding, and server-side rendering hydration. The library is monolithic but modularly organized, targeting browsers from IE8 upward with conditional compilation. It is actively maintained with frequent releases and extensive test coverage, but carries legacy complexity and a self-contained build toolchain (AMD module loading, custom feature blocks). The ecosystem includes companion libraries (san-router, san-store, san-cli) and TypeScript typings.
Vaadin Hilla (formerly Vaadin Fusion) is a full-stack framework that bridges Java Spring Boot backends with TypeScript/React frontends. Its core function is automatic, type-safe code generation: Java classes annotated with @Endpoint or @BrowserCallable are parsed into OpenAPI specifications, which are then used to generate TypeScript client stubs, form models (with validation constraints mapped from JSR-380 annotations), and reactive signal bindings. This eliminates the need for manual API contracts and provides end-to-end type safety between server and client. The framework also includes a file-based router, a CRUD layer (ListService, FormService) integrated with JPA repositories, and reactive full-stack signals for real-time data synchronization via WebSocket push. Architecturally, Hilla is a monorepo organized into Java backend packages (endpoint, engine-core, typescript-generator) and TypeScript frontend packages (generator-core, react-crud, react-form, file-router, react-signals). Build integration is provided through Maven and Gradle plugins that trigger code generation during the build lifecycle. The code generator follows a plugin-based pipeline where each plugin (backbone, model, signals, push, subtypes, transfertypes) processes the OpenAPI schema to produce specific TypeScript output. The frontend runtime includes a middleware-enhanced ConnectClient for HTTP calls, declarative authorization via @AnonymousAllowed/@RolesAllowed, and a full i18n system. Security is a first-class concern with CSRF protection, JWT support, and Spring Security integration demonstrated across multiple test applications. The system does not include data pipeline or research code; it is a production-ready application framework. Notable reusable artifacts include a clean validator pattern in lit-form, a generic CommandRunner interface for external process execution, tree-merging utilities in the file router, and the full-stack signal implementation that demonstrates a command-based reactive state pattern. The codebase is actively maintained with extensive integration tests, though some areas (snapshot tests, dual Lit/React support, Atmosphere push dependency) introduce maintenance complexity and potential drift risks.
Tether is a JavaScript library for positioning UI elements relative to other elements, ensuring they remain attached during scroll, resize, and other interactions. It solves common UI positioning challenges for tooltips, dropdowns, popovers, and similar components through a modular architecture. The core Tether class utilizes plugins for constraint handling, abutment detection, and position shifting, built upon an evented base class for custom event management. The library demonstrates strong engineering practices with clear separation of concerns, comprehensive unit and integration tests (Jest and Cypress), and support for both UMD and ESM module formats. While the positioning logic inherently addresses complex browser edge cases, the codebase is well-structured and maintainable, evidenced by recent commits and a defined release process. Examples and documentation showcase real-world usage patterns. Two reusable components stand out: the evented utility (src/js/evented.js) implements a lightweight event emitter with on, once, off, and trigger methods, demonstrating the observer pattern for decoupled communication. The deferred utility (src/js/utils/deferred.js) provides a promise-like mechanism for asynchronous control flow with resolve, reject, and promise methods. Both modules are minimally coupled, depending only on a type-check utility, and embody proven patterns suitable for extraction into other projects.
This is a mature, community-maintained Ember.js addon that provides native Ember components for Bootstrap 4 and 5. The addon replaces Bootstrap's JavaScript with Ember-centric implementations (Glimmer components, modifiers, helpers), allowing developers to use Bootstrap's CSS without jQuery or Bootstrap.js. The monorepo (pnpm workspaces) contains the addon itself, a test application, and a documentation app. The codebase is well-structured, with extensive integration tests and a comprehensive pattern library. Recent activity shows active migration to TypeScript, conversion to Glimmer components, and continued support for both Bootstrap versions. The addon is highly reusable within the Ember ecosystem, but its components are tightly coupled to the addon's internal architecture, limiting direct extraction without modification. Standalone utilities like the transition-end promise wrapper and the conditional-attribute modifier are more independently reusable.
Pure is a minimal, responsive CSS library that provides a set of small, modular styles for base HTML elements, grids, buttons, forms, menus, and tables. It builds on Normalize.css for cross-browser consistency and follows SMACSS conventions for easy customization. The repository contains the source CSS files, a Grunt-based build system that generates minified and prefixed bundles, and a Docusaurus documentation site. The library is production-ready, extremely lightweight (3.7KB gzipped), and designed to be a starting point for any web project without imposing a specific look.
Ruby2JS is a Ruby-to-JavaScript transpiler with a modular filter architecture. It converts Ruby source code into JavaScript by parsing Ruby AST (via Parser gem or Prism) and applying a pipeline of filters that transform Ruby idioms into JS equivalents. The project includes a self-hosting capability (transpiles itself to JS), a Rails-like micro-framework called 'juntos' for building full-stack JS apps, and build tool plugins for Vite, esbuild, Rollup, and Webpack. It supports multiple output targets (ESM, CJS, JSX, React, Lit, Stimulus, etc.) and framework-specific filters for Rails, Phlex, Vue, Svelte, Astro, and more. The architecture is well-structured with clear separation between parsing, filtering, conversion, and serialization. The codebase is actively maintained with extensive test coverage and a monorepo structure for npm packages.
This repository is the Redefine theme for Hexo, a static site generator. It provides a complete, feature-rich blogging theme with a focus on speed, simplicity, and extensibility. The architecture follows Hexo's plugin model: EJS templates for layout, Stylus and Tailwind CSS for styling, and modular JavaScript for client-side interactivity. Key features include multiple comment system integrations (Waline, Gitalk, Twikoo, Giscus, etc.), local search, image viewer, masonry gallery, page transitions via Swup, light/dark mode, code block highlighting with multiple themes, and various custom tag plugins (buttons, callouts, tabs, folding). The theme is published on npm and actively maintained with a comprehensive CI/CD pipeline for building, testing previews, and deploying to production. There is a well-structured deprecation system to guide users through configuration migrations. However, the codebase lacks automated tests and some third-party dependencies (e.g., moment.js, Waline) may face version drift. Overall, it is a solid, professionally developed theme with high attention to detail and user experience.
IT-Tools is a single-page application (Vue 3 + TypeScript + Vite) that provides a curated collection of over 80 client-side developer utilities. These utilities include hashing, encoding, formatting, conversion (JSON, YAML, TOML, XML, etc.), crypto (JWT, RSA, bcrypt), network tools (IP subnet calculator, MAC address lookup), text manipulation, and many others. All processing occurs entirely in the browser; there is no backend. The app is a monolith with lazy-loaded per-tool routes, using a custom UI component library (c-*) alongside Naive UI, Pinia for state, vue-i18n for translations, and VueUse composables. It is containerized (Docker) and can be self-hosted or used via the hosted version on Vercel/Netlify. The repository demonstrates a strong convention for tool definition, testing, and internationalization, though tool quality varies. It is not a data research or analytics project.
fullPage.js is a vanilla JavaScript library for creating full-screen scrolling websites (one-page sites) with vertical/horizontal snap scrolling, sections, and slides. The codebase uses a modular ES6 architecture with separate concerns for scroll handling, mouse/touch input, keyboard navigation, state management, and DOM manipulation. It exports a main class from src/js/fullpage.js with initialization via src/js/app.js. The library manages DOM structure through CSS classes (.fp-section, .fp-slide, .active, .fp-loaded) and maintains global state in src/js/common/state.js. It supports optional jQuery integration via src/js/jquery-adaptor.js and includes polyfills for IE11 compatibility. The build system uses Rollup for bundling and Gulp for asset processing, producing distribution files in dist/. The library features lazy loading for media, responsive breakpoints, and extensive callback hooks for lifecycle management.
FreeAPI is an open-source API hub that provides free REST APIs for learning and demonstration purposes. The backend is a monolithic Express.js application with MongoDB, offering a range of endpoints: static public data (cats, dogs, quotes, etc.), kitchen-sink features (HTTP methods, status codes, cookies, redirects), and full-featured CRUD applications (ecommerce, social media, chat, todo) with authentication (JWT, OAuth via Google/GitHub), real-time chat via Socket.IO, file uploads, email notifications, and payment integration (Razorpay, PayPal). The codebase is well-structured with reusable utilities (asyncHandler, ApiError, pagination helpers), modular validators, and seeding scripts. It also includes multiple React/Vite frontend examples (ecommerce with Redux, chat with Socket.IO, todo app, status code quiz) that demonstrate best practices in consuming APIs. The project is clearly a learning resource and demo platform, not a production service.
Hippy is a cross-platform mobile application framework developed by Tencent that enables developers to build native mobile apps using JavaScript with React or Vue. It provides a JS driver layer that communicates with native renderers on Android, iOS, OpenHarmony, and Web via a bridge system. The architecture is modular: a DOM layer manages the virtual tree and layout (using Taitank or Yoga), native renderers create platform-specific UI components, and a virtual file system (VFS) handles resource loading. The framework includes a full devtools backend implementing Chrome DevTools Protocol for debugging, performance monitoring, and DOM inspection. Key entry points include the JS bootstrap (hippy.js), native engine managers (HippyEngine on Android, HippyBridge on iOS), and the JS framework adapters (hippy-react, hippy-vue, hippy-vue-next). External dependencies include V8, Hermes, JSC, or JSH JavaScript engines, and platform-specific SDKs (AndroidX, UIKit, ArkUI). The codebase is large and actively maintained, with multiple renderer implementations and both Vue 2 and Vue 3 support, though some duplication and deprecated code exist.
NippleJS is a vanilla virtual joystick library for touch and mouse interfaces, designed for mobile games, remote controls, and interactive web applications. The core library in `packages/nipplejs/` provides a lightweight, dependency-free joystick with three modes (dynamic, semi, static), multitouch support, and extensive event-driven APIs. The architecture is built around a Factory singleton managing Collections, each of which manages multiple Joystick instances. The library is written in TypeScript, with thorough unit tests and Playwright end-to-end tests covering event accuracy, mode behavior, cleanup, and edge cases. The repository also includes a documentation site built with Astro, featuring five interactive game demos that showcase library features, along with a monorepo structure for tools and tests. While the core library is modern and well-tested, some tooling (ESLint 8, Husky v4) and the workspace Yarn version mismatch indicate minor technical drift.
This repository is a personal blog and portfolio website built with Astro, Tailwind CSS, and Markdoc. It features a home page with project showcases, a blog with individual posts, a projects page, and an RSS feed. The site includes a dark mode toggle, SEO metadata generation, and custom Markdoc components for embedding media. The architecture follows Astro's standard structure with pages, layouts, and components, and uses a custom Markdoc setup for content processing.
This repository provides a CSS library that replicates GitHub's Markdown styling for web content. The main entry point is `github-markdown.css`, which uses CSS custom properties and media queries to automatically switch between light and dark themes based on user system preferences. The library is designed to be included in web projects by linking the CSS file and applying the `markdown-body` class to containers of Markdown-rendered HTML. The project includes multiple theme variants (light-only, dark-only, high contrast, colorblind) generated from a common source, demonstrating a maintainable approach to theme management. The CSS is generated by the `generate-github-markdown-css` tool, ensuring consistency and accuracy to GitHub's styling. The repository also contains a demo `index.html` showcasing the CSS in action with proper layout constraints. The codebase is actively maintained with recent updates, has no external runtime dependencies, and follows modern CSS practices. While the library itself is focused and singular in purpose, the CSS output is comprehensive and non-trivial, capturing numerous details of GitHub's Markdown rendering including syntax highlighting, tables, code blocks, and interactive elements.