> This page is for Product.

> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.makeswift.com/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.makeswift.com/_mcp/server.

# Creating your site

Learn the basics of building with Makeswift, including components, theming, responsive design, and publishing.

If you already have a site and want to create a new one, click the **Create new site** button under the site list dropdown. If this is your first time using Makeswift, [create a free account](https://app.makeswift.com/signup). You'll then be taken to the page for creating a new site.

You have two options to get started: **Start with the builder** or **Integrate with Next.js**.

> **Info**
>
> Starting with the Visual Builder utilizes Makeswift's [default host](/product/docs/settings/site/hosting#default-host), while Integrating with Next.js will
> prompt you to utilize your own [custom host](/product/docs/settings/site/hosting#custom-host).

![create a site](/_fern-img/9c535e88774646765825596cac2bae5e7ca33bc377cb07d9beea06fafc783def.webp)

Click **Go to the builder**, and you'll have a list of templates to choose from. Templates come with existing assets (images, logos, etc.), colors, text styles, and layouts for you to begin customizing.

Choose the **Venture** template and click **Use this site**.

## Visual Builder overview

Once your new site is created, you'll be taken to the Visual Builder which is composed of 4 main sections:

#### Navigation Sidebar

Explore your pages and elements, and open files and settings.
![Makeswift builder Navigation Sidebar](/_fern-img/04498e08bed9c58d897cdbe083db647001696aa5c3e5edf5ecc56bff951190c1.webp)

#### Component Toolbar

Access components to add to the Canvas.
![ Makeswift builder
toolbar](/_fern-img/5e120ea447c1765f21b37651cb27456095ac2d336508400f1a8585544fe85a4c.webp)

#### Canvas

Build your pages and see them come to life with an exact preview.
![ Makeswift builder canvas](/_fern-img/06c6e34c60fa80adf2c54138674a5771972e50dc4d2b143f683840c2576695f0.webp)

#### Properties Sidebar

Edit properties of a page, site, or component.
![ Makeswift builder panels](/_fern-img/405a36f41c03791ebbe47981ed0b520ce1add42bb786b51ed4df53f0a6954598.webp)

Before moving on, take a few minutes to explore the Canvas and its components. Click on any component in the Canvas to see its corresponding properties in the Properties Sidebar.

## In the next section...

You'll learn about how to customize components within the Makeswift Visual Builder.