# onlook-dev/onlook **Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/onlook-dev-onlook).** 24,715 stars · 1,841 forks · TypeScript · apache-2.0 ## Links - GitHub: https://github.com/onlook-dev/onlook - Homepage: https://onlook.com - awesome-repositories: https://awesome-repositories.com/repository/onlook-dev-onlook.md ## Topics `ai` `cursor` `cursor-ai` `design` `design-to-code` `drizzle` `editor` `figma` `frontend` `ide` `low-code` `nextjs` `react` `supabase` `tailwindcss` `typescript` `ui` `vibe-coding` `vibecoding` ## Description 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 its ability to map visual elements directly to their corresponding source components, allowing for precise control over project structures. It incorporates an AI-powered assistant that interprets natural language prompts to generate and refine interface code, alongside tools for importing external design assets to maintain visual fidelity. To ensure code quality, the system performs automated formatting and static analysis, updating the abstract syntax tree to keep the codebase consistent with the visual state. Beyond its core editing capabilities, the environment includes comprehensive project management utilities such as file navigation, live previews, and version control integration. It supports flexible deployment strategies, including containerized and cloud-native configurations, to accommodate various team and infrastructure requirements. ## Tags ### Development Tools & Productivity - [Integrated Development Environments](https://awesome-repositories.com/f/development-tools-productivity/integrated-development-environments.md) — Combines file navigation, automated testing, code quality enforcement, and version control submission into a single unified platform. - [Visual Development Environments](https://awesome-repositories.com/f/development-tools-productivity/visual-development-environments.md) — Allows developers to manipulate application components and styles while automatically synchronizing those changes back into the underlying source code. - [Visual-to-Code Sync Engines](https://awesome-repositories.com/f/development-tools-productivity/visual-to-code-sync-engines.md) — Automatically updates source files when visual modifications occur to ensure codebase consistency. ([source](https://docs.onlook.com/getting-started/core-features)) - [Codebase Synchronizers](https://awesome-repositories.com/f/development-tools-productivity/codebase-synchronizers.md) — Translates visual interface changes back into source code by mapping elements to their original locations. ([source](https://docs.onlook.com/developers/architecture)) - [Code Formatters](https://awesome-repositories.com/f/development-tools-productivity/code-formatters.md) — Applies predefined style rules to source files to ensure consistent syntax and project standards. - [Project Export Environments](https://awesome-repositories.com/f/development-tools-productivity/project-export-environments.md) — Provides a live environment for viewing project states and exporting designs as clean code. ([source](https://docs.onlook.com/getting-started/first-project)) ### User Interface & Experience - [Visual Component Builders](https://awesome-repositories.com/f/user-interface-experience/visual-component-builders.md) — Provides a library of pre-built components for rapid interface construction via a visual canvas. ([source](https://docs.onlook.com/getting-started/first-project)) - [Visual Interface Builders](https://awesome-repositories.com/f/user-interface-experience/visual-interface-builders.md) — Builds user interfaces by manipulating visual elements directly while automatically generating and syncing the underlying source code. - [Visual Synchronization Engines](https://awesome-repositories.com/f/user-interface-experience/visual-synchronization-engines.md) — Maintains a live link between the rendered interface and source files by mapping visual elements to code locations. - [Component Design Mappers](https://awesome-repositories.com/f/user-interface-experience/component-design-mappers.md) — Links visual interface elements to source components to allow direct manipulation of properties and styles. - [Visual Layout Editors](https://awesome-repositories.com/f/user-interface-experience/visual-layout-editors.md) — Allows direct manipulation of document structures and layout within a browser interface. ([source](https://docs.onlook.com/getting-started/core-features)) - [Design-to-Code Tools](https://awesome-repositories.com/f/user-interface-experience/design-to-code-tools.md) — Imports external design assets and maps visual specifications directly into functional, production-ready code structures. - [Design-to-Code Workflows](https://awesome-repositories.com/f/user-interface-experience/design-to-code-workflows.md) — Bridges the gap between design mockups and production code by importing assets and maintaining visual fidelity. - [Visual Styling Utilities](https://awesome-repositories.com/f/user-interface-experience/visual-styling-utilities.md) — Enables adjusting component appearance by applying utility classes through a visual editor. ([source](https://docs.onlook.com/getting-started/first-project)) - [Component Library Managers](https://awesome-repositories.com/f/user-interface-experience/component-library-managers.md) — Assembles and customizes pre-built interface components to construct complex layouts. - [Design Import Tools](https://awesome-repositories.com/f/user-interface-experience/design-import-tools.md) — Supports importing design components from external software to ensure visual fidelity with original mockups. ([source](https://docs.onlook.com/getting-started/core-features)) ### Artificial Intelligence & ML - [AI UI Generators](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-ui-generators.md) — Uses natural language prompts to generate, modify, and refine interface components within a live development environment. - [AI Coding Assistants](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-coding-assistants.md) — Interprets natural language prompts to create, modify, and refine user interface components within a live development workspace. - [AI Interface Generators](https://awesome-repositories.com/f/artificial-intelligence-ml/ai-interface-generators.md) — Enables the creation and updating of user interface code using natural language prompts to accelerate development. ([source](https://docs.onlook.com/getting-started/core-features)) ### Software Engineering & Architecture - [Abstract Syntax Tree Tools](https://awesome-repositories.com/f/software-engineering-architecture/abstract-syntax-tree-tools.md) — Provides programmatic source code modification by manipulating the underlying syntax tree structure.