Onlook Dev: NEW Opensource Vibecoding Editor is FULLY FREE + Local! Cursor for Designers!

Key Concepts

• Onlookdev: A visual-first, open-source code editor for building full-stack websites, prototypes, and designs.
• Local-First: Operates directly on your machine, ensuring privacy and control.
• AI-Powered Development: Uses AI to generate code, components, and layouts from natural language prompts and image references.
• Real-Time Editing: Allows for live visual edits and code tweaking.
• Next.js, Tailwind CSS, and JavaScript: Technologies supported by Onlookdev.
• Sonnet 4: The AI model powering Onlookdev's code generation.
• Scribba: A learn-to-code platform combining video tutorials and live code editors.

Unlookde Dev: A New Era of Visual-First Coding

Introduction to Onlookdev

Onlookdev is introduced as a brand new, open-source, and local-first code editor designed for creating web applications, React websites, and real-time code editing. It's positioned as a "cursor for designers," offering a visual-first approach to full-stack website development.

Key Features and Functionality

• Visual Design with Live Code: Onlookdev allows users to design in real-time with live code, enabling visual edits and component tweaking without switching tabs.
• AI-Powered Code Generation: The editor can generate full layouts and components from natural language prompts. For example, typing "create me an e-commerce website" will prompt Onlookdev to autonomously build the website within the editor.
• Technology Stack: It supports Next.js, Tailwind CSS, and JavaScript.
• Local and Hackable: Unlike cloud-based alternatives, Onlookdev is local, giving users full control and the ability to customize it.
• Free to Use: Onlookdev is completely free and can be installed as a desktop application on Apple, Windows, and Linux operating systems.

Installation and Setup

The video demonstrates the ease of installation by directing viewers to the Onlookdev website where they can download the installer for their respective operating systems.

Initial Configuration

Upon opening Onlookdev, users are greeted with a chat interface where they can interact with the AI using natural language queries and image references. The video emphasizes the importance of configuring settings such as the default project path and build flags (e.g., replacing npm with bunt) before starting a project.

AI-Driven Project Creation

The video showcases Onlookdev's ability to generate a YouTube clone from the prompt "create me a YouTube clone." The AI autonomously generates the UI components and writes the necessary code, deploying the application to a local host (3000). A mobile view is also generated for previewing the application's responsiveness.

Real-Time Editing and Customization

• Component Selection and Interaction: Users can select components and interact with them through the AI chat.
• Code Access: Right-clicking on a component allows users to view the element in Cursor (a code editor) or open it in DevTools.
• Inline Editing: Onlookdev supports inline edits to the design.
• AI-Assisted Modifications: The video demonstrates adding a dark mode to the YouTube clone by sending the prompt "please add a dark mode" to the AI chat. The AI configures the query and applies the changes, showcasing its ability to modify the design based on user input.
• No API Keys Required: The AI-driven modifications are generated without the need for user-provided API keys.

Publishing and Deployment

Onlookdev allows users to preview their projects as a site or deploy them to a custom domain.

UI Management

The left-hand side of the interface provides tools for managing UI layers, images, pages, and window sizes. Users can highlight or unhighlight components to focus on specific elements.

Branding and Customization

Users can configure brand colors, which the AI can then use to maintain consistency in the design. A screenshot feature allows users to capture the current page and use it as a reference for the AI.

AI Model

Onlookdev is powered by the Sonnet 4 model, which is used for code generation and can be used on an unlimited basis.

Accessing Generated Code

The video explains how to access the generated code by navigating to the project settings and clicking "show in editor." This opens the project in a code editor like Cursor or VS Code, allowing users to further customize the code.

Advanced Project Example: Task Manager App

The video demonstrates Onlookdev's capabilities by creating a modern task manager app with a built-in note-taking feature and calendar. The prompt includes specific requirements such as drag-and-drop functionality for notes and a reference image.

Image-Based Design

Onlookdev successfully generates a task manager app that closely resembles the provided reference image. The app includes the requested features, such as a task list, calendar, and drag-and-drop notes.

Functionality Demonstration

The video showcases the drag-and-drop functionality and the ability to add new notes with custom colors. While acknowledging that the app is basic, the presenter highlights Onlookdev's ability to create a functional application based on the provided specifications.

Scribba: Learn to Code Interactively

Introduction to Scribba

Scribba is introduced as a learn-to-code platform that combines video tutorials and live code editors into a single, seamless experience.

Key Features

• Interactive Learning: Scribba allows users to code inside the lessons, take over the teacher's code, and solve interactive challenges.
• Comprehensive Curriculum: With over 80 courses, many of which are free, Scribba covers a wide range of topics relevant to modern web development, including AI development.
• AI Engineer Path: The platform offers an AI Engineer path, developed in collaboration with Hugging Face and Lang Chain, designed to help developers build real-world AI-powered applications.

Benefits

Scribba's interactive approach is designed to help users learn faster, build muscle memory, and future-proof their tech careers.

Special Offer

Viewers are offered a 20% discount on Scribba Pro plans through a link in the video description.

Conclusion

The video concludes by encouraging viewers to explore Onlookdev and Scribba. Onlookdev is presented as a promising open-source tool for visual-first web development, while Scribba is highlighted as an effective platform for learning to code and developing AI skills. The presenter encourages viewers to subscribe to the channel, join the newsletter and Discord, and follow him on Twitter for more content.