Your First Vibium Script in JavaScript

Your first Vibium JavaScript script launches Chrome, opens a page, finds an element, and clicks it in about ten lines. Require the sync client, call browser.launch() and bro.page(), navigate with page.go(), locate elements with page.find(), and act with .click() or .type(). Vibium auto-waits for each element, so no manual delays are needed.

What do I need before I start?

You need Vibium installed in a Node.js 18+ project. If you have not set that up, follow How to Install Vibium first:

npm init -y
npm install vibium

That installs the JavaScript client plus the Go binary that drives Chrome. Create a file named hello.js and you are ready to write code.

How do I write a complete first script?

Paste this into hello.js. It opens a real Chrome window, loads a page, reads a link, saves a screenshot, then clicks the link:

const fs = require("fs");
const { browser } = require("vibium/sync");
 
// Launch Chrome and grab the default tab
const bro = browser.launch();
const page = bro.page();
 
// Navigate to a page
page.go("https://example.com");
console.log("Loaded example.com");
 
// Find an element by CSS selector
const link = page.find("a");
console.log("Link text:", link.text());
 
// Save a screenshot (screenshot() returns PNG bytes)
const png = page.screenshot();
fs.writeFileSync("example.png", png);
console.log("Saved example.png");
 
// Click the link
link.click();
console.log("Clicked the link");
 
// Close the browser
bro.close();

Run it:

node hello.js

Chrome opens, loads example.com, and closes. A new example.png appears in your folder.

What does each line actually do?

Each call maps to one browser action, which keeps Vibium scripts readable:

How do I type into a form field?

Locate the input with find(), then call .type(). Vibium auto-waits until the field is editable before sending keystrokes:

const { browser } = require("vibium/sync");
 
const bro = browser.launch();
const page = bro.page();
page.go("https://www.google.com");
 
const box = page.find("textarea[name='q']");
box.type("vibium browser automation");
 
bro.close();

There is no need to poll for the field or retry on a stale element, because Vibium runs actionability checks for you. For a full credential flow, see Automate a login with Vibium.

Should I use the sync or async API?

The example above uses the synchronous API from vibium/sync, which reads top to bottom with no await. Vibium also ships an async API for code that benefits from promises and concurrency:

const { browser } = require("vibium");
 
async function main() {
  const bro = await browser.launch();
  const page = await bro.page();
  await page.go("https://example.com");
  await page.find("a").click();
  await bro.close();
}
 
main();

Pick sync for simple linear scripts and async when you are inside an existing async codebase. The Vibium sync vs async guide breaks down exactly when to use each.

Why don't I need waits?

Vibium auto-waits because its Go binary enforces actionability before every interaction. It polls until the target element is visible, stable, enabled, and able to receive the event, up to a 30-second default timeout. That eliminates the flaky setTimeout hacks common in older scripts. This server-side waiting is part of how Vibium works under the hood.

Where do I go next?

You have a working JavaScript script. Compare it with the Python version, dig into sync vs async, or connect the built-in MCP server to Claude Code so an AI agent can drive the browser for you.