Onlook is an open-source, visual-first code editor designed for designers and developers to craft websites and prototypes directly within a live React application. It aims to provide a Figma-like visual editing experience for Next.js and TailwindCSS projects, enabling real-time design adjustments and code publishing.

How It Works

Onlook operates by loading a user's Next.js project into a web container, which then serves the application. The editor displays a preview of the application within an iframe and indexes the project's code. By instrumenting the code, Onlook maps DOM elements to their corresponding code locations, allowing visual edits in the iframe to be translated back into code changes. An AI chat interface also provides code access for understanding and modification. This architecture is designed to be framework-agnostic for declarative DOM rendering.

Quick Start & Requirements

• Onlook will be available as a hosted app or can be run locally.
• Requires a Next.js + TailwindCSS project.
• Documentation: docs.onlook.com
• Contributing Guide: Contributing to Onlook

Highlighted Details

• Visual editing of React apps with Figma-like UI.
• AI-powered creation and editing capabilities.
• Real-time preview and code synchronization.
• Supports Next.js and TailwindCSS, with potential for other frameworks.

Maintenance & Community

• Active development with a focus on community contributions.
• Community channels: Discord, Twitter, LinkedIn.
• Website: onlook.com

Licensing & Compatibility

• Licensed under the Apache 2.0 License.
• Permissive license suitable for commercial use and integration with closed-source projects.

Limitations & Caveats

Onlook for Web is currently under active development, with several features marked as "coming soon" or "previously in Onlook Desktop," including Figma import, component detection, and local code editing. The project is seeking contributors to enhance its prompt-to-build experience.