Onlook

What do they actually do

Onlook is an open‑source visual editor for React apps. Designers and developers can click elements in a live preview, change styles, layout, or component props, and have those edits written back to the actual source files in real time by mapping the DOM back to the code that renders it (docs and repo explain the DOM ↔ code mapping) (docs, GitHub, wiki).

A typical flow is: point Onlook at a running React project (it runs the app in a sandbox and shows a preview in an iframe), make visual edits in the canvas, then accept changes so Onlook updates the repo accordingly. Optional helpers include AI‑suggested edits and importing designs from Figma to speed up going from static designs to interactive React UI (GitHub README, core features, Figma tutorial).

You can run it locally or try a web/beta sandbox (currently via CodeSandbox). The team is migrating from an Electron desktop app to a web‑first flow and plans direct local‑server connections to reduce setup friction. Early traction is community‑driven, with the project trending on GitHub/HN and 70+ contributors reported publicly (migration notes, HN thread, YC profile).

Who are their target customer(s)

• Product/UX designers working on React apps: They need to adjust visuals and layout quickly but must wait for engineers for every tweak, causing slow iteration and design drift. Editing the real app UI and committing those edits to code reduces handoffs (docs, wiki).
• Frontend engineers on small teams: They spend time on many small style/prop changes requested by designers, which fragments focus and builds backlog. Letting designers make safe edits directly in the repo reduces repetitive work (README, YC).
• Design‑system or component‑library owners: They must enforce consistency and avoid ad‑hoc changes that create technical debt. They need edits mapped back to source with support for tokens/design standards (roadmap wiki).
• Early‑stage startups or small React product teams: Limited engineering bandwidth makes design→ship cycles slow if every change requires a handoff. Working directly in the repo speeds MVP development without adopting a separate no‑code stack (docs, YC).
• Agencies and freelance designer/dev pairs converting Figma to React: They spend hours translating static designs into componentized React. Figma import and AI‑assisted edits can cut repetitive conversion work (tutorial, AI features).

How would they acquire their first 10, 50, and 100 customers

• First 10: Personally invite active GitHub contributors and HN commenters into a pilot, do 1:1 onboarding to remove setup blockers, and ship a visible change together. Capture a short testimonial and a public demo/case study for each pilot.
• First 50: Run hands‑on remote workshops for small React startups, agencies, and lead designers to import a Figma screen and ship it via Onlook, paired with priority support. Turn successful workshops into repeatable playbooks and reference customers.
• First 100: Make the web sandbox frictionless (Figma import, starter templates, safe GitHub PR flow) to drive self‑serve trials, and publish measured time‑saved case studies. Add targeted community content and a few agency partnerships to drive referrals.

What is the rough total addressable market

Top-down context:

Near‑term TAM aligns with the UI/UX design tools market (~$2.2B in 2025) (Mordor Intelligence). If Onlook expands into developer workflows, it touches the much larger web‑development services (~$80.6B in 2025) and broader digital content creation software (~$30B+) markets (Mordor web dev, Grand View).

Bottom-up calculation:

A practical near‑term view: target a fraction of the millions of designers (Figma has tens of millions of users) and ~19.6M professional developers, focusing on React teams; for example, 300k–600k seats at $30–$50 per month implies ~$108M–$360M in annual spend addressable in the near term (Figma user context, JetBrains dev population).

Assumptions:

• Initial focus is designers and frontend engineers working on React codebases, not the full designer/developer populations.
• Seat‑based pricing in the $30–$50/month range for professional use.
• Adoption penetrates a modest share of React‑using teams within the broader designer/developer universe.

Who are some of their notable competitors

• Plasmic: Visual builder for React and code components used inside existing codebases; strong design‑to‑production story, though changes are typically integrated via SDKs rather than writing back to source files.
• Builder.io: Visual editor/CMS for React frameworks that lets non‑developers compose pages and content via SDKs; focuses on headless content and A/B testing rather than editing source files directly.
• Locofy.ai: Figma/Design‑to‑code tool that generates React/Next code from designs to speed up handoff and implementation.
• Anima: Design‑to‑code platform that converts Figma/Adobe/XD designs into React/HTML/CSS, aimed at reducing manual front‑end translation.
• Webflow: Popular visual website builder that outputs production HTML/CSS and hosting; adjacent alternative for teams willing to build outside their React repo rather than editing source code directly.