What is the visual selector tool?

A browser-based CSS/XPath picker that turns "point at the field I want" into a runnable Cheerio extraction config. Built for the first 30 minutes of writing a web scraper, where you're staring at devtools trying to find the most stable selector for each field you care about. Point, click, copy the JSON, paste into your scraper.

How it works

  1. Paste the target page's HTML (view-source > copy > paste) into the input panel.
  2. The HTML renders interactively. Click any element to capture it.
  3. Name the field, optionally choose XPath instead of CSS, repeat for each value you need.
  4. Copy the generated JSON config. Use it with Cheerio (or any DOM-querying library).

Picks stable selectors by default

  • • Prefers id, data-attribute, and role over class-only selectors.
  • • Avoids deeply-nested n-th-child paths that break on tiny layout changes.
  • • Detects repeating list patterns and generates a list selector + per-item field selectors.
  • • Shows you which selectors are robust vs brittle, with a one-click swap for alternatives.

When to use this vs. our REST API

Scraping Facebook, Instagram, Meta Ads Library, or Marketplace? Don't bother with the visual selector — our REST API handles those upstream layouts for you and returns structured JSON, no HTML parsing required. The visual selector is the right tool when you're scraping a customer marketing site, an obscure directory, a non-Meta property — anywhere we don't publish an endpoint.

Frequently asked questions

What does the visual selector tool generate?

A Cheerio-compatible JSON config that maps every field you click to its CSS selector (or XPath, optionally). Drop the config into a Cheerio-based scraper and it extracts the same fields you picked, on the same page or any structurally similar one. Saves the 'staring at devtools' phase of writing a scraper.

Does this run a browser? Is it scraping for me?

No. The tool generates the extraction config from the HTML you paste; you run the scrape yourself from your own code or hosted scraper. It's a config builder, not a managed scraping service. If you want a hosted scrape that runs on a schedule and returns structured data, our REST API (/api-sources) is the supported path for Facebook + Instagram.

Why use this instead of writing the selectors by hand?

Three reasons. First, point-and-click is faster than guessing whether a div has the class you remember. Second, the tool prefers stable selectors (id, data-attribute, role) over brittle ones (n-th child, deeply nested classes), so the generated config survives small HTML changes. Third, you can pick five fields in a row and get a complete config in 30 seconds — manual usually takes 5+ minutes per field.

Should I use this or hit SocialAPIs' Facebook/Instagram endpoints directly?

If you're scraping Facebook or Instagram, hit the SocialAPIs endpoints — they're cheaper than maintaining your own scraper, faster, return structured JSON, and handle the upstream layout churn for you. The visual selector tool is the right call for scraping pages we don't expose (a customer's marketing site, an obscure forum, a directory not on our platform).

More developer tools from SocialAPIs

JSON path selector · cURL → code converter · Network inspector · JSON formatter