---
url: /guide/essentials/project-structure.md
---
# Project Structure

WXT follows a strict project structure. By default, it's a flat folder structure that looks like this:

```html
📂 {rootDir}/
   📁 .output/
   📁 .wxt/
   📁 assets/
   📁 components/
   📁 composables/
   📁 entrypoints/
   📁 hooks/
   📁 modules/
   📁 public/
   📁 utils/
   📄 .env
   📄 .env.publish
   📄 app.config.ts
   📄 package.json
   📄 tsconfig.json
   📄 web-ext.config.ts
   📄 wxt.config.ts
```

Here's a brief summary of each of these files and directories:

* `.output/`: All build artifacts will go here
* `.wxt/`: Generated by WXT, it contains TS config
* `assets/`: Contains all CSS, images, and other assets that should be processed by WXT
* `components/`: Auto-imported by default, contains UI components
* `composables/`: Auto-imported by default, contains source code for your project's composable functions for Vue
* `entrypoints/`: Contains all the entrypoints that get bundled into your extension
* `hooks/`: Auto-imported by default, contains source code for your project's hooks for React and Solid
* `modules/`: Contains [local WXT Modules](/guide/essentials/wxt-modules) for your project
* `public/`: Contains any files you want to copy into the output folder as-is, without being processed by WXT
* `utils/`: Auto-imported by default, contains generic utilities used throughout your project
* `.env`: Contains [Environment Variables](/guide/essentials/config/environment-variables)
* `.env.publish`: Contains Environment Variables for [publishing](/guide/essentials/publishing)
* `app.config.ts`: Contains [Runtime Config](/guide/essentials/config/runtime)
* `package.json`: The standard file used by your package manager
* `tsconfig.json`: Config telling TypeScript how to behave
* `web-ext.config.ts`: Configure [Browser Startup](/guide/essentials/config/browser-startup)
* `wxt.config.ts`: The main config file for WXT projects

## Adding a `src/` Directory

Many developers like having a `src/` directory to separate source code from configuration files. You can enable it inside the `wxt.config.ts` file:

```ts [wxt.config.ts]
export default defineConfig({
  srcDir: 'src',
});
```

After enabling it, your project structure should look like this:

```html
📂 {rootDir}/
   📁 .output/
   📁 .wxt/
   📁 modules/
   📁 public/
   📂 src/
      📁 assets/
      📁 components/
      📁 composables/
      📁 entrypoints/
      📁 hooks/
      📁 utils/
      📄 app.config.ts
   📄 .env
   📄 .env.publish
   📄 package.json
   📄 tsconfig.json
   📄 web-ext.config.ts
   📄 wxt.config.ts
```

## Customizing Other Directories

You can configure the following directories:

```ts [wxt.config.ts]
export default defineConfig({
  // Relative to project root
  srcDir: "src",             // default: "."
  modulesDir: "wxt-modules", // default: "modules"
  outDir: "dist",            // default: ".output"
  publicDir: "static",       // default: "public"

  // Relative to srcDir
  entrypointsDir: "entries", // default: "entrypoints"
})
```

You can use absolute or relative paths.