meet zidl

Point. Plan. Ship.

Manage your web app right on the page - all in your browser.

<script src="https://cdn.zidl.io/embed.js" data-hosts="localhost" data-zidl-key="zk_your_key"></script>

03 ship · inline ai chat

Chat with your app.

Pin anything. Ask for a change. The AI edits your code, live.

Zidl AIvia Claude Codebutton · Checkout.tsx:87

Already have Claude Code? Zidl’s chat runs on it through zidl-bridge — no API key needed.

Knows the element

File, line and errors go with every message.

Your model

OpenAI, Anthropic, or your local Claude Code.

Undo anything

Every edit has a diff and a revert.

Saved per task

Pick up the chat where anyone left off.

01 point · figma for your web app

Review the real thing.

Comment and draw on your live app - not on a screenshot.

Comment

Drop a note on any element.

02 plan · bugs become tasks

Bugs that report themselves.

Pin a bug and Zidl sends the file, the line, and every step as a test that runs.

steps, recorded for you

16:38:02navigate/productsdropped
16:38:11clicka “Cart”kept
16:38:14fillinput[qty-4242] → “3”kept
16:38:26fillinput[Card number]kept
16:38:31clickbutton “Place order”kept

checkout.spec.ts

await page.getByRole('link', { name: 'Cart' }).click()
await page.getByTestId('qty-4242').fill('3')
await page.getByLabel('Card number').fill('4242 4242 4242 4242')
await page.getByRole('button', { name: 'Place order' }).click()

spans tabs and reloadspasswords are never recordedgetByRole · getByTestId · getByLabel

install

One tag. That’s the install.

No package, no build step, no extension. It never touches your styles. Developer notes have the details.

copy this

<script
  src="https://cdn.zidl.io/embed.js"
  data-hosts="localhost,staging.yourapp.com"
  data-zidl-key="generate link to start - 'sign-up'"
></script>

app/layout.tsx

import Script from 'next/script'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://cdn.zidl.io/embed.js"
          data-hosts="localhost,staging.yourapp.com"
          data-zidl-key="generate link to start - 'sign-up'"
          strategy="afterInteractive"
        />
      </body>
    </html>
  )
}

data-hostsWhere Zidl runs. Anywhere else, it does nothing. Wildcards like *.preview.yourapp.com work.

data-forceRun it on any host anyway.

data-zidl-keyYour team key — get one when you sign up.

thenReload. Zidl appears. Remove the tag and it’s gone.

where it fits

They each do one thing.
Zidl does it all, live.

Figmacomments on a picture

Marker.ioa screenshot and a log

BugHerda pin on a coordinate

Jama video to sit through

ZidlAI chat, comments, drawing and bug reports on the live app

Why it’s different

Inside your app: No iframe, no proxy, no extension.
Undo anything: Every AI edit has a diff and a revert.
No screenshots: Marks live on the real UI.
Complete bugs: File, line, steps, and a test that runs.

pricing

Free while we're in beta.

One plan, everything in it. $15 a month after beta.

Zidl — everything

$15Free/ month, per team

beta pricing · no card required

Start free

›Inline AI chat
›Comments and @mentions
›Draw on the live app
›Bug reports with file and line
›Steps as a Playwright test
›Shared board and teams

still deciding?

Talk to the person who built it.

30 minutes, no deck. I'll tell you straight if Zidl fits.

Book a callopens Calendly · pick any slot