Open-source alternatives to Code Connect

Builder is a visual content management system and design-to-code tool that transforms visual layouts into functional code for frontend frameworks. It operates as a headless visual editor, allowing for the creation and modification of site layouts through a drag-and-drop interface. The system enables the conversion of design mockups into components for React, Vue, Svelte, and Qwik applications. It decouples layout and design management from the frontend rendering engine, allowing users to update and publish content changes to live applications without redeploying the entire codebase. The plat

This project is a design-to-development handoff guide and UI design audit framework. It provides a structured collection of requirements and checklists to verify that visual assets, component architectures, and technical specifications are ready for implementation. The framework focuses on standardizing web asset management through naming conventions and format verification for images, icons, and fonts. It includes specifications for responsive web design, ensuring that mobile and tablet layouts and fluid grid systems are defined for cross-device consistency. The guide covers quality assuran

sketch-measure is a design specification tool and design-to-code annotation utility for Sketch. It functions as an HTML design spec generator and asset export manager, creating technical handoff documentation and measurement annotations directly from design files. The tool generates interactive web viewers and standalone offline HTML pages that allow for the inspection of dimensions, styles, and design details. It includes capabilities for managing color palettes via XML export and capturing influence rectangles to ensure exported image dimensions account for shadows and borders. The system

Figma-Context-MCP is a design-to-code automation tool that functions as a server for the Model Context Protocol. It acts as a bridge between visual design platforms and development environments, enabling large language models to access design file metadata and component properties directly. The project distinguishes itself by providing a standard-compliant interface that translates design specifications into structured data. By extracting layout and styling information, it facilitates the programmatic conversion of design tokens and component requirements into actionable code structures. Thi

Semi Design is a React UI component library and design token system used to build web application frontends. It provides a collection of pre-built interface elements and a framework of visual constants to maintain consistent branding across a product. The project features a design-to-code workflow that converts visual design drafts into production-ready React code and stylesheets. It includes an internationalization framework for adapting interfaces to different languages and text layouts, as well as a web component wrapper to isolate UI elements for use in SDKs and browser plugins. The libr

Onlook is an integrated development environment designed for building user interfaces through a combination of visual manipulation and direct code synchronization. It provides a unified workspace where developers can modify application components, layouts, and styles within a graphical interface, with all changes automatically reflected in the underlying source code. By maintaining a live, bidirectional link between the rendered interface and the codebase, the platform ensures that visual edits are accurately translated into production-ready syntax. The platform distinguishes itself through i

This project is a plugin framework and agentic workflow library designed to connect large language models to professional toolstacks. It provides a system for integrating language models with external data warehouses, CRMs, and other enterprise software to retrieve and manipulate real-time business data. The framework enables the automation of specialized professional tasks through a file-based plugin definition system. It allows for the customization of domain expertise and plugin behavior to align with internal company processes, supported by an enterprise data connector that links models t

react-sketchapp is a design system automation tool that translates React components into native Sketch design layers. It functions as a custom renderer that maps a virtual component tree to a design canvas, allowing for the programmatic generation and updating of design files from source code. The project provides a framework for building custom design utilities and automation scripts by treating the visual canvas as a programmable target. It includes a system for fetching external data to populate design components, enabling the creation of high-fidelity mockups and data-driven prototypes.

Style Dictionary is a cross-platform style generator and design token build system. It converts a single source of design variables into multiple output formats and platform-specific files to maintain a consistent source of truth across different interfaces. The system functions as a multi-format style orchestrator that merges modular token sources and transforms them based on target platform requirements. It uses a scriptable transform interface to modify token values and names, allowing for the automation of design system styles for web, iOS, and Android applications. The build process is

Made-With-ML is an automated documentation generator and developer experience platform designed to transform source code into structured, searchable reference websites. It functions as a codebase intelligence tool that parses implementation details to provide clear explanations of logic and data requirements. The system distinguishes itself by leveraging language-level type annotations and structured code comments to generate interface specifications. By utilizing static analysis to extract metadata, it automates the transformation of docstrings into web-ready documentation, ensuring that tec

React is a JavaScript library for building user interfaces from encapsulated, reusable components. It renders views declaratively, automatically updating only the parts of the interface that change when underlying data shifts, while leaving stable sections untouched. Its rendering engine breaks work into incremental, prioritised units that can pause, resume, or abort without blocking the main thread. A diffing algorithm computes minimal changes between staged UI trees, and core rendering logic remains decoupled from any specific output target. State and side-effect logic attach to functional

Pynecone is a full-stack web framework and application platform that enables the development of complete web applications using only Python for both frontend and backend logic. It functions as a web UI library for creating interactive user interfaces and managing application state without the need to write JavaScript. The platform includes a generative AI app builder that automatically produces application structures and source code. It simplifies development by mapping Python-defined UI elements to native React components and automatically transforming Python functions into REST endpoints.

react-markdown is a React renderer that converts markdown text into a virtual DOM to safely display formatted content. It functions as a markdown syntax parser and renderer that transforms markdown strings into structural elements, ensuring XSS-safe content delivery. The project allows for the mapping of standard markdown elements to custom React components for specialized styling and behavior. It supports syntax extensions through a plugin system, enabling additional formatting features such as tables, footnotes, and tasklists. The system includes security primitives for HTML and URL saniti

Brick Design is a low-code page builder framework used to create drag-and-drop visual editors that generate production-ready layout and styling code for user interfaces. It functions as a visual layout engine and UI component orchestrator, providing the tools necessary to manage component constraints, nesting rules, and visual property configurations. The framework includes a dynamic template generator that utilizes logic rendering and expression variables to create reusable, data-driven page templates. It also operates as a multi-device design tool, offering viewport switching and adaptive s

Polymer is a custom element framework and web component library used to build reusable, encapsulated custom elements that function as native browser components. It serves as a system for defining public properties and attributes that trigger automatic state observation and updates within the DOM. The project functions as a data binding library, providing a mechanism to synchronize state between internal component properties and external models via two-way data binding. It covers the development of frontend component libraries and web component architecture, enabling the creation of modular u

This project is a web component tooling system used to compile TypeScript and JSX into standard-compliant custom elements. It enables the development of framework-agnostic components that function across different browsers and frontend environments. The toolset focuses on cross-framework UI distribution, allowing a single library of components to be used in React, Angular, Vue, or plain HTML. It includes capabilities for enterprise design system engineering and generates specific wrapper code to ensure components behave as native elements within various frameworks. The system covers server-s

FigmaToCode is a design-to-code converter and frontend code generator that transforms Figma design files into responsive source code. It functions as a multi-platform UI compiler, mapping visual design elements to structural constraints for web and mobile environments. The system supports multi-target syntax emission to produce code for HTML, Tailwind CSS, Flutter, and SwiftUI. It automates frontend styling by converting design system variables and visual effects into theme-consistent code across these different frameworks. The tool handles responsive UI implementation by translating design

Puck is a visual page editor and layout tool for React. It functions as a CMS page builder and component orchestrator, allowing for the design and arrangement of structured content pages through a drag-and-drop interface. The system utilizes a pluggable component registry to integrate external React components into the visual canvas. It employs schema-driven mapping and JSON-based serialization to store and persist page structures as portable data objects. The platform covers the domain of no-code page building and CMS content management, providing a visual reconciliation system to synchroni

Screenshot-to-code is an AI visual frontend generator that translates images, design mockups, and screenshots into structured HTML, CSS, and Tailwind markup. It functions as a design-to-code converter that uses large language models and neural networks to transform visual elements into functional web page layouts. The tool automates the frontend design process by converting static mockups into website code, facilitating rapid UI prototyping and the generation of static website structures. It bridges the gap between visual design assets and frontend development by translating image-based layou

Vizro is a low-code Python framework for building production-ready data visualization applications. It functions as a UI orchestrator that allows users to define multi-page analytical dashboards through structured configurations in Python, YAML, or JSON, reducing the need for extensive frontend engineering. The project distinguishes itself through generative AI integration, utilizing a model context protocol server to translate natural language descriptions into validated dashboard configurations, charts, and layouts. It also features a decoupled data cataloging system that separates data sou

This project provides a collection of coding standard specifications, style guides, and configuration assets used to define automated rules for static code analysis in Ruby. It serves as a centralized set of RuboCop configurations and static analysis rules to ensure consistent syntax and idiomatic usage across a codebase. The project establishes a comprehensive Ruby style guide that defines naming conventions, indentation, and structural requirements. It utilizes a pluggable linting engine to enforce these standards through a defined set of patterns and constraints. The capability surface co

Open Design is an AI design orchestration platform and LLM agent workspace designed for generating prototypes, presentations, and motion graphics. It functions as a local-first environment that integrates various command-line AI agents and coding tools into a unified design workflow, allowing users to migrate design specifications into brand-compliant source code. The project is distinguished by its ability to enforce visual consistency through a design system manager that defines brand contracts and tokens using Markdown. It features a specialized motion graphics generator that converts HTML

lua-language-server is a static analysis tool and type checker for the Lua language that implements the Language Server Protocol. It provides a system for detecting type mismatches, unused code, and logic errors in source files. The project features an inference-based type system that deduces variable types and supports optional annotations and meta files to enforce type safety. It allows for the definition of custom types and function signatures, including support for overloads and member visibility controls. The server provides a broad set of IDE capabilities, including real-time code auto

MPX is a cross-platform framework designed to build applications for multiple mini-program ecosystems and the web from a single codebase. It utilizes a static transpilation pipeline to transform source code into platform-specific bundles, employing a single-file component system that encapsulates templates, logic, and styles. The framework provides a reactive state management system that automatically synchronizes application data with the user interface through computed properties and watchers. The project distinguishes itself through a robust build-time toolchain that supports sub-package p

Panel is a Python data application framework used to build interactive dashboards and reactive user interfaces by connecting data visualizations, widgets, and callbacks. It functions as a reactive UI library that synchronizes application state with interface updates based on user interactions. The project distinguishes itself by offering multiple execution models, including a FastAPI-based web application server for scalable session management and a WebAssembly compiler that enables Python applications to run directly in the browser without a backend server. It also includes a specialized too

This project is a static analysis tool and linter for Elixir designed to enforce a unified visual structure across codebases. It serves as a specification for code formatting, naming conventions, and documentation standards. The tool provides a standardized system for casing and prefixes used in files, functions, and variables. It also establishes guidelines for formatting module and function descriptions to ensure consistent technical documentation. The project covers a broad range of code quality areas, including the organization of module layouts, the implementation of commenting patterns

This toolkit provides a suite of tools, templates, and guidelines for preparing software copyright registration documents required by Chinese authorities. It automates the creation of necessary legal filings and technical documentation to facilitate software copyright registration within the Chinese regulatory system. The system includes a code metric calculator to extract quantitative data and line counts from source files for application forms. It also features a legal compliance checklist and verification utilities to ensure submission materials adhere to official formatting, pagination, a