​

Rork docs

​

Non-negotiable rules

1. Every fact comes from the product, not from memory. The product code is at /Users/dora/Documents/GitHub/rorkai. Grep it for the exact UI copy, then quote that copy in the page. If a claim cannot be verified, ask the user instead of writing it.
2. UI copy is quoted exactly and set in bold. **Build AAB for Play**, not “the build button”. Labels usually live in the component or in its aria-label.
3. No em dashes. Use a comma, a colon, or a second sentence.
4. One term for one thing. “Android app”, not “Kotlin project” in the next paragraph.
5. Screenshots come from the real product UI, in English. Never a mockup, never a Russian UI, never a personal name or avatar.

​

Page anatomy

---
title: "Rork Web: build and publish a web app"
sidebarTitle: "Web apps"
description: "One or two sentences. Says what the page is for, and names the product terms a reader would search for."
keywords: ["ai website builder", "publish web app", "rork web"]
---

import { CtaBanner } from '/snippets/cta-banner.mdx';

Opening paragraph: what this is, in plain words, with the platform and the
framework named. No heading above it.

## Task heading, in the imperative

Short paragraph, then the UI.

<Frame caption="What the reader is looking at.">
  <img src="/images/web/publish-panel.png" alt="Describes the screen for a reader who cannot see it" />
</Frame>

## FAQ

<AccordionGroup>
  <Accordion title="Question in the reader's words?">
    Answer in two or three sentences, with a link to the page that goes deeper.
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card icon="compass" href="/swift-vs-react-native/whats-the-difference" title="Short title">
    One line about why to go there.
  </Card>
</CardGroup>

<CtaBanner />

• sidebarTitle only when the title is too long for the sidebar.
• <CtaBanner /> closes every page. It is the last line.
• Order of sections: what it is, how to start, how to work in it, how to publish, what it cannot do, FAQ, next steps.
• Components in use: <Frame>, <Steps>/<Step>, <Tip>, <Note>, <Warning>, <Info>, <AccordionGroup>/<Accordion>, <CardGroup>/<Card>, plain markdown tables.
• A prompt the reader should send to the agent goes in a bare code fence:

Add a web version of this app

• A table is the right shape for “control, what it does” and for platform comparisons. Keep cells to one short line.
• Videos: <video src="/videos/multiplatform.mp4" autoPlay muted loop playsInline style={{ borderRadius: "12px", width: "100%" }} />.

​

Voice

• Good: “Open Publish, then press Publish to web. Rork builds the app and hosts it at your own address on rork.app.”
• Bad: “The application can then be deployed by the user, at which point hosting is provisioned automatically.”

​

Links

• Internal links are absolute paths without the extension: /import/convert-between-platforms.
• Every outbound link to a Rork property carries UTM tags: ?utm_source=docs&utm_medium=referral&utm_campaign=docs-cta&utm_content=<page-or-slot>
• Each platform or feature page links to its landing page on rork.com (/web, /android, /max, /cloud, /app-store-reviewer). The user asks for this every time, so do it in the first draft.

​

Screenshots

1. browser_tabs with action list. If another tab runs a local dev server on localhost:3000, leave it alone: another session may own it. Navigate a separate tab to https://rork.com/ and browser_lock that one.
2. Drive the page:
   • browser_cdp with Runtime.evaluate for cheap reads, and for typing into the prompt box: document.querySelector('.ProseMirror').focus(); document.execCommand('insertText', false, '...')
   • Radix menus and buttons need real input: browser_mouse_click_xy or browser_click. A JS .click() does not open them.
   • browser_mouse_click_xy takes coordinates in screenshot space and needs a fresh browser_take_screenshot immediately before the call. Screenshot space is the 1024px-wide image; page CSS pixels are about 1.575x that.
   • A menu that just opened often needs one more browser_take_screenshot before it shows up in the frame.
   • browser_click and browser_mouse_click_xy return a full page snapshot, which is expensive. Prefer CDP reads for checking state.
3. browser_take_screenshot writes the full retina PNG (about 3226x1814) to /var/folders/.../T/cursor/screenshots/page-<timestamp>.png. The inline preview is downscaled; always work from the saved file.
4. Copy the keepers into .capture/raw/ with meaningful names, then crop tight to the UI being described. Pillow is available:

from PIL import Image
im = Image.open("raw/publish.png")          # 2x pixels, so multiply CSS coords by 2
im.crop((x0, y0, x1, y1)).save("../images/android/publish-panel.png")

5. Blur anything personal: the account avatar, real names, other people’s project names. im.crop(box).filter(ImageFilter.GaussianBlur(18)) pasted back over the box.
6. Save to images/<topic>/<what-it-shows>.png. Use .jpg for wide editor shots to keep the file small. .capture/ is scratch and stays out of the commit.

​

Navigation

​

Before the PR

cd /Users/dora/Documents/GitHub/rork-docs
rg -n "—" <page>.mdx || echo "no em dash, ok"
python3 -c "import json;json.load(open('docs.json'));print('docs.json valid')"
rg -o 'src="/images/[^"]+"' <page>.mdx | sed 's|src="/||;s|"||' | while read f; do [ -f "$f" ] && echo "ok $f" || echo "MISSING $f"; done
rg -o '\]\(/[a-z0-9/-]+\)' <page>.mdx | tr -d '](' | while read p; do ls ".${p}.mdx" >/dev/null 2>&1 || echo "check $p"; done

​

Facts about the product that pages get wrong

• New apps are native iPhone (Swift / SwiftUI), native Android (Kotlin + Compose), or web (Vite + React). Expo exists only for old projects, see expo.mdx.
• Each app in a project has its own code. iPhone and Android are two codebases, not one. They share the chat and the backend.
• Plans: packages/react-shared/src/components/pricing/pricing-features/index.tsx is the source of truth for what each plan builds.
• Publishing: iPhone goes through the in-product App Store wizard, Android produces a signed AAB for Google Play, web publishes to <name>.rork.app.