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

# Folder Structure

> Understanding Global vs. Local scope in Squeditor architecture.

Squeditor forces a strict separation of concerns. The framework engine is completely isolated from the templates that consume it.

## The Mental Model: Global vs Local

<Card>
  <Tree>
    <Tree.Folder name="[workspace-root]" defaultOpen>
      <Tree.Folder name="squeditor" />

      <Tree.Folder name="my-project" />

      <Tree.Folder name="another-project" />
    </Tree.Folder>
  </Tree>
</Card>

**Crucial Rule:**
The `squeditor/` directory contains `zero` template content. Templates contain `zero` framework logic. Templates reference the framework only via `config.framework: '../squeditor'` in their config file. **Never manually edit files inside the `squeditor/` core folder while building a site.**

## A Look Inside a Project

When you scaffold a new template, your working environment (`my-project/`) handles data, uncompiled SCSS/PHP, and bundled output securely.

### Workspace Breakdown

<Card>
  <Tree>
    <Tree.Folder name="[workspace-root]" defaultOpen>
      <Tree.Folder name="squeditor-framework" defaultOpen>
        <Tree.Folder name="scripts" defaultOpen>
          <Tree.Folder name="utils" />

          <Tree.File name="build-components.js" />

          <Tree.File name="snapshot.js" />

          <Tree.File name="dev.js" />
        </Tree.Folder>

        <Tree.File name="uikit-manifest.json" />
      </Tree.Folder>

      <Tree.Folder name="my-project" defaultOpen>
        <Tree.File name="squeditor.config.js" />

        <Tree.Folder name="src" />

        <Tree.Folder name="dist" />
      </Tree.Folder>
    </Tree.Folder>
  </Tree>
</Card>

### The `src` vs `dist` Relationship

Everything you code happens in the `src/` directory.

* You write `.php` files in `src/pages/`.
* You write `.scss` files in `src/assets/scss/`.

When you compile (`npm run build`), the framework:

1. Compiles the SCSS to Tailwind.
2. Boots up a local server.
3. Visits every `.php` page you created.
4. Downloads the output as flat `.html` files.
5. Saves them perfectly structured inside `dist/`.

<Warning>Never manually edit files inside `dist/`. They are overwritten every time you run a build.</Warning>