{"product_id":"onlook","title":"Onlook","description":"\u003cstyle\u003e\n.guidaio-v3 { --gv3-bg:#f6f5fb;--gv3-surface:#fff;--gv3-surface-soft:#fbfaff;--gv3-ink:#14132b;--gv3-ink-2:#2b2a4a;--gv3-muted:#6c6a8a;--gv3-line:#ecebf5;--gv3-line-2:#e0deef;--gv3-brand:#5b3df5;--gv3-brand-2:#7c63ff;--gv3-brand-soft:#efeaff;--gv3-brand-ink:#2c1d8a;--gv3-ok:#0f8a5a;--gv3-ok-soft:#e6f7ee;--gv3-warn:#b16800;--gv3-warn-soft:#fff3dc;--gv3-bad:#b3261e;--gv3-bad-soft:#fde7e6;--gv3-radius-lg:22px;--gv3-radius:16px;--gv3-radius-sm:10px;--gv3-shadow-sm:0 1px 2px rgba(20,19,43,.04);--gv3-shadow:0 12px 30px rgba(53,38,124,.07);\n  background:radial-gradient(1200px 600px at 80% -10%,rgba(124,99,255,.18),transparent 60%),radial-gradient(900px 500px at -10% 5%,rgba(91,61,245,.12),transparent 60%),var(--gv3-bg);\n  color:var(--gv3-ink);font-family:Inter,system-ui,-apple-system,\"Segoe UI\",Roboto,sans-serif;font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;\n  max-width:1240px;margin:0 auto;padding:24px 16px 64px;border-radius:var(--gv3-radius-lg);}\n.guidaio-v3 *,.guidaio-v3 *::before,.guidaio-v3 *::after{box-sizing:border-box}\n.guidaio-v3 a{color:var(--gv3-brand);text-decoration:none}.guidaio-v3 a:hover{text-decoration:underline}\n.guidaio-v3 img{max-width:100%;display:block}\n.guidaio-v3 h1,.guidaio-v3 h2,.guidaio-v3 h3,.guidaio-v3 h4{font-family:\"Space Grotesk\",Inter,sans-serif;letter-spacing:-.01em;margin:0;color:var(--gv3-ink)}\n.guidaio-v3 svg{display:inline-block;vertical-align:middle}\n.guidaio-v3 .hero{position:relative;background:radial-gradient(700px 320px at 90% 0%,rgba(124,99,255,.18),transparent 70%),linear-gradient(180deg,#fff 0%,#fbfaff 100%);border:1px solid var(--gv3-line);border-radius:var(--gv3-radius-lg);box-shadow:var(--gv3-shadow);padding:32px;overflow:hidden}\n.guidaio-v3 .hero-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr);gap:28px;align-items:start}\n.guidaio-v3 .hero-head{display:flex;gap:16px;align-items:flex-start}\n.guidaio-v3 .logo-tile{width:72px;height:72px;border-radius:18px;border:1px solid var(--gv3-line-2);background:#fff;box-shadow:var(--gv3-shadow-sm);display:grid;place-items:center;overflow:hidden;flex:0 0 auto}\n.guidaio-v3 .logo-tile img{width:56px;height:56px;object-fit:contain}\n.guidaio-v3 .eyebrow{display:inline-flex;align-items:center;gap:6px;color:var(--gv3-brand-ink);background:var(--gv3-brand-soft);padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}\n.guidaio-v3 h1.title{margin-top:12px;font-size:34px;line-height:1.1;color:var(--gv3-ink)}\n.guidaio-v3 .lede{margin:14px 0 0;font-size:17px;color:var(--gv3-ink-2);max-width:60ch}\n.guidaio-v3 .badge-row,.guidaio-v3 .chip-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}\n.guidaio-v3 .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;font-size:12px;font-weight:600;background:#fff;border:1px solid var(--gv3-line-2);color:var(--gv3-ink-2)}\n.guidaio-v3 .badge.ok{background:var(--gv3-ok-soft);color:var(--gv3-ok);border-color:#b8e8cc}\n.guidaio-v3 .badge.warn{background:var(--gv3-warn-soft);color:var(--gv3-warn);border-color:#f1d6a3}\n.guidaio-v3 .badge.bad{background:var(--gv3-bad-soft);color:var(--gv3-bad);border-color:#f5c2c0}\n.guidaio-v3 .badge.brand{background:var(--gv3-brand-soft);color:var(--gv3-brand-ink);border-color:#d6cdfb}\n.guidaio-v3 .tbd-row{margin-top:14px;display:grid;gap:10px}\n.guidaio-v3 .tbd-row .label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gv3-muted)}\n.guidaio-v3 .chip{display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:13px;border:1px solid var(--gv3-line-2);background:#fff;color:var(--gv3-ink-2)}\n.guidaio-v3 .chip.cat{background:#eef2ff;color:#3730a3;border-color:#c7d2fe}\n.guidaio-v3 .chip.dom{background:#ecfeff;color:#0e7490;border-color:#a5f3fc}\n.guidaio-v3 .chip.prof{background:#fdf4ff;color:#86198f;border-color:#f5d0fe}\n.guidaio-v3 .cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}\n.guidaio-v3 .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 16px;border-radius:12px;font-weight:700;border:1px solid transparent;cursor:pointer;font-size:14px}\n.guidaio-v3 .btn:hover{text-decoration:none}\n.guidaio-v3 .btn-primary{background:linear-gradient(135deg,var(--gv3-brand) 0%,var(--gv3-brand-2) 100%);color:#fff;box-shadow:0 14px 28px rgba(91,61,245,.28)}\n.guidaio-v3 .btn-secondary{background:#fff;color:var(--gv3-brand-ink);border-color:#d6cdfb}\n.guidaio-v3 .btn-ghost{background:transparent;color:var(--gv3-ink-2);border-color:var(--gv3-line-2)}\n.guidaio-v3 .affiliate-note{margin-top:10px;font-size:12px;color:var(--gv3-muted)}\n.guidaio-v3 .snapshot{background:#fff;border:1px solid var(--gv3-line);border-radius:var(--gv3-radius-lg);padding:20px;box-shadow:var(--gv3-shadow)}\n.guidaio-v3 .snapshot h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--gv3-brand-ink);margin-bottom:14px}\n.guidaio-v3 .snapshot dl{margin:0;display:grid;grid-template-columns:1fr;gap:12px}\n.guidaio-v3 .snapshot .row{display:grid;grid-template-columns:1fr auto;gap:8px;padding-bottom:12px;border-bottom:1px dashed var(--gv3-line-2)}\n.guidaio-v3 .snapshot .row:last-child{border-bottom:0;padding-bottom:0}\n.guidaio-v3 .snapshot dt{color:var(--gv3-muted);font-size:13px;margin:0}\n.guidaio-v3 .snapshot dd{margin:0;text-align:right;font-weight:700;color:var(--gv3-ink);font-size:13px}\n.guidaio-v3 .snapshot dd small{display:block;font-weight:500;color:var(--gv3-muted);font-size:11px;text-align:right}\n.guidaio-v3 .price-big{font-family:\"Space Grotesk\";font-size:20px;line-height:1}\n.guidaio-v3 .toc{margin:20px 0 24px;padding:10px;background:rgba(255,255,255,.85);border:1px solid var(--gv3-line);border-radius:22px;box-shadow:var(--gv3-shadow-sm);display:flex;flex-wrap:wrap;gap:8px;overflow-x:auto}\n.guidaio-v3 .toc a{padding:8px 14px;border-radius:999px;font-size:13px;font-weight:600;color:var(--gv3-brand-ink);background:#fff;white-space:nowrap;border:1px solid var(--gv3-line-2);box-shadow:var(--gv3-shadow-sm);transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease}\n.guidaio-v3 .toc a:hover{background:linear-gradient(135deg,var(--gv3-brand) 0%,var(--gv3-brand-2) 100%);color:#fff;border-color:transparent;transform:translateY(-2px) scale(1.04);box-shadow:0 8px 18px rgba(91,61,245,.25);text-decoration:none}\n.guidaio-v3 .justify{text-align:justify;text-justify:inter-word;hyphens:auto}\n.guidaio-v3 a.chip,.guidaio-v3 a.chip:hover{text-decoration:none}\n.guidaio-v3 a.chip{transition:transform .15s ease,box-shadow .15s ease,filter .15s ease;cursor:pointer}\n.guidaio-v3 a.chip:hover{transform:translateY(-1px);box-shadow:0 4px 10px rgba(53,38,124,.12);filter:brightness(.96)}\n.guidaio-v3 section.block{background:var(--gv3-surface);border:1px solid var(--gv3-line);border-radius:var(--gv3-radius-lg);padding:32px;margin-top:22px;box-shadow:var(--gv3-shadow-sm);scroll-margin-top:90px}\n.guidaio-v3 section.block.soft{background:var(--gv3-surface-soft)}\n.guidaio-v3 section.block .head{margin-bottom:20px}\n.guidaio-v3 section.block .eyebrow + h2{margin-top:10px}\n.guidaio-v3 section.block h2{font-size:24px;color:var(--gv3-ink)}\n.guidaio-v3 section.block .lead{margin-top:8px;color:var(--gv3-muted);max-width:70ch}\n.guidaio-v3 .grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}\n.guidaio-v3 .grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}\n.guidaio-v3 .rich p{margin:0 0 14px}.guidaio-v3 .rich p:last-child{margin:0}\n.guidaio-v3 ul.brand-list{list-style:none;padding:0;margin:0;display:grid;gap:10px}\n.guidaio-v3 ul.brand-list li{position:relative;padding-left:26px;color:var(--gv3-ink-2)}\n.guidaio-v3 ul.brand-list li::before{content:\"\";position:absolute;left:0;top:9px;width:14px;height:14px;border-radius:999px;background:var(--gv3-brand-soft);box-shadow:inset 0 0 0 4px var(--gv3-brand)}\n.guidaio-v3 ol.steps{list-style:none;counter-reset:s;padding:0;margin:0;display:grid;gap:14px}\n.guidaio-v3 ol.steps li{counter-increment:s;position:relative;padding-left:42px;color:var(--gv3-ink-2);min-height:30px}\n.guidaio-v3 ol.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:30px;height:30px;border-radius:999px;background:linear-gradient(135deg,var(--gv3-brand) 0%,var(--gv3-brand-2) 100%);color:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;box-shadow:0 6px 14px rgba(91,61,245,.25)}\n.guidaio-v3 .feature-card{border:1px solid var(--gv3-line);border-radius:var(--gv3-radius);padding:16px;background:#fff;display:grid;gap:8px}\n.guidaio-v3 .feature-card .icbox{width:36px;height:36px;border-radius:12px;background:var(--gv3-brand-soft);color:var(--gv3-brand-ink);display:grid;place-items:center}\n.guidaio-v3 .feature-card .ftitle{font-weight:700;color:var(--gv3-ink);font-size:15px}\n.guidaio-v3 .feature-card .fbody{color:var(--gv3-muted);font-size:13px}\n.guidaio-v3 .pc{border-radius:var(--gv3-radius);padding:20px;border:1px solid var(--gv3-line)}\n.guidaio-v3 .pc.pros{background:var(--gv3-ok-soft);border-color:#b8e8cc}\n.guidaio-v3 .pc.cons{background:var(--gv3-bad-soft);border-color:#f5c2c0}\n.guidaio-v3 .pc h3{font-size:17px;display:flex;align-items:center;gap:8px;margin-bottom:12px}\n.guidaio-v3 .pc.pros h3{color:var(--gv3-ok)}.guidaio-v3 .pc.cons h3{color:var(--gv3-bad)}\n.guidaio-v3 .pc ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}\n.guidaio-v3 .pc li{display:flex;gap:8px;align-items:flex-start;color:var(--gv3-ink-2);font-size:14px}\n.guidaio-v3 .pc li svg{flex:0 0 auto;margin-top:3px}\n.guidaio-v3 .pc.pros li svg{color:var(--gv3-ok)}.guidaio-v3 .pc.cons li svg{color:var(--gv3-bad)}\n.guidaio-v3 .bestnot{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n.guidaio-v3 .bestnot .card{border:1px solid var(--gv3-line);border-radius:var(--gv3-radius);padding:20px;background:#fff}\n.guidaio-v3 .bestnot h3{display:flex;align-items:center;gap:8px;font-size:17px;margin-bottom:12px}\n.guidaio-v3 .bestnot .for h3{color:var(--gv3-ok)}.guidaio-v3 .bestnot .not h3{color:var(--gv3-warn)}\n.guidaio-v3 .plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}\n.guidaio-v3 .plan{border:1px solid var(--gv3-line);border-radius:var(--gv3-radius-lg);padding:22px;background:#fff;display:grid;gap:10px;position:relative}\n.guidaio-v3 .plan.featured{border-color:#c7baff;background:linear-gradient(180deg,#fff 0%,#f7f3ff 100%);box-shadow:var(--gv3-shadow)}\n.guidaio-v3 .plan .pill{position:absolute;top:-12px;right:14px;background:linear-gradient(135deg,var(--gv3-brand) 0%,var(--gv3-brand-2) 100%);color:#fff;font-size:11px;font-weight:700;letter-spacing:.06em;padding:5px 9px;border-radius:999px;text-transform:uppercase}\n.guidaio-v3 .plan .pname{font-family:\"Space Grotesk\";font-weight:700;font-size:17px}\n.guidaio-v3 .plan .pprice{font-family:\"Space Grotesk\";font-size:24px;font-weight:700}\n.guidaio-v3 .plan .pprice small{font-size:13px;font-weight:500;color:var(--gv3-muted)}\n.guidaio-v3 .plan ul{list-style:none;padding:0;margin:6px 0 0;display:grid;gap:8px}\n.guidaio-v3 .plan ul li{display:flex;gap:8px;align-items:flex-start;color:var(--gv3-ink-2);font-size:14px}\n.guidaio-v3 .plan ul li svg{color:var(--gv3-brand);flex:0 0 auto;margin-top:3px}\n.guidaio-v3 .pricing-extras{margin-top:16px;display:grid;gap:10px}\n.guidaio-v3 .offer{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;border-radius:12px;background:#fff7e6;border:1px solid #f1d6a3;color:var(--gv3-warn);font-size:14px}\n.guidaio-v3 .offer svg{flex:0 0 auto;margin-top:2px}\n.guidaio-v3 .trust-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px}\n.guidaio-v3 .trust-grid .col{display:grid;gap:14px}\n.guidaio-v3 .trust-card{background:#fff;border:1px solid var(--gv3-line);border-radius:var(--gv3-radius);padding:20px}\n.guidaio-v3 .trust-card h3{font-size:15px;margin-bottom:10px}\n.guidaio-v3 .kv{display:grid;grid-template-columns:180px 1fr;gap:12px;padding:10px 0;border-top:1px solid var(--gv3-line)}\n.guidaio-v3 .kv:first-child{border-top:0;padding-top:0}\n.guidaio-v3 .kv .k{color:var(--gv3-muted);font-size:13px}\n.guidaio-v3 .kv .v{color:var(--gv3-ink);font-size:14px}\n.guidaio-v3 .availability{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n.guidaio-v3 .availability .card{border:1px solid var(--gv3-line);border-radius:var(--gv3-radius);background:#fff;padding:18px}\n.guidaio-v3 .flag-row{display:flex;flex-wrap:wrap;gap:8px}\n.guidaio-v3 .flag{display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:999px;background:#fff;border:1px solid var(--gv3-line-2);font-size:13px;color:var(--gv3-ink-2)}\n.guidaio-v3 section.block.watch{background:#fffaf0;border:1px solid #f1d6a3}\n.guidaio-v3 section.block.watch .head h2{color:var(--gv3-warn)}\n.guidaio-v3 .setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}\n.guidaio-v3 .setup-card{background:#fff;border:1px solid var(--gv3-line);border-radius:var(--gv3-radius);padding:20px}\n.guidaio-v3 .integrations{display:flex;flex-wrap:wrap;gap:8px}\n.guidaio-v3 .integration{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:12px;background:#fff;border:1px solid var(--gv3-line-2);color:var(--gv3-ink-2);font-size:13px;font-weight:600}\n.guidaio-v3 .company-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}\n.guidaio-v3 .company-card{border:1px solid var(--gv3-line);border-radius:var(--gv3-radius);background:#fff;padding:20px}\n.guidaio-v3 .timeline{display:grid;gap:8px;margin:8px 0 0}\n.guidaio-v3 .timeline .ev{padding:10px 14px;border-radius:12px;background:var(--gv3-brand-soft);color:var(--gv3-brand-ink);font-weight:600;font-size:14px;display:flex;align-items:center;gap:8px}\n.guidaio-v3 .social-row{display:flex;gap:8px;flex-wrap:wrap}\n.guidaio-v3 .social{width:36px;height:36px;border-radius:12px;border:1px solid var(--gv3-line-2);background:#fff;display:grid;place-items:center;color:var(--gv3-ink-2)}\n.guidaio-v3 .social:hover{background:var(--gv3-brand-soft);color:var(--gv3-brand-ink);border-color:#d6cdfb}\n.guidaio-v3 .res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}\n.guidaio-v3 .res{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--gv3-line);background:#fff;color:var(--gv3-ink-2);font-size:13px}\n.guidaio-v3 .res:hover{border-color:#d6cdfb;background:#fbfaff;text-decoration:none}\n.guidaio-v3 .res svg{color:var(--gv3-brand);flex:0 0 auto}\n.guidaio-v3 .res .url{color:var(--gv3-muted);font-size:11px;word-break:break-all}\n.guidaio-v3 .res .res-text{display:grid}\n.guidaio-v3 .alts{display:flex;flex-wrap:wrap;gap:8px}\n.guidaio-v3 .alt{display:inline-flex;align-items:center;gap:8px;padding:9px 13px;border-radius:14px;background:#fff;border:1px solid var(--gv3-line-2);font-weight:600;color:var(--gv3-ink-2);font-size:14px}\n.guidaio-v3 .alt .av{width:24px;height:24px;border-radius:8px;background:linear-gradient(135deg,#c7baff 0%,#efeaff 100%);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--gv3-brand-ink)}\n.guidaio-v3 .faq{display:grid;gap:10px}\n.guidaio-v3 .faq details{background:#fff;border:1px solid var(--gv3-line);border-radius:var(--gv3-radius);padding:14px 16px}\n.guidaio-v3 .faq summary{cursor:pointer;list-style:none;font-weight:700;color:var(--gv3-ink);display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:15px}\n.guidaio-v3 .faq summary::-webkit-details-marker{display:none}\n.guidaio-v3 .faq summary svg{color:var(--gv3-brand)}\n.guidaio-v3 .faq .ans{color:var(--gv3-muted);margin-top:10px;font-size:14px}\n.guidaio-v3 section.block.conclusion{background:radial-gradient(700px 320px at 0% 0%,rgba(124,99,255,.18),transparent 60%),linear-gradient(135deg,#1c163a 0%,#2c1d8a 100%);color:#fff;border-color:#2c1d8a}\n.guidaio-v3 section.block.conclusion .head h2{color:#fff}\n.guidaio-v3 section.block.conclusion .lead,.guidaio-v3 section.block.conclusion .rich p{color:rgba(255,255,255,.88)}\n.guidaio-v3 section.block.conclusion .rich strong,.guidaio-v3 section.block.conclusion .rich b{color:#fff}\n.guidaio-v3 section.block.conclusion .eyebrow{background:rgba(255,255,255,.14);color:#fff}\n.guidaio-v3 section.block.conclusion .btn-secondary{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.25)}\n@media (max-width:1080px){.guidaio-v3 .hero-grid,.guidaio-v3 .trust-grid,.guidaio-v3 .company-grid,.guidaio-v3 .setup-grid,.guidaio-v3 .availability{grid-template-columns:1fr}.guidaio-v3 .grid-3,.guidaio-v3 .res-grid,.guidaio-v3 .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}\n@media (max-width:700px){.guidaio-v3{padding:12px 8px 48px}.guidaio-v3 .hero{padding:20px}.guidaio-v3 section.block{padding:20px}.guidaio-v3 .grid-2,.guidaio-v3 .grid-3,.guidaio-v3 .res-grid,.guidaio-v3 .plan-grid,.guidaio-v3 .bestnot,.guidaio-v3 .availability{grid-template-columns:1fr}.guidaio-v3 h1.title{font-size:28px}}\n\u003c\/style\u003e\n\u003cdiv class=\"guidaio-v3\" itemscope itemtype=\"https:\/\/schema.org\/SoftwareApplication\"\u003e\n\u003cmeta itemprop=\"name\" content=\"Onlook: Open-Source Visual Code Editor for React Teams\"\u003e\n\u003cmeta itemprop=\"description\" content=\"Onlook is an open-source visual editor for real React and Tailwind codebases. AI edits your components on an infinite canvas. Free self-hosting, cloud in beta.\"\u003e\n\u003cdiv class=\"hero\"\u003e\u003cdiv class=\"hero-grid\"\u003e\n\u003cdiv\u003e\n\u003cdiv class=\"hero-head\"\u003e\n\u003cdiv class=\"logo-tile\"\u003e\u003cimg src=\"https:\/\/www.onlook.com\/favicon.ico?favicon.a259964c.ico\" alt=\"Onlook logo\" itemprop=\"image\" loading=\"lazy\"\u003e\u003c\/div\u003e\n\u003cdiv class=\"name-block\"\u003e\n\u003cspan class=\"eyebrow\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"m12 3-1.9 5.8a2 2 0 0 1-1.3 1.3L3 12l5.8 1.9a2 2 0 0 1 1.3 1.3L12 21l1.9-5.8a2 2 0 0 1 1.3-1.3L21 12l-5.8-1.9a2 2 0 0 1-1.3-1.3Z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Code Generation · Code Assistants\u003c\/span\u003e\u003ch1 class=\"title\" itemprop=\"name\"\u003eOnlook\u003c\/h1\u003e\n\u003cp class=\"lede justify\" itemprop=\"description\"\u003eOnlook is an open-source visual editor that lets designers edit real React and Tailwind components on an infinite canvas, with AI writing the code. Self-hosting is free; the hosted cloud version is in closed beta.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"badge-row\"\u003e\n\u003cspan class=\"badge warn\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"10\"\u003e\u003c\/circle\u003e\u003cpath d=\"m9 12 2 2 4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Beta\u003c\/span\u003e\u003cspan class=\"badge brand\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 12 20 22 4 22 4 12\"\u003e\u003c\/polyline\u003e\u003crect x=\"2\" y=\"7\" width=\"20\" height=\"5\"\u003e\u003c\/rect\u003e\u003cline x1=\"12\" y1=\"22\" x2=\"12\" y2=\"7\"\u003e\u003c\/line\u003e\u003cpath d=\"M12 7H7.5a2.5 2.5 0 0 1 0-5C11 2 12 7 12 7z\"\u003e\u003c\/path\u003e\u003cpath d=\"M12 7h4.5a2.5 2.5 0 0 0 0-5C13 2 12 7 12 7z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Free plan\u003c\/span\u003e\u003cspan class=\"badge\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"22 7 13.5 15.5 8.5 10.5 2 17\"\u003e\u003c\/polyline\u003e\u003cpolyline points=\"16 7 22 7 22 13\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e Contact Sales\u003c\/span\u003e\u003cspan class=\"badge\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\u003e\u003c\/path\u003e\u003cpath d=\"m2 22 3-3\"\u003e\u003c\/path\u003e\u003cpath d=\"M7.5 13.5 10 11\"\u003e\u003c\/path\u003e\u003cpath d=\"M10.5 16.5 13 14\"\u003e\u003c\/path\u003e\u003cpath d=\"m18 3-4 4h6l-4 4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e No public API\u003c\/span\u003e\u003cspan class=\"badge\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2\"\u003e\u003c\/path\u003e\u003ccircle cx=\"9\" cy=\"7\" r=\"4\"\u003e\u003c\/circle\u003e\u003cpolyline points=\"16 11 18 13 22 9\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e 13+\u003c\/span\u003e\u003cspan class=\"badge brand\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"10\"\u003e\u003c\/circle\u003e\u003cpath d=\"m9 12 2 2 4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Verified by Guidaio\u003c\/span\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"tbd-row\"\u003e\n\u003cdiv\u003e\n\u003cdiv class=\"label\"\u003eCategories\u003c\/div\u003e\n\u003cdiv class=\"chip-row\"\u003e\n\u003ca class=\"chip cat\" href=\"\/collections\/code-generation\"\u003eCode Generation\u003c\/a\u003e\u003ca class=\"chip cat\" href=\"\/collections\/code-assistants\"\u003eCode Assistants\u003c\/a\u003e\u003ca class=\"chip cat\" href=\"\/collections\/no-low-code\"\u003eNo Low Code\u003c\/a\u003e\u003ca class=\"chip cat\" href=\"\/collections\/mockups-generative-design\"\u003eMockups Generative Design\u003c\/a\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv\u003e\n\u003cdiv class=\"label\"\u003eTarget domains\u003c\/div\u003e\n\u003cdiv class=\"chip-row\"\u003e\n\u003ca class=\"chip dom\" href=\"\/collections\/design-creative\"\u003eDesign Creative\u003c\/a\u003e\u003ca class=\"chip dom\" href=\"\/collections\/it-software\"\u003eIt Software\u003c\/a\u003e\u003ca class=\"chip dom\" href=\"\/collections\/product-management\"\u003eProduct Management\u003c\/a\u003e\u003ca class=\"chip dom\" href=\"\/collections\/freelancers-entrepreneurs\"\u003eFreelancers Entrepreneurs\u003c\/a\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"cta-row\"\u003e\n\u003ca class=\"btn btn-primary\" href=\"https:\/\/www.onlook.com\" target=\"_blank\" rel=\"noopener\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"16\" height=\"16\"\u003e\u003cpath d=\"M15 3h6v6\"\u003e\u003c\/path\u003e\u003cpath d=\"M10 14 21 3\"\u003e\u003c\/path\u003e\u003cpath d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Discover Onlook\u003c\/a\u003e\u003ca class=\"btn btn-secondary\" href=\"https:\/\/meetings.hubspot.com\/daniel-onlook\/onboarding-to-onlook-with-daniel\" target=\"_blank\" rel=\"noopener\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolygon points=\"6 3 20 12 6 21 6 3\"\u003e\u003c\/polygon\u003e\u003c\/svg\u003e Join the waitlist\u003c\/a\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003caside class=\"snapshot\"\u003e\u003ch3\u003eSnapshot\u003c\/h3\u003e\n\u003cdl\u003e\n\u003cdiv class=\"row\"\u003e\n\u003cdt\u003ePricing model\u003c\/dt\u003e\n\u003cdd\u003eContact Sales\u003c\/dd\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"row\"\u003e\n\u003cdt\u003eFree plan\u003c\/dt\u003e\n\u003cdd\u003eYes\u003c\/dd\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"row\"\u003e\n\u003cdt\u003eAPI available\u003c\/dt\u003e\n\u003cdd\u003eNo\u003c\/dd\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"row\"\u003e\n\u003cdt\u003eDeployment\u003c\/dt\u003e\n\u003cdd\u003eWeb app\u003c\/dd\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"row\"\u003e\n\u003cdt\u003eLanguages\u003c\/dt\u003e\n\u003cdd\u003eEnglish\u003c\/dd\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"row\"\u003e\n\u003cdt\u003eTool status\u003c\/dt\u003e\n\u003cdd\u003eBeta\u003c\/dd\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"row\"\u003e\n\u003cdt\u003eMinimum age\u003c\/dt\u003e\n\u003cdd\u003e13+\u003c\/dd\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"row\"\u003e\n\u003cdt\u003eCountry of origin\u003c\/dt\u003e\n\u003cdd\u003e🇺🇸 United States\u003c\/dd\u003e\n\u003c\/div\u003e\n\u003c\/dl\u003e\u003c\/aside\u003e\n\u003c\/div\u003e\u003c\/div\u003e\n\u003cnav class=\"toc\" aria-label=\"Page sections\"\u003e\u003ca href=\"#what\"\u003eWhat is it\u003c\/a\u003e\u003ca href=\"#bestnot\"\u003eWhen to use Onlook \/ When not to\u003c\/a\u003e\u003ca href=\"#how\"\u003eHow to use\u003c\/a\u003e\u003ca href=\"#proscons\"\u003ePros \u0026amp; Cons\u003c\/a\u003e\u003ca href=\"#pricing\"\u003ePricing\u003c\/a\u003e\u003ca href=\"#trust\"\u003eTrust \u0026amp; Privacy\u003c\/a\u003e\u003ca href=\"#watch\"\u003eWatch-outs\u003c\/a\u003e\u003ca href=\"#setup\"\u003eSetup \u0026amp; Integrations\u003c\/a\u003e\u003ca href=\"#company\"\u003eCompany\u003c\/a\u003e\u003ca href=\"#resources\"\u003eResources\u003c\/a\u003e\u003ca href=\"#alternatives\"\u003eAlternatives\u003c\/a\u003e\u003ca href=\"#faq\"\u003eFAQ\u003c\/a\u003e\u003ca href=\"#conclusion\"\u003eConclusion\u003c\/a\u003e\u003c\/nav\u003e\n\u003csection class=\"block\" id=\"what\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003eOverview\u003c\/span\u003e\u003ch2\u003eWhat is Onlook?\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"grid-2\"\u003e\n\u003cdiv class=\"rich justify\"\u003e\n\u003cp\u003eOnlook is an open-source visual editor for teams that build their product in React. Instead of working in a separate design file, designers open their own repository and get an infinite canvas showing the components their engineers already maintain. Every change made on that canvas is written into the real source files, so what appears on screen is the product rather than a picture of it. The company sums this up as the \u003cb\u003eCursor for Designers\u003c\/b\u003e.\u003c\/p\u003e\n\u003cp\u003eThe editor combines direct manipulation with AI. Elements can be dragged, resized, rearranged and restyled visually while Onlook generates the matching Tailwind classes. A chat panel sits alongside the canvas, so a change can also be described in natural language and applied to the components by the model. A layer panel exposes the React component tree for precise selection, a theming system centralises colour palettes, typography and design tokens, and an automatic version history with branching lets a team roll back an experiment. The tool reads the Storybook a team already keeps, works with shadcn\/ui components, and exposes a read-write MCP across canvas, components, tokens and code.\u003c\/p\u003e\n\u003cp\u003eIt is deliberately narrow about its scope. Onlook expects an existing React project, on Next.js, Vite, Remix, Astro or Create React App, styled with Tailwind or plain CSS. The company states plainly that it is not a no-code website builder, not a prompt-to-prototype generator and not a parallel design surface that drifts from production. There is no proprietary file format either: a team that stops using Onlook keeps everything, because the code never left its repository.\u003c\/p\u003e\n\u003cp\u003eThe project is published by \u003cb\u003eOn Off, Inc.\u003c\/b\u003e, a three-person company founded in Cincinnati, Ohio, then remote between Cincinnati and New York, and now based in San Francisco after the Y Combinator Winter 2025 batch. The repository has drawn more than twenty-six thousand stars and around a hundred contributors. Two routes exist: self-host it for nothing from GitHub, or use the hosted cloud version, which at the time of this review is in \u003cb\u003eclosed beta\u003c\/b\u003e behind a waitlist, with pricing quoted per team on request.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv\u003e\n\u003ch3 style=\"font-size:14px;margin-bottom:12px;color:var(--gv3-brand-ink);text-transform:uppercase;letter-spacing:.08em\"\u003eWhat it does\u003c\/h3\u003e\n\u003cul class=\"brand-list\"\u003e\n\u003cli\u003eEdit real React components visually in the browser, with every change written into the source files\u003c\/li\u003e\n\u003cli\u003eDescribe a change in plain language and let the AI apply it to the actual codebase\u003c\/li\u003e\n\u003cli\u003eImport an existing React repository and start editing without refactoring anything\u003c\/li\u003e\n\u003cli\u003eManage colour palettes, typography and design tokens from one central place\u003c\/li\u003e\n\u003cli\u003eNavigate the React component tree through a visual layer panel\u003c\/li\u003e\n\u003cli\u003eRoll back to any earlier snapshot from the automatic version history\u003c\/li\u003e\n\u003cli\u003ePublish the result and attach a custom domain\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/section\u003e\n\u003csection class=\"block soft\" id=\"bestnot\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003eAudience\u003c\/span\u003e\u003ch2\u003eWhen to use Onlook \/ When not to\u003c\/h2\u003e\n\u003cp class=\"lead\"\u003eA quick filter to help you decide if Onlook is the right fit.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"bestnot\"\u003e\n\u003cdiv class=\"card for\"\u003e\n\u003ch3\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"16\" height=\"16\"\u003e\u003cpath d=\"M7 10v12\"\u003e\u003c\/path\u003e\u003cpath d=\"M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e When to use Onlook\u003c\/h3\u003e\n\u003cul class=\"brand-list\"\u003e\n\u003cli\u003eProduct designers and UI designers who own how a React product actually looks and feels\u003c\/li\u003e\n\u003cli\u003eDesign engineers and design technologists working inside a design system their team maintains\u003c\/li\u003e\n\u003cli\u003eFrontend engineers who care about component architecture and the quality of generated code\u003c\/li\u003e\n\u003cli\u003eStartup founders and design leaders who want a small team to ship more without more headcount\u003c\/li\u003e\n\u003cli\u003eFreelance designers and agency principals delivering React sites for their clients\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"card not\"\u003e\n\u003ch3\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"16\" height=\"16\"\u003e\u003cpath d=\"M17 14V2\"\u003e\u003c\/path\u003e\u003cpath d=\"M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e When not to use Onlook\u003c\/h3\u003e\n\u003cul class=\"brand-list\"\u003e\n\u003cli\u003eTeams whose product is not a React codebase, since Vue, Svelte, Angular and server-rendered stacks are out of scope\u003c\/li\u003e\n\u003cli\u003eAnyone looking for a no-code website builder, which the company explicitly states Onlook is not\u003c\/li\u003e\n\u003cli\u003eUsers who want a prompt-to-prototype generator producing throwaway artefacts detached from a repository\u003c\/li\u003e\n\u003cli\u003eBuyers who need a published price today, as the hosted edition has none and access runs through a waitlist\u003c\/li\u003e\n\u003cli\u003eOrganisations with strict GDPR procurement rules, since no framework, DPA or hosting location is documented\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/section\u003e\n\u003csection class=\"block soft\" id=\"how\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003eGet started\u003c\/span\u003e\u003ch2\u003eHow to use Onlook\u003c\/h2\u003e\n\u003cp class=\"lead\"\u003eA typical end-to-end flow, from setup to results.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003col class=\"steps\"\u003e\n\u003cli\u003eDecide between the free self-hosted route and the hosted cloud version\u003c\/li\u003e\n\u003cli\u003eFor the cloud version, join the waitlist on the site or book a demo with the team\u003c\/li\u003e\n\u003cli\u003eFor self-hosting, take the onlook-dev\/onlook repository and follow the self-hosting guide in the documentation\u003c\/li\u003e\n\u003cli\u003eSign in at app.onlook.com, using Google or GitHub authentication\u003c\/li\u003e\n\u003cli\u003eCreate a new project, or import an existing React codebase from your code host\u003c\/li\u003e\n\u003cli\u003eOpen the infinite canvas and let Onlook load the components your team already maintains\u003c\/li\u003e\n\u003cli\u003eSelect an element on the canvas to edit it directly, or drag and drop to rearrange the layout\u003c\/li\u003e\n\u003cli\u003eUse the AI chat to describe a change in plain language and watch it land in the code\u003c\/li\u003e\n\u003cli\u003eSet your palettes, typography and design tokens once so the whole project stays consistent\u003c\/li\u003e\n\u003cli\u003ePublish the project with a custom domain, or hand the work back to engineering through the repository\u003c\/li\u003e\n\u003c\/ol\u003e\u003c\/section\u003e\n\u003csection class=\"block\" id=\"proscons\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003eQuick read\u003c\/span\u003e\u003ch2\u003ePros \u0026amp; Cons\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"grid-2\"\u003e\n\u003cdiv class=\"pc pros\"\u003e\n\u003ch3\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"10\"\u003e\u003c\/circle\u003e\u003cpath d=\"m9 12 2 2 4-4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Pros\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003eOpen source and free to self-host, from a repository that is publicly and visibly active\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003eNo proprietary file format: the code stays in your repository and needs no export step\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003eWorks on the real codebase, so the canvas cannot drift away from what actually ships\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003eThe terms explicitly leave ownership of user data and generated code with the customer\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003eAn AI training opt-out is written into the terms rather than left to goodwill\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003eReuses the Storybook and shadcn\/ui components a team already maintains\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003ePublic documentation, an open Discord community and strong public traction\u003c\/span\u003e\n\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"pc cons\"\u003e\n\u003ch3\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"16\" height=\"16\"\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"10\"\u003e\u003c\/circle\u003e\u003cline x1=\"4.93\" y1=\"4.93\" x2=\"19.07\" y2=\"19.07\"\u003e\u003c\/line\u003e\u003c\/svg\u003e Cons\u003c\/h3\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\u003e\u003c\/line\u003e\u003cline x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\u003e\u003c\/line\u003e\u003c\/svg\u003e \u003cspan\u003eThe hosted version is in closed beta, with access through a waitlist or a sales demo\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\u003e\u003c\/line\u003e\u003cline x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\u003e\u003c\/line\u003e\u003c\/svg\u003e \u003cspan\u003eNo public price at all, team pricing being described only as tailored to each customer\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\u003e\u003c\/line\u003e\u003cline x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\u003e\u003c\/line\u003e\u003c\/svg\u003e \u003cspan\u003eNo GDPR mention anywhere, no Article 27 representative, no DPA and no subprocessor list\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\u003e\u003c\/line\u003e\u003cline x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\u003e\u003c\/line\u003e\u003c\/svg\u003e \u003cspan\u003eNothing published about data retention periods or about where customer data is hosted\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\u003e\u003c\/line\u003e\u003cline x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\u003e\u003c\/line\u003e\u003c\/svg\u003e \u003cspan\u003eAI training on user data is the default, and the opt-out must be set before any data is supplied\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\u003e\u003c\/line\u003e\u003cline x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\u003e\u003c\/line\u003e\u003c\/svg\u003e \u003cspan\u003eRequires an existing React project, which puts every other framework out of reach\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"18\" y1=\"6\" x2=\"6\" y2=\"18\"\u003e\u003c\/line\u003e\u003cline x1=\"6\" y1=\"6\" x2=\"18\" y2=\"18\"\u003e\u003c\/line\u003e\u003c\/svg\u003e \u003cspan\u003eNo public API, no mobile application, and a team of three people according to the site\u003c\/span\u003e\n\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/section\u003e\n\u003csection class=\"block soft\" id=\"pricing\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003ePricing\u003c\/span\u003e\u003ch2\u003ePricing \u0026amp; Plans\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cp class=\"rich justify\" style=\"color:var(--gv3-ink-2);margin:0 0 18px;max-width:80ch\"\u003eOnlook publishes no price. The open-source edition can be self-hosted at no cost from the public GitHub repository, and this is the only free route the site confirms. The hosted cloud version is in closed beta and is described as custom pricing tailored to each team, obtained by contacting the company or booking a demo. The Terms of Use state that fees are invoiced annually in advance in United States dollars and payable within thirty days, and the FAQ adds that payment is taken by card through Stripe. No free trial is advertised and no entry-level amount is published.\u003c\/p\u003e\n\u003cdiv class=\"plan-grid\"\u003e\n\u003cdiv class=\"plan\"\u003e\n\u003cdiv class=\"pname\"\u003eSelf-hosted\u003c\/div\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003efree\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003einstalled from the open-source GitHub repository\u003c\/span\u003e\n\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"plan featured\"\u003e\n\u003cspan class=\"pill\"\u003eMost popular\u003c\/span\u003e\u003cdiv class=\"pname\"\u003eHosted cloud (closed beta)\u003c\/div\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003eaccess by waitlist or demo booking\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003eprice not published\u003c\/span\u003e\n\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"plan\"\u003e\n\u003cdiv class=\"pname\"\u003eFor Teams\u003c\/div\u003e\n\u003cul\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003ecustom pricing on request\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003eadding project templates\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003ebranching and version control\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003ecentralised theming and branding\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003eReact component tree navigation\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003eand advanced security with SSO (SAML\/OAuth)\u003c\/span\u003e\n\u003c\/li\u003e\n\u003cli\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e \u003cspan\u003eaudit logs and admin controls\u003c\/span\u003e\n\u003c\/li\u003e\n\u003c\/ul\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"pricing-extras\"\u003e\u003cdiv class=\"affiliate-note\"\u003ePrices and plans listed above may evolve. Always check the official pricing page before subscribing.\u003c\/div\u003e\u003c\/div\u003e\u003c\/section\u003e\n\u003csection class=\"block\" id=\"trust\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003eTrust \u0026amp; Privacy\u003c\/span\u003e\u003ch2\u003eData, GDPR \u0026amp; hosting\u003c\/h2\u003e\n\u003cp class=\"lead\"\u003eA consolidated view of how Onlook handles your data.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"trust-grid\"\u003e\n\u003cdiv class=\"col\"\u003e\n\u003cdiv class=\"trust-card\"\u003e\n\u003ch3\u003eGDPR overview\u003c\/h3\u003e\n\u003cp class=\"justify\" style=\"color:var(--gv3-ink-2);margin:0\"\u003eThere is no GDPR framework on this site. A search across every page collected, including the machine-readable files, returns not one occurrence of the GDPR, of a lawful basis, of a data protection officer or of an Article 27 representative. The privacy policy, effective 8 November 2024, details United States rights only: California Civil Code sections 1798.83 to 1798.84, and the Nevada statement that personal data is not sold. The Terms of Use place the agreement under the law of the State of New York. No data processing agreement is published or offered, no subprocessor list exists, and no hosting jurisdiction is named. This is silence rather than an explicit refusal of compliance, but for a European buyer it means the expected documents are simply absent.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"trust-card\"\u003e\n\u003ch3\u003eWho owns the data?\u003c\/h3\u003e\n\u003cp class=\"justify\" style=\"color:var(--gv3-ink-2);margin:0 0 12px\"\u003eOnlook's Terms of Use draw a clear line. Section 5(a) leaves all right, title and interest in uploaded User Data with the customer, intellectual property rights included. Section 3 keeps ownership of the Onlook service itself, its software, interfaces and documentation with the publisher, On Off, Inc. What the customer builds stays the customer's: the site states that code produced with Onlook can be exported locally, published to GitHub or hosted at a link, and that no proprietary file format is involved. Feedback is the one exception, since suggestions sent to Onlook may be used freely and with no accounting back to their author.\u003c\/p\u003e\n\u003ch3\u003eReuse rights\u003c\/h3\u003e\n\u003cp class=\"justify\" style=\"color:var(--gv3-ink-2);margin:0\"\u003eUsers may reuse everything they produce without asking permission: the code stays in their own repository, there is no proprietary format and no export step, and the site confirms the work remains theirs if they stop using the product. On the vendor's side, section 5(c) of the terms lets Onlook use and modify User Data to run and improve the service and, unless the customer opts out through the user settings before supplying that data, to develop and commercialise AI models, algorithms and tools, model training included. Section 5(d) allows platform telemetry to be exploited for any internal purpose, provided it excludes User Data and is never disclosed in an identifying way. The terms also ask users not to send personal, financial or health information beyond what registration requires.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"trust-card\"\u003e\n\u003ch3\u003eData retention \u0026amp; training\u003c\/h3\u003e\n\u003cdiv class=\"kv\"\u003e\n\u003cdiv class=\"k\"\u003eRetention summary\u003c\/div\u003e\n\u003cdiv class=\"v justify\"\u003eOnlook publishes no retention rules. Neither the privacy policy nor the Terms of Use states how long account data, project data or prompts are kept, and neither describes anonymisation or a deletion procedure a user can trigger. A search across every page collected returns no retention clause at all. The single deletion commitment concerns children: if the company learns it has collected personal data from a child under thirteen, it undertakes to delete that information as quickly as possible. The terms also allow Onlook to suspend or terminate access at its sole discretion where it suspects a breach, without saying what becomes of the data afterwards. Anything more precise would have to be requested from the company.\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"kv\"\u003e\n\u003cdiv class=\"k\"\u003eTrains on customer data\u003c\/div\u003e\n\u003cdiv class=\"v\"\u003e\u003cspan class=\"badge warn\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Configurable\u003c\/span\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"kv\"\u003e\n\u003cdiv class=\"k\"\u003eTraining opt-out available\u003c\/div\u003e\n\u003cdiv class=\"v\"\u003e\u003cspan class=\"badge ok\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolyline points=\"20 6 9 17 4 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e Yes\u003c\/span\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"col\"\u003e\u003cdiv class=\"trust-card\"\u003e\n\u003ch3\u003eHosting summary\u003c\/h3\u003e\n\u003cp class=\"justify\" style=\"color:var(--gv3-ink-2);margin:0 0 14px\"\u003eOnlook publishes nothing about where customer data is hosted. Neither the privacy policy nor the Terms of Use names a country, a region or a cloud provider, and the policy refers only to unnamed hosting, technology and communication providers among its service providers. There is no trust or security page, the complete sitemap listing sixteen URLs and containing none, and no subprocessor list, so the hosting chain cannot be reconstructed from public documents. The only third party named anywhere is Stripe, Inc., for payment data. Teams that need to control this can sidestep the question entirely, since the open-source edition is self-hosted and puts the hosting jurisdiction back in the customer's hands. For the hosted cloud version, the information would have to be requested directly from the company. As a technical note carrying no contractual weight, the marketing domain itself resolves to an anycast address on Amazon infrastructure, which describes the website and not the place where customer projects are stored.\u003c\/p\u003e\n\u003c\/div\u003e\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/section\u003e\n\u003csection class=\"block watch\" id=\"watch\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003eWatch-outs\u003c\/span\u003e\u003ch2\u003eThings to keep in mind\u003c\/h2\u003e\n\u003cp class=\"lead\"\u003eRisks and trade-offs to weigh before adopting Onlook.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cul class=\"brand-list\" style=\"grid-template-columns:repeat(2,1fr);display:grid;gap:12px 24px\"\u003e\n\u003cli\u003eYour work feeds the models by default: the terms allow AI training on user data unless you opt out in the settings before supplying anything, so set that switch on day one rather than after the first project.\u003c\/li\u003e\n\u003cli\u003eNo retention period is published, so you cannot tell how long projects, prompts and account data stay on Onlook's servers, nor what becomes of them once access ends.\u003c\/li\u003e\n\u003cli\u003eNothing on the site says where data is hosted, which leaves a team with residency obligations without an answer to give its own compliance function.\u003c\/li\u003e\n\u003cli\u003eThe GDPR is never mentioned, so a European organisation would have to request a DPA, a subprocessor list and an Article 27 representative, none of which are published.\u003c\/li\u003e\n\u003cli\u003eA visual editor that writes code invites shipping changes nobody read: treat what Onlook produces like any other pull request and keep human review in the loop.\u003c\/li\u003e\n\u003cli\u003eSkill erosion is a real cost, as designers who only ever describe changes in natural language may stop learning the CSS and component patterns they need when the AI gets it wrong.\u003c\/li\u003e\n\u003cli\u003eClosed beta and a stated team of three mean roadmap, pricing and the service itself can change quickly, and the open-source repository is the only fallback if the hosted product moves away from you.\u003c\/li\u003e\n\u003c\/ul\u003e\u003c\/section\u003e\n\u003csection class=\"block\" id=\"setup\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003eSetup\u003c\/span\u003e\u003ch2\u003eSetup \u0026amp; Integrations\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"setup-grid\"\u003e\n\u003cdiv class=\"setup-card\"\u003e\n\u003ch3 style=\"font-size:15px;margin-bottom:10px\"\u003eTechnical difficulty\u003c\/h3\u003e\n\u003cp class=\"justify\" style=\"color:var(--gv3-ink-2);margin:0 0 14px\"\u003eTwo very different levels. The hosted version is meant to require no coding: create an account, start a project, and follow the step-by-step guide, the site claiming it helps you code without knowing anything about code. Importing an existing repository is a matter of connecting your code host. Self-hosting is another matter, running from the GitHub repository and its dedicated guide, and expecting developer skills. In both cases the prerequisite is real: a React project on Next.js, Vite, Remix, Astro or Create React App, styled with Tailwind or plain CSS.\u003c\/p\u003e\n\u003ch3 style=\"font-size:15px;margin:14px 0 10px\"\u003eDeployment\u003c\/h3\u003e\n\u003cdiv class=\"flag-row\"\u003e\u003cspan class=\"flag\"\u003eWeb app\u003c\/span\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"setup-card\"\u003e\n\u003ch3 style=\"font-size:15px;margin-bottom:10px\"\u003eIntegrations\u003c\/h3\u003e\n\u003cdiv class=\"integrations\"\u003e\n\u003cspan class=\"integration\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\u003e\u003c\/path\u003e\u003cpath d=\"m2 22 3-3\"\u003e\u003c\/path\u003e\u003cpath d=\"M7.5 13.5 10 11\"\u003e\u003c\/path\u003e\u003cpath d=\"M10.5 16.5 13 14\"\u003e\u003c\/path\u003e\u003cpath d=\"m18 3-4 4h6l-4 4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e GitHub\u003c\/span\u003e\u003cspan class=\"integration\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\u003e\u003c\/path\u003e\u003cpath d=\"m2 22 3-3\"\u003e\u003c\/path\u003e\u003cpath d=\"M7.5 13.5 10 11\"\u003e\u003c\/path\u003e\u003cpath d=\"M10.5 16.5 13 14\"\u003e\u003c\/path\u003e\u003cpath d=\"m18 3-4 4h6l-4 4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e React\u003c\/span\u003e\u003cspan class=\"integration\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\u003e\u003c\/path\u003e\u003cpath d=\"m2 22 3-3\"\u003e\u003c\/path\u003e\u003cpath d=\"M7.5 13.5 10 11\"\u003e\u003c\/path\u003e\u003cpath d=\"M10.5 16.5 13 14\"\u003e\u003c\/path\u003e\u003cpath d=\"m18 3-4 4h6l-4 4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Next.js\u003c\/span\u003e\u003cspan class=\"integration\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\u003e\u003c\/path\u003e\u003cpath d=\"m2 22 3-3\"\u003e\u003c\/path\u003e\u003cpath d=\"M7.5 13.5 10 11\"\u003e\u003c\/path\u003e\u003cpath d=\"M10.5 16.5 13 14\"\u003e\u003c\/path\u003e\u003cpath d=\"m18 3-4 4h6l-4 4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Vite\u003c\/span\u003e\u003cspan class=\"integration\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\u003e\u003c\/path\u003e\u003cpath d=\"m2 22 3-3\"\u003e\u003c\/path\u003e\u003cpath d=\"M7.5 13.5 10 11\"\u003e\u003c\/path\u003e\u003cpath d=\"M10.5 16.5 13 14\"\u003e\u003c\/path\u003e\u003cpath d=\"m18 3-4 4h6l-4 4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Remix\u003c\/span\u003e\u003cspan class=\"integration\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\u003e\u003c\/path\u003e\u003cpath d=\"m2 22 3-3\"\u003e\u003c\/path\u003e\u003cpath d=\"M7.5 13.5 10 11\"\u003e\u003c\/path\u003e\u003cpath d=\"M10.5 16.5 13 14\"\u003e\u003c\/path\u003e\u003cpath d=\"m18 3-4 4h6l-4 4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Astro\u003c\/span\u003e\u003cspan class=\"integration\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\u003e\u003c\/path\u003e\u003cpath d=\"m2 22 3-3\"\u003e\u003c\/path\u003e\u003cpath d=\"M7.5 13.5 10 11\"\u003e\u003c\/path\u003e\u003cpath d=\"M10.5 16.5 13 14\"\u003e\u003c\/path\u003e\u003cpath d=\"m18 3-4 4h6l-4 4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Tailwind CSS\u003c\/span\u003e\u003cspan class=\"integration\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\u003e\u003c\/path\u003e\u003cpath d=\"m2 22 3-3\"\u003e\u003c\/path\u003e\u003cpath d=\"M7.5 13.5 10 11\"\u003e\u003c\/path\u003e\u003cpath d=\"M10.5 16.5 13 14\"\u003e\u003c\/path\u003e\u003cpath d=\"m18 3-4 4h6l-4 4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Storybook\u003c\/span\u003e\u003cspan class=\"integration\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\u003e\u003c\/path\u003e\u003cpath d=\"m2 22 3-3\"\u003e\u003c\/path\u003e\u003cpath d=\"M7.5 13.5 10 11\"\u003e\u003c\/path\u003e\u003cpath d=\"M10.5 16.5 13 14\"\u003e\u003c\/path\u003e\u003cpath d=\"m18 3-4 4h6l-4 4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Shadcn\/ui\u003c\/span\u003e\u003cspan class=\"integration\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\u003e\u003c\/path\u003e\u003cpath d=\"m2 22 3-3\"\u003e\u003c\/path\u003e\u003cpath d=\"M7.5 13.5 10 11\"\u003e\u003c\/path\u003e\u003cpath d=\"M10.5 16.5 13 14\"\u003e\u003c\/path\u003e\u003cpath d=\"m18 3-4 4h6l-4 4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Stripe\u003c\/span\u003e\u003cspan class=\"integration\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M6.3 20.3a2.4 2.4 0 0 0 3.4 0L12 18l-6-6-2.3 2.3a2.4 2.4 0 0 0 0 3.4Z\"\u003e\u003c\/path\u003e\u003cpath d=\"m2 22 3-3\"\u003e\u003c\/path\u003e\u003cpath d=\"M7.5 13.5 10 11\"\u003e\u003c\/path\u003e\u003cpath d=\"M10.5 16.5 13 14\"\u003e\u003c\/path\u003e\u003cpath d=\"m18 3-4 4h6l-4 4\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Google\u003c\/span\u003e\n\u003c\/div\u003e\n\u003ch3 style=\"font-size:15px;margin:14px 0 10px\"\u003eSupported languages\u003c\/h3\u003e\n\u003cdiv class=\"flag-row\"\u003e\u003cspan class=\"flag\"\u003eEnglish\u003c\/span\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/section\u003e\n\u003csection class=\"block soft\" id=\"company\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003eCompany\u003c\/span\u003e\u003ch2\u003eBehind Onlook\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"company-grid\"\u003e\n\u003cdiv class=\"company-card\"\u003e\n\u003cdiv class=\"kv\"\u003e\n\u003cdiv class=\"k\"\u003eCompany name\u003c\/div\u003e\n\u003cdiv class=\"v\"\u003e\u003cb\u003eOn Off, Inc.\u003c\/b\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"kv\"\u003e\n\u003cdiv class=\"k\"\u003eFounded\u003c\/div\u003e\n\u003cdiv class=\"v\"\u003e11\/02\/1998\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"kv\"\u003e\n\u003cdiv class=\"k\"\u003eCountry of origin\u003c\/div\u003e\n\u003cdiv class=\"v\"\u003e🇺🇸 United States\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"kv\"\u003e\n\u003cdiv class=\"k\"\u003eUBO\u003c\/div\u003e\n\u003cdiv class=\"v\"\u003eDaniel Farrell, Kiet Ho\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"kv\"\u003e\n\u003cdiv class=\"k\"\u003eUBO country\u003c\/div\u003e\n\u003cdiv class=\"v\"\u003e🇺🇸 United States\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"kv\"\u003e\n\u003cdiv class=\"k\"\u003eDomain registrar country\u003c\/div\u003e\n\u003cdiv class=\"v\"\u003e🇺🇸 United States\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"kv\"\u003e\n\u003cdiv class=\"k\"\u003eLegal contact\u003c\/div\u003e\n\u003cdiv class=\"v\"\u003e\u003ca href=\"mailto:contact@onlook.com\"\u003econtact@onlook.com\u003c\/a\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"kv\"\u003e\n\u003cdiv class=\"k\"\u003eSupport contact\u003c\/div\u003e\n\u003cdiv class=\"v\"\u003e\u003ca href=\"mailto:contact@onlook.com\"\u003econtact@onlook.com\u003c\/a\u003e\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv style=\"display:grid;gap:14px\"\u003e\n\u003cdiv class=\"company-card\"\u003e\n\u003ch3 style=\"font-size:15px;margin-bottom:10px\"\u003eFundraising\u003c\/h3\u003e\n\u003cdiv class=\"timeline\"\u003e\n\u003cdiv class=\"ev\"\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"\u003e\u003c\/path\u003e\u003cpath d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"\u003e\u003c\/path\u003e\u003cpath d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\"\u003e\u003c\/path\u003e\u003cpath d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Y Combinator, Winter 2025 batch: the site displays a YC W25 badge on its features page, repeats it in llms.txt, and describes moving to San Francisco after the batch\u003c\/div\u003e\n\u003cdiv class=\"ev\"\u003e\n\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z\"\u003e\u003c\/path\u003e\u003cpath d=\"m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z\"\u003e\u003c\/path\u003e\u003cpath d=\"M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0\"\u003e\u003c\/path\u003e\u003cpath d=\"M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5\"\u003e\u003c\/path\u003e\u003c\/svg\u003e No funding round, amount or investor is disclosed anywhere on the site\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"company-card\"\u003e\n\u003ch3 style=\"font-size:15px;margin-bottom:10px\"\u003eSocial\u003c\/h3\u003e\n\u003cdiv class=\"social-row\"\u003e\n\u003ca class=\"social\" href=\"https:\/\/www.linkedin.com\/company\/onlook-dev\/\" target=\"_blank\" rel=\"noopener\" aria-label=\"LinkedIn\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"18\" height=\"18\"\u003e\u003cpath d=\"M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z\"\u003e\u003c\/path\u003e\u003crect x=\"2\" y=\"9\" width=\"4\" height=\"12\"\u003e\u003c\/rect\u003e\u003ccircle cx=\"4\" cy=\"4\" r=\"2\"\u003e\u003c\/circle\u003e\u003c\/svg\u003e\u003c\/a\u003e\u003ca class=\"social\" href=\"https:\/\/www.youtube.com\/@onlookdev\" target=\"_blank\" rel=\"noopener\" aria-label=\"YouTube\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"18\" height=\"18\"\u003e\u003cpath d=\"M22.54 6.42a2.78 2.78 0 0 0-1.94-2C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 2A29 29 0 0 0 1 11.75a29 29 0 0 0 .46 5.33A2.78 2.78 0 0 0 3.4 19c1.72.46 8.6.46 8.6.46s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-2 29 29 0 0 0 .46-5.25 29 29 0 0 0-.46-5.33z\"\u003e\u003c\/path\u003e\u003cpolygon points=\"9.75 15.02 15.5 11.75 9.75 8.48 9.75 15.02\"\u003e\u003c\/polygon\u003e\u003c\/svg\u003e\u003c\/a\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/section\u003e\n\u003csection class=\"block\" id=\"resources\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003eOfficial links\u003c\/span\u003e\u003ch2\u003eResources\u003c\/h2\u003e\n\u003cp class=\"lead\"\u003eAll the official URLs gathered for verification and reference.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"res-grid\"\u003e\n\u003ca class=\"res\" href=\"https:\/\/www.onlook.com\" target=\"_blank\" rel=\"noopener\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"10\"\u003e\u003c\/circle\u003e\u003cpath d=\"M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20\"\u003e\u003c\/path\u003e\u003cpath d=\"M2 12h20\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003cdiv class=\"res-text\"\u003e\n\u003cdiv\u003eHomepage\u003c\/div\u003e\n\u003cdiv class=\"url\"\u003ewww.onlook.com\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/a\u003e\u003ca class=\"res\" href=\"https:\/\/www.onlook.com\/pricing\" target=\"_blank\" rel=\"noopener\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"12\" y1=\"2\" x2=\"12\" y2=\"22\"\u003e\u003c\/line\u003e\u003cpath d=\"M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003cdiv class=\"res-text\"\u003e\n\u003cdiv\u003ePricing\u003c\/div\u003e\n\u003cdiv class=\"url\"\u003ewww.onlook.com\/pricing\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/a\u003e\u003ca class=\"res\" href=\"https:\/\/www.onlook.com\/features\" target=\"_blank\" rel=\"noopener\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolygon points=\"12 2 2 7 12 12 22 7 12 2\"\u003e\u003c\/polygon\u003e\u003cpolyline points=\"2 17 12 22 22 17\"\u003e\u003c\/polyline\u003e\u003cpolyline points=\"2 12 12 17 22 12\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e\u003cdiv class=\"res-text\"\u003e\n\u003cdiv\u003eFeatures\u003c\/div\u003e\n\u003cdiv class=\"url\"\u003ewww.onlook.com\/features\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/a\u003e\u003ca class=\"res\" href=\"https:\/\/www.onlook.com\/about\" target=\"_blank\" rel=\"noopener\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003ccircle cx=\"12\" cy=\"12\" r=\"10\"\u003e\u003c\/circle\u003e\u003cline x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\"\u003e\u003c\/line\u003e\u003cline x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\"\u003e\u003c\/line\u003e\u003c\/svg\u003e\u003cdiv class=\"res-text\"\u003e\n\u003cdiv\u003eAbout\u003c\/div\u003e\n\u003cdiv class=\"url\"\u003ewww.onlook.com\/about\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/a\u003e\u003ca class=\"res\" href=\"https:\/\/meetings.hubspot.com\/daniel-onlook\/onboarding-to-onlook-with-daniel\" target=\"_blank\" rel=\"noopener\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolygon points=\"6 3 20 12 6 21 6 3\"\u003e\u003c\/polygon\u003e\u003c\/svg\u003e\u003cdiv class=\"res-text\"\u003e\n\u003cdiv\u003eDemo\u003c\/div\u003e\n\u003cdiv class=\"url\"\u003emeetings.hubspot.com\/daniel-onlook\/onboarding-to-onlook-with-daniel\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/a\u003e\u003ca class=\"res\" href=\"https:\/\/www.onlook.com\/terms-of-service\" target=\"_blank\" rel=\"noopener\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z\"\u003e\u003c\/path\u003e\u003cpolyline points=\"14 2 14 8 20 8\"\u003e\u003c\/polyline\u003e\u003cline x1=\"16\" y1=\"13\" x2=\"8\" y2=\"13\"\u003e\u003c\/line\u003e\u003cline x1=\"16\" y1=\"17\" x2=\"8\" y2=\"17\"\u003e\u003c\/line\u003e\u003cpolyline points=\"10 9 9 9 8 9\"\u003e\u003c\/polyline\u003e\u003c\/svg\u003e\u003cdiv class=\"res-text\"\u003e\n\u003cdiv\u003eTerms\u003c\/div\u003e\n\u003cdiv class=\"url\"\u003ewww.onlook.com\/terms-of-service\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/a\u003e\u003ca class=\"res\" href=\"https:\/\/www.onlook.com\/privacy-policy\" target=\"_blank\" rel=\"noopener\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpath d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\"\u003e\u003c\/path\u003e\u003c\/svg\u003e\u003cdiv class=\"res-text\"\u003e\n\u003cdiv\u003ePrivacy policy\u003c\/div\u003e\n\u003cdiv class=\"url\"\u003ewww.onlook.com\/privacy-policy\u003c\/div\u003e\n\u003c\/div\u003e\u003c\/a\u003e\n\u003c\/div\u003e\u003c\/section\u003e\n\u003csection class=\"block soft\" id=\"alternatives\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003eCompare\u003c\/span\u003e\u003ch2\u003eAlternatives\u003c\/h2\u003e\n\u003cp class=\"lead\"\u003eTools that compete with or complement Onlook.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"alts\"\u003e\n\u003cspan class=\"alt\"\u003e\u003cspan class=\"av\"\u003eF\u003c\/span\u003e Figma\u003c\/span\u003e\u003cspan class=\"alt\"\u003e\u003cspan class=\"av\"\u003eV\u003c\/span\u003e v0\u003c\/span\u003e\n\u003c\/div\u003e\u003c\/section\u003e\n\u003csection class=\"block\" id=\"faq\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003eFAQ\u003c\/span\u003e\u003ch2\u003eFrequently asked questions\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"faq\"\u003e\n\u003cdetails\u003e\u003csummary\u003eWhat is Onlook? \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\u003e\u003c\/line\u003e\u003cline x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\u003e\u003c\/line\u003e\u003c\/svg\u003e\u003c\/summary\u003e\u003cdiv class=\"ans justify\"\u003eAn open-source visual editor for React and Tailwind codebases. Designers open their own repository, see the real components on an infinite canvas, and edit them visually or through an AI chat. Every change is written into the actual source files, so the canvas shows the product rather than a mockup of it.\u003c\/div\u003e\u003c\/details\u003e\u003cdetails\u003e\u003csummary\u003eIs Onlook free? \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\u003e\u003c\/line\u003e\u003cline x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\u003e\u003c\/line\u003e\u003c\/svg\u003e\u003c\/summary\u003e\u003cdiv class=\"ans justify\"\u003eThe open-source edition is free to self-host from the GitHub repository, and the site confirms this in its own FAQ. The hosted cloud version is in closed beta with no published price: teams are asked to contact the company or book a demo. No free trial is advertised.\u003c\/div\u003e\u003c\/details\u003e\u003cdetails\u003e\u003csummary\u003eWhich frameworks and tools does Onlook work with? \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\u003e\u003c\/line\u003e\u003cline x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\u003e\u003c\/line\u003e\u003c\/svg\u003e\u003c\/summary\u003e\u003cdiv class=\"ans justify\"\u003eReact projects built on Next.js, Vite, Remix, Astro or Create React App, styled with Tailwind CSS or plain CSS. Onlook also reads an existing Storybook and works with shadcn\/ui components, and it connects to GitHub for importing a codebase and publishing work.\u003c\/div\u003e\u003c\/details\u003e\u003cdetails\u003e\u003csummary\u003eWho owns the code I create with Onlook? \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\u003e\u003c\/line\u003e\u003cline x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\u003e\u003c\/line\u003e\u003c\/svg\u003e\u003c\/summary\u003e\u003cdiv class=\"ans justify\"\u003eYou do. The Terms of Use leave all rights in user data with the customer, and the site states that code can be exported locally, published to GitHub or hosted at a link. There is no proprietary file format, so nothing has to be converted if you stop using the product.\u003c\/div\u003e\u003c\/details\u003e\u003cdetails\u003e\u003csummary\u003eWill my data be used to train AI models? \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\u003e\u003c\/line\u003e\u003cline x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\u003e\u003c\/line\u003e\u003c\/svg\u003e\u003c\/summary\u003e\u003cdiv class=\"ans justify\"\u003eYes by default. Section 5(c) of the Terms of Use allows Onlook to use customer data to develop and commercialise AI models, algorithms and tools, model training included, unless the user opts out through the user settings before supplying that data. The opt-out is therefore worth setting immediately.\u003c\/div\u003e\u003c\/details\u003e\u003cdetails\u003e\u003csummary\u003eDoes Onlook address the GDPR? \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\u003e\u003c\/line\u003e\u003cline x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\u003e\u003c\/line\u003e\u003c\/svg\u003e\u003c\/summary\u003e\u003cdiv class=\"ans justify\"\u003eNo. The site never mentions the GDPR, names no Article 27 representative, and publishes neither a data processing agreement nor a subprocessor list. The privacy policy, effective 8 November 2024, covers United States rights only, under Californian and Nevada law, and the terms apply New York law.\u003c\/div\u003e\u003c\/details\u003e\u003cdetails\u003e\u003csummary\u003eIs there an API or a mobile app? \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\u003e\u003c\/line\u003e\u003cline x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\u003e\u003c\/line\u003e\u003c\/svg\u003e\u003c\/summary\u003e\u003cdiv class=\"ans justify\"\u003eNeither. No API documentation exists on the site or in the product documentation, and no iOS or Android application is offered. Onlook does describe a read-write MCP covering the canvas, components, tokens and code, but publishes no reference page for it.\u003c\/div\u003e\u003c\/details\u003e\u003cdetails\u003e\u003csummary\u003eHow do I get access, and where do I get help? \u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cline x1=\"12\" y1=\"5\" x2=\"12\" y2=\"19\"\u003e\u003c\/line\u003e\u003cline x1=\"5\" y1=\"12\" x2=\"19\" y2=\"12\"\u003e\u003c\/line\u003e\u003c\/svg\u003e\u003c\/summary\u003e\u003cdiv class=\"ans justify\"\u003eJoin the waitlist on the site or book a demo for the hosted version, or take the repository for the self-hosted edition. Support runs through the documentation at docs.onlook.com, the public Discord community, and the contact address published in the footer.\u003c\/div\u003e\u003c\/details\u003e\n\u003c\/div\u003e\u003c\/section\u003e\n\u003csection class=\"block conclusion\" id=\"conclusion\"\u003e\u003cdiv class=\"head\"\u003e\n\u003cspan class=\"eyebrow\"\u003eConclusion\u003c\/span\u003e\u003ch2\u003eShould you pick Onlook?\u003c\/h2\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"rich justify\" style=\"max-width:80ch\"\u003e\n\u003cp\u003eOnlook occupies a genuinely useful position. It lets designers work on the product itself rather than a picture of it, and it does so without asking a team to adopt a new file format or maintain a parallel design system. For an organisation that already keeps a React codebase and a Storybook, that removes a real amount of translation work between design and engineering. The open-source route matters too: self-hosting costs nothing, the repository is publicly active, and a team that outgrows the product still owns everything it built.\u003c\/p\u003e\n\u003cp\u003eTwo reservations deserve weight before committing. The first is commercial. The hosted version is in closed beta, no price is published, and access runs through a waitlist or a sales conversation. That is workable for a team happy to talk to the vendor, and a poor fit for anyone who needs to compare costs today.\u003c\/p\u003e\n\u003cp\u003eThe second is documentary. The privacy policy and terms date from November 2024 and are thin for a product that touches a company's source code. The GDPR is never mentioned, there is no data processing agreement, no subprocessor list, no stated retention period and no hosting jurisdiction. The terms also permit training AI models on customer data unless the opt-out is set in the settings before any data is supplied, which is an option worth exercising on the first day rather than the second.\u003c\/p\u003e\n\u003cp\u003eNone of this contradicts the substance of the tool, which is real and visible. It does mean a procurement review will have to obtain in writing what the site does not publish, and that teams with strict data governance may prefer the self-hosted edition, where the hosting question answers itself.\u003c\/p\u003e\n\u003c\/div\u003e\n\u003cdiv class=\"cta-row\"\u003e\n\u003ca class=\"btn btn-primary\" href=\"https:\/\/www.onlook.com\" target=\"_blank\" rel=\"noopener\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"16\" height=\"16\"\u003e\u003cpath d=\"M15 3h6v6\"\u003e\u003c\/path\u003e\u003cpath d=\"M10 14 21 3\"\u003e\u003c\/path\u003e\u003cpath d=\"M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6\"\u003e\u003c\/path\u003e\u003c\/svg\u003e Visit Onlook\u003c\/a\u003e\u003ca class=\"btn btn-secondary\" href=\"https:\/\/meetings.hubspot.com\/daniel-onlook\/onboarding-to-onlook-with-daniel\" target=\"_blank\" rel=\"noopener\"\u003e\u003csvg viewbox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" width=\"14\" height=\"14\"\u003e\u003cpolygon points=\"6 3 20 12 6 21 6 3\"\u003e\u003c\/polygon\u003e\u003c\/svg\u003e Watch the demo\u003c\/a\u003e\n\u003c\/div\u003e\u003c\/section\u003e\n\u003c\/div\u003e","brand":"On Off, Inc.","offers":[{"title":"Default Title","offer_id":58113680769355,"sku":null,"price":0.0,"currency_code":"EUR","in_stock":true}],"thumbnail_url":"\/\/cdn.shopify.com\/s\/files\/1\/1038\/0905\/7099\/files\/ai-tool-placeholder_4bd646ba-4524-4017-8859-40e908f1fc85.png?v=1786744683","url":"https:\/\/guidaio.com\/products\/onlook","provider":"Guidaio","version":"1.0","type":"link"}