UI & Design to Code

Convert any screenshot or mockup into clean frontend code with AI vision.

screenshot-to-code is an open-source tool that converts screenshots, mockups, and Figma designs into clean, functional HTML, Tailwind CSS, React, or Vue code using AI vision models. Powered by GPT-4V, Claude, and Gemini, it supports video-to-code and iterative editing workflows, making it a rapid scaffolding tool for frontend developers who want to skip the pixel-translation step entirely.

Open-source visual editor for React — your components, drag-and-drop, no vendor CMS

Puck is an open-source visual page builder for React that gives marketing teams a drag-and-drop editor backed by your own components — no vendor CMS, no proprietary runtime, just your components rendered in a visual canvas. With 12,500+ stars, MIT license, and a small but active team at Measured Co., Puck has become the default self-hosted answer for React-native visual editing.

Connect Blender to AI through Model Context Protocol

BlenderMCP bridges Blender and AI assistants like Claude through the Model Context Protocol, enabling natural language control over 3D modeling workflows. Artists and developers can create, modify, and manipulate 3D scenes, objects, materials, and animations by describing what they want instead of navigating complex menus. The tool exposes Blender's Python API through MCP, supporting operations from mesh creation to shader editing and physics simulations.

Production-ready React Suspense and error handling

TypeScript library extending React Suspense API with declarative components and hooks for production applications. Provides ErrorBoundary with selective error catching via shouldCatch, SSR-safe Suspense with clientOnly prop, Delay component preventing loading flashes, ErrorBoundaryGroup for coordinated resets, and data fetching components including SuspenseQuery and SuspenseInfiniteQuery. MIT licensed by Toss with three years of active development.

High-performance 2D UI layout library in C

Clay is a high-performance 2D UI layout library written as a single C header file that implements a flexbox-like layout model with microsecond-level performance. It uses static arena-based memory allocation with no malloc or free calls, keeping total memory usage under 4MB for thousands of elements. Clay is renderer-agnostic, outputting sorted rendering primitives that work with any 3D engine, SDL, or can compile to HTML via WebAssembly.

Markdown WYSIWYG editor with live preview

TOAST UI Editor is a full-featured Markdown and WYSIWYG editor by NHN that supports GFM standard syntax with extensible chart and UML rendering. It offers dual editing modes with seamless switching, live preview with scroll sync, syntax highlighting, and a plugin architecture for adding color pickers, table merging, code highlighting, and diagram support. The editor ships with React, Vue, and vanilla JavaScript wrappers and supports 20+ languages.

Component toolkit for live code playgrounds

Sandpack is a component toolkit by CodeSandbox for building live-running code editing experiences directly in the browser. It bundles a full in-browser JavaScript bundler, CodeMirror editor, and preview pane into embeddable React components with npm dependency support, hot module reloading, and error overlays. Sandpack powers the interactive examples on the official React documentation and supports templates for React, Vue, Svelte, and vanilla JavaScript.

React meta-framework for enterprise CRUD apps

Refine is an open-source React meta-framework for building data-intensive enterprise applications like admin panels, dashboards, and internal tools. Its headless architecture separates business logic from UI, supporting Ant Design, Material UI, Mantine, and Tailwind CSS. Connects to 15+ backends including REST, GraphQL, Supabase, Firebase, Strapi, and Hasura with built-in authentication and role-based access control. Deploys on Next.js, Remix, React Native, and Electron.

Full-stack framework for building AI copilots with generative UI

CopilotKit is an open-source full-stack framework for building AI-native applications with generative user interfaces. It provides React and Angular SDKs that enable agents to dynamically generate and render UI components, synchronize state between frontend and backend in real time, and implement human-in-the-loop workflows. Supports integration with LangChain, LangGraph, CrewAI and protocols including AG-UI, MCP, and A2A for standardized agent interaction.

Create videos programmatically with React

Remotion is a React framework that enables developers to create videos programmatically using familiar web technologies. Build videos as React components, leveraging CSS, Canvas, SVG, and WebGL for rendering. The framework includes Remotion Studio for browser-based preview with timeline scrubbing and fast refresh. Render locally, on servers, or via AWS Lambda for scalable video production. Ideal for automating social media content, data visualizations, and personalized marketing campaigns.

Headless rich text editor framework with real-time collaboration

Tiptap is a headless rich text editor toolkit for building Notion-like collaborative content experiences in web applications. Built on ProseMirror, it provides a modular extension system for formatting, mentions, tables, drag-and-drop blocks, slash commands, and custom node types. The open-source core is framework-agnostic with official bindings for React, Vue, and vanilla JavaScript. Cloud extensions add real-time collaboration, AI content generation, and document management.

npm for design engineers — shadcn/ui component marketplace

21st.dev is the largest open-source marketplace of shadcn/ui-based React Tailwind components, blocks, and hooks. Used by 1.4M developers with 200K monthly active users. Functions as an MCP server enabling AI coding agents to discover and compose UI components via API. Features a Magic AI feature that generates components from natural language prompts. All components installable with npx shadcn.

Python web framework with HTMX, no JavaScript needed

FastHTML is an open-source Python web framework by Answer.AI that renders HTML directly from Python functions using HTMX. It eliminates the JavaScript build step entirely, letting developers create interactive web apps with pure Python. FastHTML is designed for AI demo apps, admin tools, and internal tooling where full-stack simplicity matters more than SPA complexity. Built by Jeremy Howard's team.

Ultra-fast desktop apps with TypeScript, Bun, and Zig

Electrobun is an open-source cross-platform desktop app framework that combines TypeScript with Bun runtime and Zig for native performance. It produces 12MB base installs versus hundreds of MB for Electron, while maintaining full web technology compatibility. Electrobun uses the system's native webview instead of bundling Chromium, delivers sub-second cold starts, and provides native OS integrations through a Zig bridge layer.

Builder.io visual canvas with Figma-to-code and code-to-Figma sync

Fusion by Builder.io is a visual development canvas that provides bidirectional sync between Figma designs and production code. Designers edit in Figma while developers work in code, and changes propagate in both directions. Supports React, Vue, Svelte, Angular, and Qwik output with a visual editor for non-developers to make content and layout changes without touching code.

Production-ready React animation library, evolved from Framer Motion

Motion (formerly Framer Motion) is the most popular React animation library, providing a declarative API for complex animations, gestures, layout transitions, and scroll-triggered effects. Supports spring physics, keyframes, shared layout animations, and exit animations. Powers animations across thousands of production React applications with an API designed for developer ergonomics.

Animated number transition component for React and frameworks

NumberFlow is a lightweight component that animates number transitions with smooth morphing effects. Numbers roll, slide, and transform between values rather than snapping instantly, adding polish to dashboards, pricing displays, counters, and financial interfaces. Available for React, Vue, Svelte, and vanilla JS with over 6,300 GitHub stars and minimal bundle impact.

Copy-paste React component collection built on Tailwind v4

Origin UI is a curated collection of copy-paste React components built with Tailwind CSS v4 and Radix UI primitives. It provides production-ready UI patterns for dashboards, forms, navigation, data tables, and settings panels. Components are designed to be dropped directly into projects with minimal modification, following modern design conventions with dark mode support.

Collection of 150+ animated React components for landing pages

Magic UI provides over 150 animated React components designed for creating visually impressive landing pages and marketing sites. Components include animated text effects, particle backgrounds, scroll-triggered animations, 3D cards, and interactive elements built on Tailwind CSS and Framer Motion. Copy-paste installation model following the shadcn/ui pattern.

Zero-runtime CSS-in-JS framework with type-safe style authoring

Panda CSS is a zero-runtime CSS-in-JS framework that generates atomic CSS at build time from type-safe style definitions. It provides the developer experience of CSS-in-JS with runtime performance of static CSS extraction. Supports design tokens, responsive styles, conditional variants, and recipes for component style APIs. Over 500k weekly npm downloads with RSC compatibility.

Headless UI component library for React, Vue, Solid, and Svelte

Ark UI is a headless component library providing unstyled, accessible UI primitives for React, Vue, Solid, and Svelte. Built by the Chakra UI team using state machines for predictable behavior across frameworks. Includes complex components like date pickers, color pickers, comboboxes, and tree views that are notoriously difficult to build from scratch while maintaining accessibility.

Build and share ML web apps in Python with a few lines of code

Gradio is an open-source Python library for creating interactive web interfaces for machine learning models. It supports any data type including images, audio, video, 3D objects, and dataframes. Apps deploy for free on Hugging Face Spaces with auto-scaling, or can be shared via temporary public links. Gradio 5 adds server-side rendering, WebRTC streaming, and an AI Playground for generating apps.

Batteries-included full-stack framework for React, Node.js, and Prisma

Wasp is an open-source full-stack web framework that brings the Rails-like batteries-included experience to the JavaScript ecosystem. It uses a declarative configuration file to define auth, database models, server operations, and routing, then compiles to a standard React and Node.js application with Prisma for data access. With 18,000+ GitHub stars and YC backing, Wasp eliminates boilerplate while giving AI coding agents clear structure and guardrails.

Browser-native frontend coding agent for production codebases

Stagewise is an open-source frontend coding agent with 6,500+ GitHub stars that runs directly in the browser on localhost. YC S25 backed, it lets developers and designers point-and-prompt on live web applications with full devtools and console access, bridging the gap between visual editing and production codebase modification.