> ## Documentation Index
> Fetch the complete documentation index at: https://docs.makeswift.com/llms.txt
> Use this file to discover all available pages before exploring further.

# 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/site/hosting#default-host), while Integrating with Next.js will
  prompt you to utilize your own [custom
  host](/product/site/hosting#custom-host).
</Info>

<Frame>
  <img src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/create-site.jpg?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=49305ff5bdde18ce21d5ce119e9c7a70" alt="create a site" width="1920" height="1080" data-path="images/quickstart/create-site.jpg" />
</Frame>

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

<Frame>
  <video autoPlay muted loop playsInline title="Create new site from template" className="w-full aspect-video" src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/create-site-from-template.mp4?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=8e467df8a9e507fff9680a4443ac871c" data-path="images/quickstart/create-site-from-template.mp4" />
</Frame>

## Visual Builder overview

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

<Tabs>
  <Tab title="Site Sidebar">
    Explore your sites, pages, routes (beta), layers, files, and settings.

    <Frame>
      <img src="https://mintcdn.com/makeswift/mKSF3H_fuDOndyn1/images/quickstart/builder-layout-site-sidebar.jpg?fit=max&auto=format&n=mKSF3H_fuDOndyn1&q=85&s=cff235180f61b00cc991534bd4234ad3" alt=" Makeswift builder Site Sidebar" width="1920" height="1080" data-path="images/quickstart/builder-layout-site-sidebar.jpg" />
    </Frame>
  </Tab>

  <Tab title="Component Toolbar">
    Access components to add to the Canvas.

    <Frame>
      <img
        src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/builder-layout-component-toolbar.jpg?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=d70a8c684a603cb6233b969165dcb2b2"
        alt=" Makeswift builder
toolbar"
        width="1920"
        height="1080"
        data-path="images/quickstart/builder-layout-component-toolbar.jpg"
      />
    </Frame>
  </Tab>

  <Tab title="Canvas">
    Build your pages and see them come to life with an exact preview.

    <Frame>
      <img src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/builder-layout-canvas.jpg?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=02b0007df8fa04b57a19a7da37660b70" alt=" Makeswift builder canvas" width="1920" height="1080" data-path="images/quickstart/builder-layout-canvas.jpg" />
    </Frame>
  </Tab>

  <Tab title="Properties Sidebar">
    Edit properties of a page, site, or component.

    <Frame>
      <img src="https://mintcdn.com/makeswift/ttFYL1GC4O0eQWyS/images/quickstart/builder-layout-properties-sidebar.jpg?fit=max&auto=format&n=ttFYL1GC4O0eQWyS&q=85&s=42d282be974f428d30604d0c0e8588af" alt=" Makeswift builder panels" width="1920" height="1080" data-path="images/quickstart/builder-layout-properties-sidebar.jpg" />
    </Frame>
  </Tab>
</Tabs>

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.
