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

# Create your first editable site

> Put the first content-backed page in Fimo Studio from a new site or an existing codebase.

Your first success is a page whose content a teammate can change in Studio without editing application code.

## New site

New sites use the Next.js App Router template by default:

> [tab] npm
>
> ```bash theme={null}
> npx fimo@latest init my-site --package-manager npm
> ```

> [tab] Bun
>
> ```bash theme={null}
> bunx fimo@latest init my-site --package-manager bun
> ```

> [tab] pnpm
>
> ```bash theme={null}
> pnpm dlx fimo@latest init my-site --package-manager pnpm
> ```

> [tab] Yarn
>
> ```bash theme={null}
> yarn dlx fimo@latest init my-site --package-manager yarn
> ```

If you want the canonical React Router template, use `--framework react-router`.
The bundled shells are intentionally minimal. Start the local `dev` script with the package manager selected during
setup:

> [tab] npm
>
> ```bash theme={null}
> cd my-site
> npm run dev
> ```

> [tab] Bun
>
> ```bash theme={null}
> cd my-site
> bun run dev
> ```

> [tab] pnpm
>
> ```bash theme={null}
> cd my-site
> pnpm dev
> ```

> [tab] Yarn
>
> ```bash theme={null}
> cd my-site
> yarn dev
> ```

Then ask your coding agent to load `fimo-code` and make one real page editable.

## Another framework or a blank site

Create the site, then ask your coding agent to make the first page editable. The agent should load the code skill that matches the installed Fimo package:

> [tab] npm
>
> ```bash theme={null}
> npm exec -- fimo skills get fimo-code
> ```

> [tab] Bun
>
> ```bash theme={null}
> bunx --no-install fimo skills get fimo-code
> ```

> [tab] pnpm
>
> ```bash theme={null}
> pnpm exec fimo skills get fimo-code
> ```

> [tab] Yarn
>
> ```bash theme={null}
> yarn fimo skills get fimo-code
> ```

The implementation depends on the framework. The durable flow is the same: declare a schema, push it with `fimo schemas push`, create an entry, read it through the generated client, and render tracked values with the framework's Fimo components. Use the [CLI reference](/docs/reference/cli.md) for command details.

## Existing codebase

Run this inside the application's root directory:

> [tab] npm
>
> ```bash theme={null}
> npx fimo@latest link
> ```

> [tab] Bun
>
> ```bash theme={null}
> bunx fimo@latest link
> ```

> [tab] pnpm
>
> ```bash theme={null}
> pnpm dlx fimo@latest link
> ```

> [tab] Yarn
>
> ```bash theme={null}
> yarn dlx fimo@latest link
> ```

Choose or create the Fimo site when prompted. Linking keeps your application code, framework, git history, and existing `origin`. It adds the site link, Fimo remote, package dependency when needed, and detected framework settings.

Install the updated site dependencies with the package manager already used by the application:

> [tab] npm
>
> ```bash theme={null}
> npm install
> ```

> [tab] Bun
>
> ```bash theme={null}
> bun install
> ```

> [tab] pnpm
>
> ```bash theme={null}
> pnpm install
> ```

> [tab] Yarn
>
> ```bash theme={null}
> yarn install
> ```

Then load `fimo-code` and convert one real page to use a schema-backed entry. Start with a page that a teammate already needs to update, such as the homepage or About page.

> [!TIP]
>
> Keep the first slice small. One editable page proves the code, Studio, and Preview loop before you move the rest of
> the site.

## Review before publishing

Run `fimo deploy` when you want a hosted Preview. Publish only after you have reviewed it:

> [tab] npm
>
> ```bash theme={null}
> npm exec -- fimo deploy -m "feat: first editable page"
> npm exec -- fimo deploy --publish
> ```

> [tab] Bun
>
> ```bash theme={null}
> bunx --no-install fimo deploy -m "feat: first editable page"
> bunx --no-install fimo deploy --publish
> ```

> [tab] pnpm
>
> ```bash theme={null}
> pnpm exec fimo deploy -m "feat: first editable page"
> pnpm exec fimo deploy --publish
> ```

> [tab] Yarn
>
> ```bash theme={null}
> yarn fimo deploy -m "feat: first editable page"
> yarn fimo deploy --publish
> ```

See [Deploy and publish](/docs/deploy/overview.md) before using the publish command.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.