---
sidebar_position: 2
---

# Creating a Project

## Project Generation

Now that the CLI is installed, you can generate a new project by using the `wails init` command.

Pick your favourite framework:

```mdx-code-block
import Tabs from "@theme/Tabs";
import TabItem from "@theme/TabItem";

<Tabs
    defaultValue="Svelte"
    values={[
        {label: "Svelte", value: "Svelte"},
        {label: "React", value: "React"},
        {label: "Vue", value: "Vue"},
        {label: "Preact", value: "Preact"},
        {label: "Lit", value: "Lit"},
        {label: "Vanilla", value: "Vanilla"},
    ]}
>
<TabItem value="Svelte">
    Generate a <a href={"https://svelte.dev/"}>Svelte</a> project using JavaScript with:<br/><br/>

    wails init -n myproject -t svelte

If you would rather use TypeScript:<br/>

    wails init -n myproject -t svelte-ts

</TabItem>
<TabItem value="React">
    Generate a <a href={"https://reactjs.org/"}>React</a> project using JavaScript with:<br/><br/>

    wails init -n myproject -t react

If you would rather use TypeScript:<br/>

    wails init -n myproject -t react-ts

</TabItem>
<TabItem value="Vue">
    Generate a <a href={"https://vuejs.org/"}>Vue</a> project using JavaScript with:<br/><br/>

    wails init -n myproject -t vue

If you would rather use TypeScript:<br/>

    wails init -n myproject -t vue-ts

</TabItem>
<TabItem value="Preact">
    Generate a <a href={"https://preactjs.com/"}>Preact</a> project using JavaScript with:<br/><br/>

    wails init -n myproject -t preact

If you would rather use TypeScript:<br/>

    wails init -n myproject -t preact-ts

</TabItem>
<TabItem value="Lit">
    Generate a <a href={"https://lit.dev/"}>Lit</a> project using JavaScript with:<br/><br/>

    wails init -n myproject -t lit

If you would rather use TypeScript:<br/>

    wails init -n myproject -t lit-ts

</TabItem>
<TabItem value="Vanilla">
    Generate a Vanilla project using JavaScript with:<br/><br/>

    wails init -n myproject -t vanilla

If you would rather use TypeScript:<br/>

    wails init -n myproject -t vanilla-ts

</TabItem>
</Tabs>
```

<hr />

There are also [community templates](../community/templates.mdx) available that offer different capabilities and frameworks.

To see the other options available, you can run `wails init -help`.
More details can be found in the [CLI Reference](../reference/cli.mdx#init).

## Project Layout

Wails projects have the following layout:

```
.
├── build/
│   ├── appicon.png
│   ├── darwin/
│   └── windows/
├── frontend/
├── go.mod
├── go.sum
├── main.go
└── wails.json
```

### Project structure rundown

- `/main.go` - The main application
- `/frontend/` - Frontend project files
- `/build/` - Project build directory
- `/build/appicon.png` - The application icon
- `/build/darwin/` - Mac specific project files
- `/build/windows/` - Windows specific project files
- `/wails.json` - The project configuration
- `/go.mod` - Go module file
- `/go.sum` - Go module checksum file

The `frontend` directory has nothing specific to Wails and can be any frontend project of your choosing.

The `build` directory is used during the build process. These files may be updated to customise your builds. If
files are removed from the build directory, default versions will be regenerated.