diff --git a/website/src/routes/_index.tsx b/website/src/routes/_index.tsx
index d8c91fe..3ad1b96 100644
--- a/website/src/routes/_index.tsx
+++ b/website/src/routes/_index.tsx
@@ -130,9 +130,9 @@ export default function IndexPage() {
{dedent`
playwriter session new # new sandbox, outputs id (e.g. 1)
- playwriter -s 1 -e "await page.goto('https://example.com')"
- playwriter -s 1 -e "console.log(await snapshot({ page }))"
- playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"
+ playwriter -e "page.goto('https://example.com')"
+ playwriter -e "snapshot({ page })"
+ playwriter -e "page.locator('aria-ref=e5').click()"
`}
Extension icon green = connected. Gray = not attached to this tab.
@@ -193,7 +193,7 @@ export default function IndexPage() {
{dedent`
- playwriter -s 1 -e "await snapshot({ page })"
+ playwriter -e "snapshot({ page })"
# Output:
# - banner:
@@ -211,10 +211,10 @@ export default function IndexPage() {
{dedent`
# Search for specific elements
- playwriter -s 1 -e "await snapshot({ page, search: /button|submit/i })"
+ playwriter -e "snapshot({ page, search: /button|submit/i })"
# Always print URL first, then snapshot — pages can redirect
- playwriter -s 1 -e "console.log('URL:', page.url()); await snapshot({ page }).then(console.log)"
+ playwriter -e "console.log('URL:', page.url()); snapshot({ page }).then(console.log)"
`}
@@ -231,10 +231,10 @@ export default function IndexPage() {
{dedent`
- playwriter -s 1 -e "await screenshotWithAccessibilityLabels({ page })"
+ playwriter -e "screenshotWithAccessibilityLabels({ page })"
# Returns screenshot + accessibility snapshot with aria-ref selectors
- playwriter -s 1 -e "await page.locator('aria-ref=e5').click()"
+ playwriter -e "page.locator('aria-ref=e5').click()"
`}
@@ -259,7 +259,7 @@ export default function IndexPage() {
playwriter session list # shows sessions + state keys
# Session 1 stores data
- playwriter -s 1 -e "state.users = await page.$$eval('.user', els => els.map(e => e.textContent))"
+ playwriter -s 1 -e "state.users = page.$$eval('.user', els => els.map(e => e.textContent))"
# Session 2 can't see it
playwriter -s 2 -e "console.log(state.users)" # undefined
@@ -271,10 +271,10 @@ export default function IndexPage() {
{dedent`
- playwriter -s 1 -e "state.myPage = context.pages().find(p => p.url() === 'about:blank') ?? await context.newPage(); await state.myPage.goto('https://example.com')"
+ playwriter -s 1 -e "state.myPage = context.pages().find(p => p.url() === 'about:blank') ?? context.newPage(); state.myPage.goto('https://example.com')"
# All subsequent calls use state.myPage
- playwriter -s 1 -e "console.log(await state.myPage.title())"
+ playwriter -s 1 -e "state.myPage.title()"
`}
@@ -287,13 +287,13 @@ export default function IndexPage() {
{dedent`
# Set breakpoints and debug
- playwriter -s 1 -e "state.cdp = await getCDPSession({ page }); state.dbg = createDebugger({ cdp: state.cdp }); await state.dbg.enable()"
- playwriter -s 1 -e "state.scripts = await state.dbg.listScripts({ search: 'app' }); console.log(state.scripts.map(s => s.url))"
- playwriter -s 1 -e "await state.dbg.setBreakpoint({ file: state.scripts[0].url, line: 42 })"
+ playwriter -e "state.cdp = getCDPSession({ page }); state.dbg = createDebugger({ cdp: state.cdp }); state.dbg.enable()"
+ playwriter -e "state.scripts = state.dbg.listScripts({ search: 'app' }); state.scripts.map(s => s.url)"
+ playwriter -e "state.dbg.setBreakpoint({ file: state.scripts[0].url, line: 42 })"
# Live edit page code
- playwriter -s 1 -e "state.editor = createEditor({ cdp: state.cdp }); await state.editor.enable()"
- playwriter -s 1 -e "await state.editor.edit({ url: 'https://example.com/app.js', oldString: 'const DEBUG = false', newString: 'const DEBUG = true' })"
+ playwriter -e "state.editor = createEditor({ cdp: state.cdp }); state.editor.enable()"
+ playwriter -e "state.editor.edit({ url: 'https://example.com/app.js', oldString: 'const DEBUG = false', newString: 'const DEBUG = true' })"
`}
@@ -313,14 +313,14 @@ export default function IndexPage() {
{dedent`
# Start intercepting
- playwriter -s 1 -e "state.responses = []; page.on('response', async res => { if (res.url().includes('/api/')) { try { state.responses.push({ url: res.url(), status: res.status(), body: await res.json() }); } catch {} } })"
+ playwriter -e "state.responses = []; page.on('response', async res => { if (res.url().includes('/api/')) { try { state.responses.push({ url: res.url(), status: res.status(), body: await res.json() }); } catch {} } })"
# Trigger actions, then analyze
- playwriter -s 1 -e "await page.click('button.load-more')"
- playwriter -s 1 -e "console.log('Captured', state.responses.length, 'API calls'); state.responses.forEach(r => console.log(r.status, r.url.slice(0, 80)))"
+ playwriter -e "page.click('button.load-more')"
+ playwriter -e "console.log('Captured', state.responses.length, 'API calls'); state.responses.forEach(r => console.log(r.status, r.url.slice(0, 80)))"
# Replay an API call directly
- playwriter -s 1 -e "const data = await page.evaluate(async (url) => { const res = await fetch(url); return res.json(); }, state.responses[0].url); console.log(data)"
+ playwriter -e "page.evaluate(async (url) => { const res = await fetch(url); return res.json(); }, state.responses[0].url)"
`}
@@ -339,14 +339,14 @@ export default function IndexPage() {
{dedent`
# Start recording
- playwriter -s 1 -e "await startRecording({ page, outputPath: './recording.mp4', frameRate: 30 })"
+ playwriter -e "startRecording({ page, outputPath: './recording.mp4', frameRate: 30 })"
# Navigate, interact — recording continues
- playwriter -s 1 -e "await page.click('a'); await page.waitForLoadState('domcontentloaded')"
- playwriter -s 1 -e "await page.goBack()"
+ playwriter -e "page.click('a'); page.waitForLoadState('domcontentloaded')"
+ playwriter -e "page.goBack()"
# Stop and save
- playwriter -s 1 -e "const { path, duration, size } = await stopRecording({ page }); console.log(path, duration + 'ms', size + ' bytes')"
+ playwriter -e "stopRecording({ page })"
`}
@@ -415,7 +415,7 @@ export default function IndexPage() {
# From anywhere — set env vars and use normally
export PLAYWRITER_HOST=https://my-machine-tunnel.traforo.dev
export PLAYWRITER_TOKEN=
- playwriter -s 1 -e "await page.goto('https://example.com')"
+ playwriter -e "page.goto('https://example.com')"
`}
diff --git a/website/src/styles/editorial-prism.css b/website/src/styles/editorial-prism.css
index 8cd8518..c57186e 100644
--- a/website/src/styles/editorial-prism.css
+++ b/website/src/styles/editorial-prism.css
@@ -20,7 +20,7 @@ pre[class*='language-'] {
font-family: var(--font-code, 'SF Mono', 'SFMono-Regular', 'Consolas', 'Liberation Mono', Menlo, Courier, monospace);
font-size: 12px;
font-weight: 500;
- letter-spacing: 0.02em;
+ letter-spacing: 0.01em;
line-height: 1.85;
text-align: left;
white-space: pre;
diff --git a/website/src/styles/editorial.css b/website/src/styles/editorial.css
index 55035c2..411d48f 100644
--- a/website/src/styles/editorial.css
+++ b/website/src/styles/editorial.css
@@ -116,7 +116,7 @@
font-size: 12.6px;
font-weight: 500;
line-height: 12.6px;
- letter-spacing: 0.02em;
+ letter-spacing: 0.01em;
padding: 1.6px 3.2px;
color: rgba(0, 0, 0, 0.75);
}