Site Builder

Last updated October 21, 2026

Ploy builds landing pages and full websites from a chat. You describe the page, and Ploy's Agent creates it from reusable sections that follow your design system, which it can build from your current website or a Figma file. Pages run on Astro, React and Tailwind CSS, and you can keep drafts private until you publish.

Every Ploy site runs on a modern web stack — Astro, React, TypeScript, and Tailwind CSS. You don't need to know any of this to use Ploy. Ploy's Agent handles the implementation. This page explains how things work under the hood for users who want to understand the architecture or make manual edits.

Limits and plan requirements

• Building and editing use AI credits. Free gives 500 a day up to 2,000 in total, Starter 4,000 a month and Pro 24,000 a month. Larger builds use more.
• Starter includes 1 custom domain family and Pro includes 5.
• Ploy's Agent builds a design system from a website URL on a new site. On a site that already has one, it extends the existing system.
• An import is not an identical copy. Source pages must be public, and private pages, dynamic features, forms and live data connections may need separate work.
• Private pages stay out of your live site but are not password protected.

How Sites Are Structured

A Ploy site is organized into pages, sections, and components:

Example Structure

src/
├── pages/
│   ├── index.astro        (homepage)
│   ├── about.astro         (about page)
│   └── pricing.astro       (pricing page)
├── sections/
│   ├── Hero.tsx
│   ├── Features.tsx
│   ├── Testimonials.tsx
│   └── Pricing.tsx
└── components/
    ├── Button.tsx
    ├── Card.tsx
     └── Badge.tsx

Design System

Your brand's visual identity is stored as a design system — a set of tokens that control colors, typography, spacing, border radius, and shadows across your entire site.

What's Included

• Colors — Primary, secondary, accent, neutral, and semantic colors in light and dark mode.
• Typography — Heading and body font families, weights, and a type scale from xs to 9xl.
• Spacing — Consistent spacing tokens for margins, padding, and gaps.
• Border Radius — Configurable for buttons, cards, inputs, and global defaults.
• Shadows — Shadow color and elevation tokens.

How It Works

The design system is defined in your workspace and compiled into CSS custom properties (Tailwind theme tokens). Every section and component references these tokens, so changing a color in your design system updates it everywhere instantly.

Updating Your Design System

• From chat: Ask Ploy's Agent — "Change our primary color to navy blue" or "Use Inter for headings."
• From Figma: Connect a Figma file and Ploy's Agent will extract your brand tokens automatically.
• From a website: On a new Ploy site, give Ploy's Agent your website URL and it builds a design system from that site. The build runs in the background, so you can keep chatting while it runs, and the chat shows its current step and elapsed time. On a site that already has a design system, Ploy's Agent extends it instead of replacing it. Expand the build to see every step so far. After the build finishes, you can expand it again to see the steps it took. If a build fails or stops, it stays open and marks the step where it ended. If a build cannot be retried again, Ploy's Agent offers to start a fresh build on the same site and waits for your yes. If your site blocks automated visits, the build stops right away and Ploy's Agent tells you why. A fresh build after a stopped or failed one reuses that unfinished build's files instead of adding a second design system, unless you or Ploy's Agent changed them.

Creating Pages

Ask Ploy's Agent to create a page and it'll handle the rest:

• "Add an about page with our team story, values, and a team photo grid"
• "Create a pricing page with three tiers: Free, Pro, and Enterprise"
• "Build a blog with posts from our Notion database"

Ploy's Agent will create the page file, build or reuse sections, apply your design system, and add it to your site's navigation if appropriate.

To work on a page without publishing it, ask Ploy's Agent to keep it private, or to make a separate review copy of an existing page. Private pages live under /private. You can open them in the preview, but they are never published. To make a private page public, ask Ploy's Agent to move it back. Private pages are not password protected; they are simply left out of your live site.

Adding Search to Your Site

This guidance is for adding search to a site you build with Ploy.

We strongly recommend Pagefind for adding search to static Ploy sites. It scans your site's generated HTML after each build, creates a compact search index, and runs queries in the visitor's browser without requiring a hosted search service or database.

Pagefind's Component UI provides accessible, customizable search modals and search boxes that can be added with standard HTML, JavaScript, and CSS. Other search libraries will also work, provided they support sites built with standard HTML, JavaScript, and CSS.

Example prompt: “Add full-text search to my Ploy site using Pagefind's Component UI. Index all published page content, add an accessible search trigger to the site header, support ⌘K and Ctrl+K, style it to match my design system, and generate the search index during production builds.”

Import an existing website

Open Ploy, give the agent your public URL, and ask it to import or reconstruct the website, a page, or a section. Source pages must be publicly reachable over HTTP(S) without signing in.

1. Tell Ploy which pages or sections you want to bring over.
2. Review the resulting pages, including content, images, links, layout, and interactions.
3. Correct anything missing or inaccurate, and check desktop and mobile previews.
4. If the site has never been published, Ploy's Agent publishes the first page after it checks it, so you can share a link. To review before anything is published, ask it to keep the work unpublished. Publish later changes only after reviewing the result.

An import is not a guarantee of an identical copy. Private pages, dynamic features, forms, and live data connections may need separate work. See migration questions and Publishing & Deploys.

To move your whole site, ask Ploy's Agent to rebuild your site on Ploy, or run the Rebuild your site on Ploy Ploybook. Ploy's Agent inventories your site, recommends which pages to rebuild and which to keep on your current host (for example a store, accounts, or app pages), and asks you to approve a plan before it builds. It then builds the pages, checks them, and helps you switch over. Nothing changes on your current site until you approve the switch.

Reuse workspace assets

Find images, videos, fonts, and documents in Library, then Assets. The Assets guide explains how to find files, upload supported files, and check their previews before reuse.

FAQ — External Content

Serving Existing Static HTML Assets

Yes — we can import your existing static HTML assets. Just ask Ploy's Agent to serve them from the project's publicDir. See more in the Astro publicDir configuration reference.

If your static HTML assumes it is served from a base URL, any absolute paths for referenced resources may need to be adjusted to match the Ploy project's file layout.

Client-Side Scripts

Yes — anything that works with a normal web page will work with Astro, including third-party analytics scripts and graphics-processing libraries such as Three.js. See the Astro client-side scripts guide for more details.

Bringing an Outside Repo

We do not recommend bringing in an outside repo built with an arbitrary framework. It may not be compatible with Ploy's hosting infrastructure, and we cannot guarantee a successful conversion.

For an existing public website, give Ploy its HTTP(S) URL and ask for an import or reconstruction instead. The pages must be reachable without signing in. Review the result and correct missing content or behavior before publishing. For a compatible local Astro repository, see Bring your own repo.

Bringing in Public Git Repos as Context

Any publicly accessible Git repository from a major provider — including GitHub, GitLab, and Bitbucket — can be brought in as context. This is useful when your project depends on, or you want to vendor source from, a third party.

One way to do this is to ask Ploy's Agent to bring in the publicly available repository using its HTTPS URL as a new git submodule. From there, your site edits can reference the submodule because it is available in the same sandbox.

Preview & Iteration

Every site has a live preview in the dashboard that updates in real time as Ploy's Agent makes changes. You can:

• See desktop and mobile views
• Click through pages
• Watch changes appear as Ploy's Agent implements them
• Take screenshots for review

When you open a chat, the preview shows the page Ploy's Agent last created or edited there. A link to a specific page opens that page.

Edit Text Directly in Preview

To make a quick copy change, click the text in the preview and edit it directly. This is ideal for last-mile updates such as fixing a typo, tightening a headline, or changing a button label. Direct text edits do not use AI credits in most cases.

If text is hidden behind another element or implemented in a way that cannot be edited deterministically, Ploy may fall back to an AI edit. The product will handle that change through Ploy's Agent instead.

Restore an earlier version

Ploy saves versions of your site automatically as you work. To undo changes, select Versions in the preview toolbar and restore the version you want. On a phone, open the ⋯ menu in the preview toolbar and choose Version history. Restoring changes the editor and preview only; publish again to update your live site.

What's Next?

• Go live — Read Publishing & Deploys to understand how publishing works.
• Add a showpiece effect: Use Ploy Effects to add a Paper Shaders background, image filter, or logo animation tuned to your design tokens.
• Manage form responses — Review captured entries and set up email alerts in Form Submissions.
• Track performance — Set up Analytics to monitor traffic, and use Visitor Identification to see who's visiting.
• Connect your tools — See Integrations to link Figma, GitHub, and more.