> ## 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.

# Welcome to Replit

> Replit is the fastest way to go from idea to app, website, dashboard, mobile experience, slide deck, video, or prototype.

export const YouTubeEmbed = ({videoId, title = "YouTube video", startAt}) => {
  if (!videoId) {
    return null;
  }
  let url = "https://www.youtube.com/embed/" + videoId;
  if (startAt) {
    url = url + "?start=" + startAt;
  }
  return <Frame>
      <iframe src={url} title={title} allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
    </Frame>;
};

export const RACHEL_JONES_PROMPT = `Build me a one-page website for an online fitness coach named Rachel Jones. It should feel premium, like a magazine ad — dark, moody, and luxurious, with black and warm gold as the only colors. Big bold headlines, lots of empty space, and elegant serif accents. No bright colors, no rounded "tech startup" vibes.

Here's what should be on the page, top to bottom:

A header bar with a small gold "RJ" logo on the left, the words "RACHEL JONES — FITNESS COACH" next to it, a few menu links across the middle (About, Coaching, Programs, Success Stories, Resources), and a gold "Book a Free Consultation" button on the right.

A huge hero section with a dramatic close-up photo of a strong, fit woman lit with warm gold light against a black background. On the left side over the dark area, put a giant three-line headline:
"STRONGER BODY. CONFIDENT MIND. UNSTOPPABLE YOU." — with the last line in gold.
Underneath: "Personalized coaching. Proven strategies. Real results that last." Then two buttons: a gold "Work With Rachel" and an outlined "Watch Rachel's Story" with a play icon. Below that, show 4 little circular client photos and 5 gold stars with the line "Trusted by 500+ women worldwide."
On the right side, layered on the photo, write "Rachel Jones" in a fancy gold script font, with "CERTIFIED FITNESS COACH" underneath, and a list of credentials with little gold icons: NASM Certified, Precision Nutrition Level 1, Women's Fitness Specialist, 10+ Years Experience.

A "Featured In" strip — a thin row showing fake magazine logos written in different fancy fonts: Women's Health, Oxygen, Forbes, mindbodygreen, Fit Pregnancy, Shape.

A "Holistic Approach" section — centered headline "A Holistic Approach. Real Results." in an elegant serif. Below it, four columns side by side, each with a small gold icon, a title, and a one-line description: Custom Training, Nutrition Guidance, Mindset Coaching, Accountability.

A "Success Stories" section — on the left, the headline "Stronger on the Outside. Stronger on the Inside." with a "See More Success Stories" button. On the right, three before/after transformation photos of women, each with a big gold result number underneath ("−24 LBS in 16 weeks", "+18 LBS of muscle", "−20% body fat in 14 weeks"), a short italic quote, and the client's first name.

A final call-to-action panel — a wide dark card split into three parts. Left: a friendly portrait of Rachel. Middle: headline "You Don't Need More Motivation. You Need the Right Plan." with a gold "Book Your Free Consultation" button. Right: three small benefits with icons — "1:1 Strategy Call", "Personalized Plan", "Start Your Transformation".

For the photos, generate them — I want a fit woman with warm gold dramatic lighting on a black background, very cinematic. The before/after photos should be full-body in the same dark studio style.

Make it look like a real, professional coaching brand — not a template. Don't add forms, signups, or extra pages — just this one beautiful landing page.`;

export const PACE_PROMPT = `Build me a personal running web app called "Pace".

I want a clean, modern web app where I can track my runs and see my progress at a glance — a friendlier, more visual version of a running journal like Strava or Nike Run Club, but simpler and prettier. It only needs to support one user (me) for now, and my profile name should be Alex Morgan. Pre-fill it with about a month of pretend running history so it looks alive from the moment I open it — runs through San Francisco, a mix of easy runs, tempo runs, long runs, and recovery runs, with at least 4–5 runs in the past week so the dashboard looks active.

The app should run in any modern browser, feel fast, and be fully responsive — great on desktop, tablet, and phone.

Look and feel
The vibe is sporty, premium, "athletic brand" — black, white, and a punchy lime green as the accent color. Use the Inter font everywhere. Rounded corners on everything (cards, buttons, pills). It should feel calm and uncluttered, not busy. Light mode by default. Smooth, subtle animations when pages transition, when cards appear, and when I click buttons — it should feel responsive and alive, not stiff.

Overall navigation
A top nav bar with the Pace logo on the left and 5 links across the middle: Home, Runs, Plan, Stats, Profile. The active link has a lime underline; inactive links are gray. On the right: a lime "Log a Run" button (always visible) and a round profile photo (clicking it opens Profile).

On smaller screens, the middle nav links collapse into a hamburger menu, but the lime "Log a Run" button stays visible.

The Home page (the main page) — a scrollable feed, top to bottom:

Greeting. A friendly greeting that changes with the time of day ("Good morning, Alex" / "Good afternoon, Alex" / "Good evening, Alex"), with a subtitle "Ready for your next run?".

Hero banner card. A wide photo of someone running on pavement, with a dark gradient on the left so the text is readable. Big white headline: "You don't find willpower, you create it." Underneath: "Keep showing up." Bottom-left: a lime pill button "Start a Run" with a little black play-circle. Clicking it opens the Log a Run dialog.

"This Week" stats. A row of four cards (2×2 grid on smaller widths): Distance (km), Time (h/min), Elevation (m), Runs (count). Each card: small icon, big number, "+12% vs last week" caption, thin squiggly line graph at the bottom (lime, blue, purple, lime). Numbers reflect my actual runs from the last 7 days.

Weekly Progress card. Title + small "View goals" link. Then "X of Y runs completed" and a big bold percentage on the right. Gradient lime progress bar. Below: seven day pills (M T W T F S S) with date numbers. Today is a black filled circle; days I've run show a lime circle with a white checkmark; others are empty circles.

Your Last Run card. A real interactive map (Leaflet, Mapbox, or similar) showing the route of my most recent run as a lime line, date in the corner, lime "View Run" button, and four stats (Distance, Time, Pace, Calories). Click → full run detail page.

Recent Runs section. Title "Recent Runs" + "See all" link. Three rows, one per recent run: tiny green map-line thumbnail on the left, run name + date, distance + pace lined up on the right. Click a row → run detail. A small "Delete" icon appears on hover.

Upcoming Workout card. Title + small lime circle icon with footprints. Workout name "Tempo Run", "Tomorrow · 6:30 AM". Three stats: 8 km, 5:40/km target pace, "Moderate" intensity. A muted gray "View workout" button. (Placeholder — no real training plan yet.)

Recent Achievements card. Two badges, each with a colorful icon, the badge name, and a one-line description. First is a real PR from my history (e.g. "10K Crusher — Completed a 10K in under 60 minutes"). Second is a placeholder: "Early Bird — Completed 5 runs before 7 AM" with a lime crescent moon icon.

The Runs page
Full list of all my runs, grouped by month (sticky month headers as I scroll). Each row like the recent-runs rows. A search input in the top-right filters by name or run type (Easy, Tempo, Long, Recovery, Interval). Click a row → run detail.

The Stats page — a scrollable view with:
- Time-range pill tabs at the top (7D / 30D / 3M / 6M / 1Y / All).
- Three KPI numbers (Total Distance, Avg Pace, Total Time), each with a green or red badge for change vs the previous period.
- A smooth lime area chart of distance over time. Hover a point to see that day's value.
- Below: a small bar chart of "runs per day of week" and a list of personal records (fastest 5K, fastest 10K, longest run, etc.).

The Plan page
A weekly calendar of upcoming workouts (placeholder — mostly the visual shell). Each day is a row showing what's planned (or "Rest day"). Today's row highlighted lime.

The Profile page
Avatar, name, weekly goal setting, total all-time stats (total distance, total runs, total hours), an "Upgrade to Pro" card with a lime sparkle and "Upgrade Now" button, and a settings list (units km/mi, notifications, sign out).

The "Log a Run" dialog (modal that centers on desktop, slides up from the bottom on mobile):
- Type of run (segmented control: Easy / Tempo / Long / Recovery / Interval)
- Distance in km (number input)
- Duration (mm:ss or hh:mm:ss input)
- Date and time (date and time pickers)
- Optional name
- Big lime "Save Run" button at the bottom
After saving: smooth dismiss, dashboard updates instantly, small toast confirmation.

The Run Detail page (a dedicated page when I click a run):
- Big interactive map of the full route at the top
- Date, run type chip, back link
- Stats row (Distance, Duration, Avg Pace, Calories)
- Per-kilometer splits with pace per km
- "..." menu with Edit and Delete

How it should behave
- The greeting changes based on time of day.
- Hero "Start a Run" and the nav "Log a Run" both open the same Log a Run dialog.
- Loading skeletons instead of blank space.
- Smooth page transitions.
- Fully responsive — every screen looks great on desktop, tablet, and phone.

Things to be honest about
- No real elevation data yet — use a sensible placeholder for the elevation stat card and flag it.
- The little route thumbnails in the recent-runs list can be a generic green squiggle if the real route shape would slow the list down — the big Run Detail map should be real.
- "Upcoming Workout" and the Plan page are placeholders — no training plan engine yet.
- No live GPS tracking in this first version — runs are added by manually filling the Log a Run form.

Build the whole thing end-to-end so it's actually usable: I should be able to open the URL, see my Alex Morgan dashboard fully populated with realistic San Francisco runs, log a new run from either the hero button or the nav, and have it show up in my stats and recent runs immediately.`;

export const VELOCITY_PROMPT = `Build me a luxury supercar rental web app called "Velocity."

Vibe & look
Premium, cinematic, dark theme — think Ferrari + Apple. Big hero imagery, generous whitespace, smooth hover and scroll animations. Use a black/charcoal background with a bold accent color (deep red or electric orange). Clean modern sans-serif for body text, an elegant display font for headings. Mobile-friendly throughout.

Pages I need

Landing page — full-bleed hero with a featured supercar and a tagline like "Drive the extraordinary." Below: a search bar (pickup location, pickup date, return date), a "Featured fleet" carousel of 4–6 cars, a "Popular destinations" section (Monaco, Dubai, Los Angeles, Miami, etc.), a short "Why Velocity" three-column section (concierge delivery, full insurance, 24/7 support), and a footer.
Fleet page — grid of all cars with filters (brand, price range, body type) and sort (price, horsepower). Each card shows photo, brand + model, year, daily rate, and an "Available" badge.
Car detail page — large photo gallery, full specs (engine, horsepower, top speed, 0–60, transmission, drivetrain, seats), description, daily rate, a calendar showing unavailable dates, and a "Reserve" button.
Checkout page — pick pickup location and dates, choose add-ons (full insurance, chauffeur), enter driver details (name, email, phone, license number, date of birth), see an itemized price breakdown (rental × days, add-ons, taxes, fees, total), and confirm.
Confirmation page — big confirmation code, trip summary, "Add to my trips" feeling.
My Trips page — list of the signed-in user's past and upcoming reservations.
Accounts
Let people sign up and sign in (email + Google sign-in). Show their name and avatar in the top nav once signed in. Only signed-in users can reserve a car or see their trips — each person only sees their own reservations.

Data that must persist (don't disappear on refresh)

The car fleet (brand, model, year, daily rate, photos, specs, description)
Pickup locations (name, city, country, address)
Featured destinations
Every reservation (which car, which user, pickup/return dates, driver details, price breakdown, status, confirmation code)
Each user's favorited cars
Use a real PostgreSQL database for all of this.

Booking rules

A car cannot be double-booked. If someone tries to reserve dates that overlap an existing reservation for the same car, show a clear message: "This car is already booked for the selected dates. Please choose different dates."
Back-to-back bookings are fine (one trip's return day can equal the next trip's pickup day).
Return date must be after pickup date.
Each reservation gets a unique confirmation code like VEL-XXXXXXXX.
Nice-to-have features

A heart icon on each car to favorite it; favorites show on the user's profile.
Search the fleet by brand or model.
Show prices in USD with thousands separators.
Loading states and graceful error messages — never a blank screen.
Seed data so the app looks alive on first load
Pre-populate the database with ~8 supercars (Ferrari SF90 Stradale, Lamborghini Aventador SVJ, McLaren 765LT, Porsche 911 GT3 RS, Bugatti Chiron, Aston Martin DBS, Mercedes-AMG GT Black Series, Rolls-Royce Ghost), 4–6 pickup locations (Monaco, Dubai, LA, Miami, NYC, London), and 4 featured destinations with beautiful photos.

When you're done, tell me:

How to sign in and try booking a car
How to test that two people can't book the same car for overlapping dates
How to test that I only see my own reservations and not someone else's
Build it cleanly with good defaults — I don't want to manage hosting, credentials, or database setup myself.`;

export const PromptActions = ({prompt = "", campaign = "docs-prompt-actions"}) => {
  const LZ_SRC = "https://cdnjs.cloudflare.com/ajax/libs/lz-string/1.5.0/lz-string.min.js";
  const ensureLZString = () => {
    if (typeof document === "undefined") return;
    if (window.LZString) return;
    if (document.querySelector(`script[src="${LZ_SRC}"]`)) return;
    const s = document.createElement("script");
    s.src = LZ_SRC;
    s.async = true;
    document.head.appendChild(s);
  };
  const handleCopy = async e => {
    const btn = e.currentTarget;
    if (!prompt) return;
    try {
      await navigator.clipboard.writeText(prompt);
    } catch {
      const ta = document.createElement("textarea");
      ta.value = prompt;
      document.body.appendChild(ta);
      ta.select();
      try {
        document.execCommand("copy");
      } catch {}
      document.body.removeChild(ta);
    }
    const original = btn.dataset.label || btn.innerText;
    btn.dataset.label = original;
    btn.innerText = "Copied!";
    setTimeout(() => {
      if (btn.isConnected) btn.innerText = original;
    }, 1500);
  };
  const handleBuild = () => {
    if (!prompt || typeof window === "undefined") return;
    const utm = `utm_source=replit-docs&utm_medium=docs&utm_campaign=${encodeURIComponent(campaign)}&utm_content=prompt-actions`;
    let url;
    if (window.LZString) {
      const encoded = window.LZString.compressToEncodedURIComponent(prompt);
      url = `https://replit.com/?prompt=${encoded}&referrer=replit-docs&${utm}`;
    } else {
      url = `https://replit.com/?prompt=${encodeURIComponent(prompt)}&referrer=replit-docs&${utm}`;
    }
    window.open(url, "_blank", "noopener,noreferrer");
  };
  ensureLZString();
  const baseButtonStyle = {
    display: "inline-flex",
    alignItems: "center",
    gap: "6px",
    padding: "8px 16px",
    borderRadius: "8px",
    fontSize: "14px",
    fontWeight: 500,
    cursor: "pointer",
    lineHeight: 1.2,
    fontFamily: "inherit",
    textDecoration: "none"
  };
  return <div style={{
    display: "flex",
    gap: "12px",
    margin: "16px 0",
    flexWrap: "wrap",
    alignItems: "center"
  }}>
      <button type="button" onClick={handleCopy} style={{
    ...baseButtonStyle,
    background: "transparent",
    color: "inherit",
    border: "1px solid rgba(127,127,127,0.4)"
  }}>
        Copy the prompt
      </button>
      <button type="button" onClick={handleBuild} style={{
    ...baseButtonStyle,
    background: "#F26207",
    color: "#FFFFFF",
    border: "1px solid #F26207"
  }}>
        Build on Replit ↗
      </button>
    </div>;
};

<YouTubeEmbed videoId="jb8Qh6lxTaw" title="Welcome to Replit" />

If you have an idea you want to build, you are in the right place.

Replit is the fastest way to go from idea to app, right from your browser. You can also use Replit to create websites, dashboards, mobile experiences, slide decks, animated videos, prototypes, and more.

Your journey with Replit starts with a prompt. Describe your idea, and Replit will help you shape it, build a first version, publish it, and share it with the world.

This way of building is often called vibe coding: you bring the idea, taste, and judgment; Agent helps turn it into software you can test and improve.

## See what you can build

Replit can help you create apps that work and look polished enough to share.

<Frame>
  <img src="https://mintcdn.com/replit/J4ncie7WOv6XABSq/images/build-examples/luxury-ride-finder.png?fit=max&auto=format&n=J4ncie7WOv6XABSq&q=85&s=d9087b1e8ef7151e9a615046fd834cd5" alt="Velocity, a premium supercar rental app with a dark dashboard, booking form, and luxury car imagery" width="2880" height="1800" data-path="images/build-examples/luxury-ride-finder.png" />
</Frame>

<PromptActions prompt={VELOCITY_PROMPT} campaign="docs-welcome-velocity" />

**[Premium booking app →](https://luxury-ride-finder.replit.app/)** Browse cars, search availability, and reserve a high-end rental experience.

<Frame>
  <img src="https://mintcdn.com/replit/yG4SOQfWGbnjXJ3G/images/build-examples/pace-running-tracker.png?fit=max&auto=format&n=yG4SOQfWGbnjXJ3G&q=85&s=226e18de3c853f5e3bd1039b4ffea4a2" alt="Pace, a premium running tracker dashboard with performance metrics, recovery status, route maps, and progress charts" width="2880" height="1800" data-path="images/build-examples/pace-running-tracker.png" />
</Frame>

<PromptActions prompt={PACE_PROMPT} campaign="docs-welcome-pace" />

**[Running tracker →](https://run-tracker-pace.replit.app/)** Track runs, progress, recovery, and training insights in a polished product dashboard.

<Frame>
  <img src="https://mintcdn.com/replit/yG4SOQfWGbnjXJ3G/images/build-examples/rachel-jones-coach.png?fit=max&auto=format&n=yG4SOQfWGbnjXJ3G&q=85&s=b43fe0b074a4473b478a04ede1bb53ff" alt="Rachel Jones Fitness Coach landing page hero — a dramatic dark photo of Rachel with the headline Stronger body. Confident mind. Unstoppable you., a Work with Rachel call to action, four certification credentials, and Women's Health, Forbes, and other press logos" width="2880" height="1800" data-path="images/build-examples/rachel-jones-coach.png" />
</Frame>

<PromptActions prompt={RACHEL_JONES_PROMPT} campaign="docs-welcome-rachel-jones" />

**[Coaching landing page →](https://rachel-jones-coach.replit.app/)** Launch a beautiful page for a service business with testimonials, offers, and a consultation call to action.

<Card title="Start building — it's free" icon="rocket" href="https://replit.com">
  Create your Replit account and ship your first app from a single prompt.
</Card>

## Getting started

Pick the project closest to what you want to make and open the guide. Each one walks you from a single prompt to a published URL you can share — no setup, no decisions to agonize over.

<CardGroup cols={2}>
  <Card title="Build and publish your first app" icon="rocket" href="/build/your-first-app" img="/images/runwell/runwell-published.png" horizontal>
    A guided first project from prompt to a live URL.
  </Card>

  <Card title="Launch a landing page" icon="rectangle-list" href="/build/landing-page" img="/images/build-examples/rachel-jones-coach.png" horizontal>
    Publish an offer or waitlist page people can respond to today.
  </Card>

  <Card title="Prototype a product idea" icon="lightbulb" href="/build/prototype-an-idea" img="/images/build-examples/pace-running-tracker.png" horizontal>
    Turn a concept into a working flow you can test this week.
  </Card>

  <Card title="Turn a Figma design into an app" icon="pen-nib" href="/build/figma-to-app" img="/images/fitstart/turn-mockup-into-app/figma-build-result.png" horizontal>
    Import a frame, see it as a working app, refine from there.
  </Card>

  <Card icon="chart-simple" href="/build/dashboard" horizontal>
    Turn a spreadsheet, database, or API into useful insight.
  </Card>

  <Card title="Build a mobile app" icon="mobile-screen" href="/build/mobile-app" img="/images/build-examples/mobile-app.png" horizontal>
    Make something designed for phones — no Xcode, no Android Studio.
  </Card>
</CardGroup>

## Import an existing project

Already have code, a design, or a project on another platform? Import it into Replit and continue with Agent.

<CardGroup cols={2}>
  <Card title="Import from GitHub" icon="github" href="/build/import-from-providers">
    Bring a public or private repository into Replit and get it running.
  </Card>

  <Card title="Import from Figma" icon="figma" href="/build/figma-to-app">
    Convert a Figma frame into an interactive React app.
  </Card>

  <Card title="Import from Vercel" href="/build/import-from-providers">
    Pull in the GitHub repository behind a Vercel project.
  </Card>

  <Card title="Import from Bolt" href="/build/import-from-providers">
    Export from Bolt to GitHub, then import in Replit.
  </Card>

  <Card title="Import from Lovable" href="/build/import-from-providers">
    Export from Lovable to GitHub, then import in Replit.
  </Card>

  <Card title="Import from ZIP" href="/build/import-from-providers">
    Upload a `.zip` archive and continue building with Agent.
  </Card>
</CardGroup>

## Your next step

If you want a guided first project, start with [Build and publish your first app](/build/your-first-app).

If you came with a specific goal, choose the card that best matches what you want to make.

To understand how the documentation is organized, see [Guide to Replit Docs](/build/use-the-docs).