> ## Documentation Index
> Fetch the complete documentation index at: https://docs.rork.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Rork Web: build and publish a web app

> Rork builds web apps with Vite and React, previews them next to the chat, and publishes them to your own address on rork.app. Use it for a website, a dashboard, a client portal, or an admin tool.

export const CtaBanner = () => <div style={{
  display: "flex",
  alignItems: "center",
  justifyContent: "space-between",
  gap: "24px",
  flexWrap: "wrap",
  margin: "40px 0 8px",
  padding: "22px 28px",
  borderRadius: "16px",
  background: "linear-gradient(135deg,rgba(249,115,22,0.10),rgba(255,255,255,0.03),rgba(249,115,22,0.06))",
  border: "1px solid rgba(255,255,255,0.08)"
}}>
    <div>
      <div style={{
  fontSize: "19px",
  fontWeight: 700,
  color: "#fff",
  letterSpacing: "-0.3px",
  lineHeight: 1.3
}}>
        Build your app with Rork today.
      </div>
      <div style={{
  fontSize: "14px",
  color: "rgba(255,255,255,0.6)",
  marginTop: "4px",
  lineHeight: 1.5
}}>
        Ship iOS, Android, and web apps by chatting with AI.
      </div>
    </div>
    <a href="https://rork.com" style={{
  flexShrink: 0,
  display: "inline-block",
  padding: "10px 24px",
  background: "linear-gradient(135deg,#fff,#f0f0f0)",
  color: "#000",
  fontSize: "14px",
  fontWeight: 600,
  borderRadius: "100px",
  textDecoration: "none",
  whiteSpace: "nowrap"
}}>
      Try Rork for Free
    </a>
  </div>;

export const frame = {
  margin: "8px 0 12px",
  borderRadius: "16px",
  overflow: "hidden",
  border: "1px solid color-mix(in srgb, currentColor 12%, transparent)",
  boxShadow: "0 18px 40px rgba(0,0,0,0.25)",
  lineHeight: 0
};

export const frameCaption = {
  margin: "0 0 32px",
  fontSize: "13px",
  lineHeight: 1.5,
  opacity: 0.55,
  textAlign: "center"
};

export const frameMedia = {
  width: "100%",
  height: "auto",
  display: "block",
  margin: 0,
  border: 0,
  borderRadius: 0,
  verticalAlign: "top"
};

<div className="web-frame" style={frame}>
  <img src="https://mintcdn.com/rork/zXWqTYxinBv515k-/images/web/editor.jpg?fit=max&auto=format&n=zXWqTYxinBv515k-&q=85&s=b798ebec0a2b76afd177b8b9553f86f2" alt="A Rork web project: the chat on the left and the finished Ember Roast website in the live preview on the right" style={frameMedia} width="1200" height="860" data-path="images/web/editor.jpg" />
</div>

<p style={frameCaption}>One prompt, one project: the chat on the left, the running site on the right.</p>

A Rork web app runs in the browser. Rork writes it with **Vite and React**, previews it next to the chat, and publishes it to your own address on `rork.app`. There is no app store, no review, and no install. You share a link, and people open it on a laptop or on a phone.

Web is the right platform for a website, a dashboard, a client portal, an admin tool, or a SaaS product. It is also the fastest way to put something in front of people today. See what it builds on the [Rork Web page](https://rork.com/web).

## Start a web app

Pick the platform before you send your first message. On [rork.com](https://rork.com), open the platform picker under the prompt box and choose **For web**. Then describe the product, not the technology.

<Frame caption="The prompt box with For web selected. The picker also offers For iPhone and For Android.">
  <img src="https://mintcdn.com/rork/zXWqTYxinBv515k-/images/web/prompt-for-web.png?fit=max&auto=format&n=zXWqTYxinBv515k-&q=85&s=9fc151d899147ea34be9119e135452b3" alt="The Rork prompt box with a coffee roastery prompt typed in and the platform set to For web" width="800" height="165" data-path="images/web/prompt-for-web.png" />
</Frame>

The picker says it plainly: **you can add another platform later**. One project can hold an iPhone app, an Android app, and a web app at the same time. See [Convert your app between iOS, Android, and web](/import/convert-between-platforms).

## Answer the questions about the look

Rork does not start writing code straight away. It asks a few short questions about the look first, and each answer is a picture, not a word. You can also type your own answer in **Other**.

<Frame caption="Three questions about the look. Each answer shows the palette it stands for.">
  <img src="https://mintcdn.com/rork/zXWqTYxinBv515k-/images/web/questions.png?fit=max&auto=format&n=zXWqTYxinBv515k-&q=85&s=397844ba6c700efe129295c955d4a38a" alt="Rork asking what overall look the site should have, with four palette options to choose from" width="1200" height="625" data-path="images/web/questions.png" />
</Frame>

Answer all three, then press **Submit**. Skip this step by writing the look into your first prompt instead.

## Approve the design, then build

Next Rork draws the screens and shows them in **Design mode**. Nothing is built yet, so this is the cheap moment to change your mind. Ask for a different screen in chat, or press **Build** to turn the design into a working site.

<Frame caption="Design mode: the proposed screens on the right, and the Review design card with the Build button on the left.">
  <img src="https://mintcdn.com/rork/zXWqTYxinBv515k-/images/web/design-proposal.jpg?fit=max&auto=format&n=zXWqTYxinBv515k-&q=85&s=de0caf0f35ad8f5042aac11e57e85672" alt="Design mode showing three proposed screens for Ember Roast and a Review design card with View Design and Build buttons" width="1200" height="860" data-path="images/web/design-proposal.jpg" />
</Frame>

## Work in the project

The project has the chat on the left and a live preview on the right. The preview is the real app, not a picture, so you can click through it while you build.

The controls above the preview do this:

| Control                               | What it does                                                            |
| ------------------------------------- | ----------------------------------------------------------------------- |
| **Switch preview platform**           | Moves the preview between the apps in the project, and adds a platform. |
| **Switch preview size**               | Switches the preview between **Desktop** and **Phone**.                 |
| **Go to home**                        | Returns the preview to the first page.                                  |
| **Reload preview**                    | Loads the app again after a change.                                     |
| **Select an element for your prompt** | Point at a part of the page, then write what to change about it.        |
| **Publish**                           | Opens the publish panel.                                                |

<Tip>
  Use **Select an element for your prompt** instead of describing a position in words. Point at the element, then say "make this button darker". The agent gets the exact element and changes less around it.
</Tip>

## Check the phone width

A web app has to work in a phone browser as well as on a laptop. Switch the preview size to **Phone**. Rork draws the site inside a phone frame, so you read the same pages at the width your visitors get.

<Frame caption="The same site at the Phone preview size.">
  <img src="https://mintcdn.com/rork/zXWqTYxinBv515k-/images/web/preview-phone.jpg?fit=max&auto=format&n=zXWqTYxinBv515k-&q=85&s=998b2a03e07c77d8e0179dd9126c613e" alt="The Ember Roast site in the Phone preview size, drawn inside a phone frame next to the chat" width="1200" height="860" data-path="images/web/preview-phone.jpg" />
</Frame>

Then ask for the fixes you need:

```
On phone widths the hero text overlaps the image. Stack them instead.
```

## Publish to the web

Open **Publish**, then press **Publish to web**. Rork builds the app and hosts it at your own address on `rork.app`.

<Frame caption="The publish panel before the first publish: the address, the site status, and the custom domain row.">
  <img src="https://mintcdn.com/rork/zXWqTYxinBv515k-/images/web/publish-panel.png?fit=max&auto=format&n=zXWqTYxinBv515k-&q=85&s=a226fc5a82fc8899dbf5b085fa432212" alt="The Rork publish panel showing ember-roast-website.rork.app, a Site offline status, a disabled Add a custom domain row, and the Publish to web button" width="600" height="380" data-path="images/web/publish-panel.png" />
</Frame>

What the panel shows:

* **The address.** Rork picks one from the project name, like `ember-roast-website.rork.app`. Press the pencil to change the subdomain.
* **The status.** It reads **Site offline** until you publish for the first time.
* **Add a custom domain.** This row stays off until the first publish. The panel says so: "Publish the project first to add a custom domain."

Publishing is a separate step from building. Your changes stay in the preview until you publish again, and the **Publish** button marks itself when the live site is behind your project.

## Add a web app to a project you already have

Any mobile project can grow a web version. Open **Project Settings → Add new app → Web**, use the platform switcher above the preview, or just ask:

```
Add a web version of this app
```

Each app keeps its own code. They share the chat, and the backend if you have one. A common split is a mobile app for customers and a web app as the admin dashboard.

## What a web app cannot do

A web app runs inside the browser, so the deeply native features are out of reach:

* No App Store or Google Play distribution
* No home screen or lock screen widgets, no Live Activities, no Dynamic Island
* No Apple Watch app and no Apple Health integration
* No background tracking, and no advanced motion or body tracking
* Push notifications are limited. On iPhone and iPad the user must add the site to the Home Screen first, on iOS 16.4 or later, and then grant permission

If your product needs any of those, build the native app and keep the web app beside it. See [iPhone, Android, or web: what's the difference](/swift-vs-react-native/whats-the-difference).

## FAQ

<AccordionGroup>
  <Accordion title="What code does Rork write for the web?">
    A real Vite and React project in TypeScript, styled with Tailwind. You can export it to GitHub and run it anywhere. See [How to connect GitHub](/tutorials/how-to-connect-github).
  </Accordion>

  <Accordion title="Can I skip the questions and the design step?">
    Yes. Write the look into your first prompt, and the agent has less to ask. In **Design mode** you can also press **Build** straight away.
  </Accordion>

  <Accordion title="Can a web app have a backend?">
    Yes. Use [Rork Cloud](/backend/rork-cloud) for a backend inside Rork, or connect [Supabase](/backend/supabase) or [Firebase](/backend/firebase). The apps in one project can share the same backend.
  </Accordion>

  <Accordion title="Can I use my own domain?">
    Yes. Publish to the `rork.app` address first. The **Add a custom domain** row in the publish panel turns on after that.
  </Accordion>

  <Accordion title="I have a Lovable project. Do I have to rebuild it?">
    No. Rork imports it. See [Lovable to mobile app](/import/lovable-to-mobile-app), and keep the web app in the same project.
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card icon="compass" href="/swift-vs-react-native/whats-the-difference" title="iPhone, Android, or web">
    What each platform is good at, and how to choose.
  </Card>

  <Card icon="repeat" href="/import/convert-between-platforms" title="Add another platform">
    Grow the project into iOS and Android from the same chat.
  </Card>

  <Card icon="database" href="/backend/rork-cloud" title="Add a backend">
    Accounts, data, and files for your web app.
  </Card>

  <Card icon="download" href="/import/website-to-mobile-app" title="Website to mobile app">
    Turn an existing site into a native app.
  </Card>

  <Card icon="globe" href="https://rork.com/web" title="Rork Web">
    The product page, with examples of what Rork builds for the browser.
  </Card>
</CardGroup>

<CtaBanner />
