Skip to main content
⏰ Estimated time: 10 minutes By the end of this guide, you will have a small app published at a URL you can share.
The selected template built as a website and open at its public Replit URL
You will start with a polished template, turn it into a functional website, and publish it. The exact templates available may change, so choose one that fits what you want to make.

​
Before you start

You need a Replit account. Building a new app from a Design frame requires Core or Pro. See Build your design and Billing for plan details. The goal is to finish one complete loop:
  • Choose a template in Replit Design,
  • Build it 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.

​
Choose, build, and publish a template

1

Browse design templates

Open replit.com/design. Browse the featured templates or filter by Landing Pages, Mobile, Prototypes, and other formats.
The Replit Design gallery with featured templates and format filters
2

Preview and use a template

Select a template to inspect it, then select Use template. Replit creates a new project and places the template on the Design canvas. If you started from a template’s cover page instead, see Start from a template for the remix flow.
A Replit Design template preview with the Use template button
The remixed template opens on the Design canvas inside its new project.
The selected template remixed onto the Design canvas in a new Replit project
3

Turn the design into a website

A template starts as a design mockup. Before it can be published, switch to Build and ask Agent to turn the selected design into a functional website. For example:
Build this selected template as a functional website. Preserve its visual design and make its navigation and contact actions work.
Agent creates a website artifact in the same project and uses the selected design as its source.
The Publish button is also visible in Design. If the project contains only design mockups, Publishing reports that there is nothing to deploy yet and directs you to ask Agent to build an app. After a Website artifact exists, you can publish from either Design or Build.
The Build workspace with a selected portfolio design attached, the build request in Agent chat, and Publishing explaining that a design-only project has nothing to deploy yet
4

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:
  • Follow the main navigation.
  • Use the template’s buttons and forms.
  • See a clear success or validation state after an action.
  • Refresh the page and use the site 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 template-based website running in the Project Editor Preview
Want to explore visual variations before publishing? See Explore suggestions to generate alternative looks side by side and apply the one you like.
5

Publish your app

When Preview works, select Publish. Confirm the generated subdomain, choose who can access the app, and review the security settings. Then select Publish in the dialog.Publishing creates a public version of your app with a URL you can share.
The Publish dialog with the generated subdomain, access settings, and Publish button
6

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 completed template-based website open at its public Replit URL

​
🎉 Congratulations — you shipped your first app

You went from a design template to a live, shareable URL. Along the way you:
  • Chose and remixed a template from Replit Design.
  • Asked Agent to turn the selected design into a functional website.
  • Tested the result in Preview.
  • Published the app and opened it at its public URL.
That’s a complete Replit workflow — choose a starting point, build, test, improve, and publish.

​
Next steps

Design with Canvas

Explore visual variations and apply a new design without rebuilding.

Explore Design →
Build in parallel

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

Learn more →
Vibe coding 101

Learn how to guide Agent from idea to working app.

Open the guide →
Add a database

Save app data after refresh.

Continue →