> ## Documentation Index > Fetch the complete documentation index at: https://beta-docs.replo.app/llms.txt > Use this file to discover all available pages before exploring further. # Website Builder > Preview your site as Replo edits it, and review it before you publish. export const TryPromptButton = ({prompt, imageSrc, imageAlt = "Template preview", imageStyles = {}, buttonCta = "Build in Replo"}) => { const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(null); const API_BASE = "https://api.replo.app"; const APP_URL = "https://dashboard.replo.app"; const LoaderIcon = ; const ChevronIcon = ; async function postJSON(url, body, headers = {}, timeoutMs = 120000) { const controller = new AbortController(); const timeoutId = setTimeout(() => controller.abort(), timeoutMs); try { const response = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json", ...headers }, body: JSON.stringify(body ?? ({})), signal: controller.signal }); const responseText = await response.text(); if (!response.ok) throw new Error(`API Error: ${response.status}`); return responseText ? JSON.parse(responseText) : {}; } finally { clearTimeout(timeoutId); } } async function handleTryPrompt(event) { event.preventDefault(); event.stopPropagation(); setIsLoading(true); setError(null); try { const body = { prompt, file: null }; const {seed} = await postJSON(`${API_BASE}/api/v1/marketing/issue-marketing-site-jwt`, body); if (!seed) throw new Error("No seed returned from API"); const url = new URL(APP_URL); url.searchParams.set("type", "agent"); url.hash = `seed=${encodeURIComponent(seed)}`; window.open(url.toString(), "_blank"); setIsLoading(false); } catch (caughtError) { console.error("Failed to generate prompt:", caughtError); const message = caughtError instanceof Error ? caughtError.message : null; setError(message ?? "Something went wrong. Please try again."); setIsLoading(false); } } return
{} {imageSrc && {imageAlt}} {}
{} {} {error &&
{error}
}
; }; export const Screenshot = ({src, altText, width, shadow = true}) => { const generateAltText = imageSrc => { if (!imageSrc) return "Screenshot"; const filename = imageSrc.split("/").pop() ?? ""; const nameWithoutExt = filename.replace(/\.[^/.]+$/, ""); const readable = nameWithoutExt.replace(/[-_]/g, " ").replace(/\b\w/g, char => char.toUpperCase()); return readable === "" ? "Screenshot" : readable; }; const finalAltText = altText ?? generateAltText(src); const imageWidth = width ? `${width}px` : "100%"; return
{} {}
{finalAltText}
; }; The Website Builder shows your live site and updates as Replo edits it. This is where you watch pages get built, click through them, and review everything before it goes out to customers. You can reach the Website Builder from the **+** in the tab bar or the Cmd+K menu, or just ask Replo to work on your site and it opens here automatically. Describe a page in the chat and it builds here: ```text theme={null} Build a landing page for a hand-poured soy candle brand, with a hero, a three-product grid, a reviews section, and a newsletter signup. Use a warm, minimal style. ``` ## What you can do You direct changes from the chat and review the results in this panel. There is no drag and drop: the chat is the editor, and the builder is where you see the result. * **Preview your site** as Replo builds and changes it. * **Select an element** on the page to point Replo at it. Your next prompt applies to exactly what you selected, so "make this bigger" means *this*. * **Switch between pages** to review each one. * **Check different screen sizes** to see how the site looks on desktop, tablet, and mobile. * **Review version history** to compare changes over time and restore a previous version. ## Working with Replo Ask for changes in the chat and watch them appear here. Reviewing in the same panel Replo is editing means there is no copy to sync and no preview to refresh: what you see is what will publish. ## Target a specific element When you want to change one thing on the page, target it directly instead of describing where it is. Turn on **select mode** by clicking the cursor icon in the chat composer, just left of the send button; it highlights when it is on. With select mode on, the builder prompts you to **select any content to target your edits**: click an element on the page and it attaches to your next message, so Replo changes exactly that and nothing else. Here, selecting the hero heading and asking to make it more compelling rewrites just that headline, leaving the rest of the page untouched. ## Share a copy of your page The **Share** button next to Publish creates a reusable share link (a `try.replo.app` link) that others can open in Replo to get their own copy of the page. This is different from [publishing](/publishing): it shares the page itself inside Replo rather than putting your store on the internet. Click **Create link** once, then copy the link from the share panel; you can refresh it to issue a new one. ## Preview on different screen sizes Use the viewport toggle in the top bar to preview your site at **desktop**, **tablet**, and **mobile** widths. Switch to mobile to check how the layout reflows and that the mobile menu works before you publish. ## Page and site settings The **More options** menu (the sliders icon in the top bar) is where you reach a page's settings, the site's settings, the design library, and version history. You can also duplicate or delete the current page from here. There are two levels of settings, and the difference comes down to scope. **Page settings** apply to the one page you have open: its title, description, social preview, and whether that single page shows up in search. **Site settings** apply to every page at once: your site name, default social preview and favicon, tracking scripts and pixels, and your domains. As a rule of thumb, anything you want to differ from page to page lives in Page settings, and anything that should be the same everywhere lives in Site settings. Page settings can fall back to your site defaults, so set the broad strokes once at the site level and only override per page when a specific page needs something different. ### Page settings Each page has a **Page settings** panel with its title, description, and social preview image, plus a **Show in search results** toggle to hide that single page from Google and other search engines. You can reset a page back to the site defaults. ### Site settings Site settings apply to the whole site, and are split across three tabs: **General**, **Scripts & Pixels**, and **Domains**. General controls how your site shows up: its **name** and **description**, a **social preview image** (1200 × 630) for when the link is shared, and a **favicon** for browser tabs. A live **search preview** shows how your listing looks on Google as you type. Add tracking without touching code. Toggle **Cookie consent** (GDPR/CCPA) on or off, then connect **pixels** like Google Analytics 4, Google Tag Manager, Meta, TikTok, Pinterest, Reddit, and Snapchat, plus **Behavior Analytics** tools for heatmaps and click tracking. For the full analytics setup, see [Integrations](/apps/integrations). By default your site is live on a `replosites.com` subdomain. The **Domains** tab is where you connect your own domain so customers see your brand instead. See [Custom domains](/custom-domains) for the full walkthrough. ### Design library The design library holds your site's visual tokens: its **colors** (background, foreground, primary, accent, and more) and its **typography** (font roles like your sans font). Editing a token updates the whole site at once, so every page stays consistent. This is the same brand system [Brand Studio](/apps/brand-studio) sets up for you. ### Version history Every change is saved to **version history**, with a labeled entry for each edit, who made it, when, and how many pages changed. The latest version is marked current. To roll back, hover the version you want and click the **restore** icon (the circular arrow on the right of the entry). Replo then shows you exactly which pages will change to match that version, including any that will be deleted, so you can confirm before anything is overwritten. Settings and edits go live with your next publish, like any other change. ## Related Take your site live. Connect your own domain. Set up your brand system. Add analytics and pixels.