$ show onlook-dev/onlook
Onlook is a browser-based visual editor for building and modifying Next.js + Tailwind CSS websites. It provides a Figma-like canvas where users can directly manipulate React components, with changes written back to source code via AST-based transformation. The application integrates an AI chat assistant that can generate code, edit files, and run terminal commands through a set of well-defined tools (e.g., search-replace, file edit, bash). The monorepo architecture separates concerns into packages for AI agents, code parsing, font management, UI components, database access (Drizzle + Supabase), git operations, and sandbox management (CodeSandbox). It also includes a complete billing system (Stripe), GitHub integration for project import, custom domain management, and a publish/deployment pipeline. The codebase demonstrates strong engineering practices with type-safe tRPC APIs, MobX state management in the editor, extensive use of Radix UI primitives, and a consistent monorepo toolchain (Bun workspaces, ESLint, Prettier). While the editor engine is somewhat monolithic, individual packages like the AST parser, font helpers, and utility library are well-isolated and testable.
The LLM identified 5 files worth highlighting for reuse:
A Tailwind CSS class merge utility that intelligently combines class strings while deduplicating conflicting styles (e.g., 'px-4 px-6' becomes 'px-6'). It handles arbitrary values, important prefixes, and state variants. Unlike standard twMerge, it is purpose-built for the editor's use case of applying style overrides without conflicts. The implementation is pure, well-typed, and could be extracted as a standalone library.
A programmatic tool for modifying Next.js configuration files (next.config.js/mjs/ts) via AST manipulation. It can add, update, or remove properties in the exported config object, handle various export patterns (default export, IIFE, function), and merge with existing plugins like withMDX. The code is parameterized, well-tested with fixtures, and demonstrates deep understanding of JavaScript AST structures. Reusable in any tool that needs to modify Next.js config programmatically.
A collection of AST manipulation functions for managing Next.js font declarations (Google Fonts, local fonts) in JSX/TSX files. Includes add/remove font import, add/remove font variable to Tailwind theme config, merge local font sources, and update className with font variable. Each function operates on an AST node and returns a new AST, making them composable and testable. The test data covers edge cases like multiple fonts, empty arrays, and conditional expressions, demonstrating robust error handling.
A clean abstraction layer over isomorphic-git for common repository operations: init, add, commit, log, diff, branch operations, and status. It handles error normalization (converting fs errors to typed errors), provides a consistent async API, and includes utilities for commit message sanitization and display-name notes for branches. The wrapper is entirely self-contained and could be reused in any project needing a lightweight git implementation without shell commands.
A parameterized CLI command builder used by AI tools to safely construct shell commands. It supports cwd setting, environment variables, timeout, and command type (bash, npx, etc.). The builder ensures commands are properly escaped and avoid injection risks. Although currently coupled to the AI tools package, it is a standalone module that could be extracted as a general-purpose safe shell command builder for applications that allow LLM-generated commands.