Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.replit.com/llms.txt

Use this file to discover all available pages before exploring further.

โฐ Estimated time: 10 minutes By the end of this guide, you will have a small app published at a URL you can share.
The published Runwell app open in a new browser tab โ€” the outcome of this guide: a shareable, premium running tracker
You will build a running tracker. The app is focused on purpose: it gives you a complete first build without needing to plan a large project.

โ€‹
Before you start

You need a Replit account. The goal is to finish one complete loop:
  • Build with Agent,
  • Test the app,
  • Publish, and share.
Agent is Replitโ€™s AI builder. You describe what you want, and Agent helps create, explain, and fix the app.

โ€‹
Build the first version

1

Start a new app

2

Ask Agent for the first version

The prompt is split into four short sections so Agent gets clear intent instead of a wall of text:
  • Context โ€” what the app is and who itโ€™s for.
  • Visual direction โ€” how it should look and feel.
  • Scope โ€” which screens to build and what each should show.
  • Data and navigation โ€” what sample data to use and how the layout adapts to mobile and desktop.
Agent may show a plan before it builds. Check that the plan includes the Home, Add Run, and Progress screens, sample runs and shoe mileage, and the mobile + desktop layouts.If something important is missing, ask Agent to update the plan before it starts building.
3

Explore before building (optional)

If you want Agent to think through the design before writing any code, toggle Plan next to the prompt input. Plan mode lets Agent ask clarifying questions and produce a structured plan you can review before approving the build โ€” useful for projects bigger than this one.Learn more in Plan mode.
4

Wait while Agent builds

Agent plans, generates, and wires up the app. This usually takes a few minutes โ€” you can follow along in the chat panel as it works.
Agent mid-build โ€” the chat panel shows the Runwell prompt and Agent's plan with a Planning frontend architecture status, while the right pane shows a placeholder before the preview is generated
5

Confirm the app works in Preview

When Agent finishes, open Preview and use the app like a visitor. Preview is where you test the app while you are building, before publishing it.Check that you can:
  • Open Add Run and choose outdoor or treadmill.
  • Enter distance, duration, and notes.
  • Save the run.
  • See the run appear in Recent Runs.
  • See the weekly distance and shoe mileage update.
  • See an encouraging recommendation or insight.
  • Refresh the page and use the app again.
  • Resize Preview to a phone-sized width.
If something breaks, describe the symptom to Agent. You do not need to diagnose the code yourself.
The Runwell app running in Preview, showing a dark theme with neon lime accents โ€” the Runwell logo, a Ready to work hero with a runner image, a weekly volume metric card with a lime progress bar, a Recent Runs list, and a Log Run button
Want to explore visual variations before publishing? See Design with Canvas to generate alternative looks side by side and apply the one you like.
6

Publish your app

When Preview works, you can publish in two ways:
  • From the Agent chat: after Agent finishes the build, it suggests deployment with an inline Publish card. Confirm your subdomain, choose who can access the app, and select Publish.
  • From the Tools & files panel: open Publishing to configure the same options. Use this path if youโ€™ve dismissed the inline card or want to publish later.
Either way, publishing creates a public version of your app with a URL you can share.
The Project Editor showing the inline Publish card in the Agent chat with a subdomain field, access options, and a Publish button
7

Open your published app

Open the public URL in a new browser tab and repeat the same checks. The app should work outside the Project Editor before you share it.If the published app behaves differently from Preview, check the publishing logs and any production settings the app needs. For common publishing problems, see Troubleshoot publishing.
The published Runwell app open in a new browser tab, showing the Runwell logo, the runner hero with Ready to work, the Weekly Volume card, and the Log Run button

โ€‹
๐ŸŽ‰ Congratulations โ€” you shipped your first app

You went from a single prompt to a live, shareable URL. Along the way you:
  • Described Runwell to Agent and got a working first version back.
  • Tested it in Preview to confirm runs save and weekly totals update.
  • Published the app and opened it at its public URL.
Thatโ€™s the loop every Replit project follows โ€” prompt, test, improve, publish.

โ€‹
Next steps

Design with Canvas

Explore visual variations of Runwell and apply a new design without rebuilding.

Build in parallel

Run multiple Agent tasks at once so different parts of the app move forward together.

Vibe coding 101

Learn how to guide Agent from idea to working app.

Add a database

Save run history after refresh.