Navify AI

Navify AI

AboutSubmit Tool
Onlook

Onlook

Visual code editor for designers — edit production code visually.

UI/UX & PrototypingDesignCodingProductivityTrial

Onlook is a visual code editor for designers and product managers — think Cursor, but for design. It lets you craft, edit, and ship web experiences visually while writing real code underneath. Edit your production React components directly, see changes in real-time, and push to production without context switching.

Visit Official Site

Updated

2026-06-12

Platforms

Web

Freemium

See the official site for current limits and plans.

* Pricing is for reference only; see the official site for current pricing.

Onlook
onlook.com

Key Features

  • Visual React Editor

    Click on any React component in your production app and edit it visually — styles, content, and layout changes are reflected instantly.

  • AI Design to Code

    Describe what you want in natural language and Onlook generates the corresponding UI code, automatically integrated into your existing component structure.

  • Live Edit

    Make changes directly on your live web app — edit text, colors, spacing, and layout without opening a code editor or digging through files.

  • Real-time Preview

    See every change immediately as you make it. No more switching between editor and browser to check your work.

  • Responsive Design

    Adjust designs for every screen size with visual breakpoint controls. Ensure pixel-perfect layouts across desktop, tablet, and mobile.

  • Ship to Production

    Push visual edits to production without writing code or creating pull requests. Onlook commits the real code changes behind the scenes.

Best For

Designers

Visually refine production React interfaces with responsive controls and real-time previews.

Product managers

Edit deployed web experiences and ship visual updates without switching into code workflows.

Pros

  • Bridge between design and development — no handoff needed
  • Edit production apps directly without touching code
  • AI converts design intent into real React components
  • Real-time collaboration between designers and developers

Considerations

  • Limited to React-based projects currently
  • Newer tool — ecosystem and integrations still growing
  • Advanced customization may still require code editing

Related tools

Explore a few similar tools next