Frameworks

Fimo can create a new site with React Router, Vite, Astro, Next.js, or SvelteKit. It can also host other applications when you provide a build command and output directory.

Choose a framework

Framework	Best fit	Fimo integration
React Router	A full-stack React site	Content, forms, labels, media, visual editing, and hosting
Vite with React	A client-rendered React app	Content, forms, labels, media, visual editing, and hosting
Astro	A content-led site	Content, forms, labels, media, visual editing, and hosting
Next.js	An App Router or Pages Router application	Content, forms, labels, media, visual editing, and hosting
SvelteKit	A Svelte application	Content, forms, labels, media, visual editing, and hosting
Other frameworks	A static build or custom application	Hosting only unless a Fimo adapter exists

Next.js App Router is the default for new sites. Select another framework during setup:

npm
Bun
pnpm
Yarn

npx fimo@latest init my-site --framework react-router --package-manager npm
npx fimo@latest init my-site --framework vite --package-manager npm
npx fimo@latest init my-site --framework astro --package-manager npm
npx fimo@latest init my-site --framework sveltekit --package-manager npm

bunx fimo@latest init my-site --framework react-router --package-manager bun
bunx fimo@latest init my-site --framework vite --package-manager bun
bunx fimo@latest init my-site --framework astro --package-manager bun
bunx fimo@latest init my-site --framework sveltekit --package-manager bun

pnpm dlx fimo@latest init my-site --framework react-router --package-manager pnpm
pnpm dlx fimo@latest init my-site --framework vite --package-manager pnpm
pnpm dlx fimo@latest init my-site --framework astro --package-manager pnpm
pnpm dlx fimo@latest init my-site --framework sveltekit --package-manager pnpm

yarn dlx fimo@latest init my-site --framework react-router --package-manager yarn
yarn dlx fimo@latest init my-site --framework vite --package-manager yarn
yarn dlx fimo@latest init my-site --framework astro --package-manager yarn
yarn dlx fimo@latest init my-site --framework sveltekit --package-manager yarn

Current adapter ranges depend on the version of fimo installed in your project. Run fimo validate before changing framework versions.

Connect an existing application

From the application directory, run:

npm
Bun
pnpm
Yarn

npx fimo@latest link

bunx fimo@latest link

pnpm dlx fimo@latest link

yarn dlx fimo@latest link

Fimo keeps your framework, routes, and Git history. If the framework needs a Fimo build hook, the command tells you which configuration line to add. Your application continues to own routing, locale URLs, links, and page-level SEO. Fimo supplies the content and editing tools that its adapter supports.

Framework guides

React Router

Vite with React

Astro

Next.js

SvelteKit

Agent best practices

The bundled fimo-code skill includes focused performance guidance for public Astro, SvelteKit, and Next.js sites. Coding agents should load the integration reference first, then the matching best-practices reference:

fimo skills get fimo-code --ref best-practices/astro
fimo skills get fimo-code --ref best-practices/sveltekit
fimo skills get fimo-code --ref best-practices/next

These references cover server-rendered content, request waterfalls, client JavaScript, dynamic-route 404s, canonical URLs, and framework-specific build or navigation optimizations. They do not replace the framework integration contract.

Shared project contract

Set the application’s production profile in .fimo/config.json:

{
  "runtime": { "framework": "nextjs" }
}

Supported values are astro, nextjs, nuxtjs, react-router, remix, sveltekit, vite, and vue. Conventional projects use their package scripts and framework defaults. Override commands only when the existing application needs them:

npm
Bun
pnpm
Yarn

{
  "runtime": {
    "framework": "nextjs",
    "commands": {
      "dev": "npm run dev:studio",
      "build": "npm run build:production",
      "install": "npm ci"
    }
  }
}

{
  "runtime": {
    "framework": "nextjs",
    "commands": {
      "dev": "bun run dev:studio",
      "build": "bun run build:production",
      "install": "bun install --frozen-lockfile"
    }
  }
}

{
  "runtime": {
    "framework": "nextjs",
    "commands": {
      "dev": "pnpm dev:studio",
      "build": "pnpm build:production",
      "install": "pnpm install --frozen-lockfile"
    }
  }
}

{
  "runtime": {
    "framework": "nextjs",
    "commands": {
      "dev": "yarn dev:studio",
      "build": "yarn build:production",
      "install": "yarn install --immutable"
    }
  }
}

New framework shells are locale-ready by default. React Router framework mode and native Vite use :locale?; Astro, Next.js, and SvelteKit use their native route-boundary patterns. The default locale stays unprefixed, and existing applications keep their current URL strategy. In a linked checkout, Astro, SvelteKit, React Router, and Vite derive the current Branch’s runtime aliases during development and production builds. Next.js resolves the linked site and active Git branch in its root FimoProvider, then passes only the public connection to the browser. Explicit server overrides still take precedence.

Package surfaces

Application code	Content and components
React Router or Vite + React	`fimo-react` and the matching router/Vite entrypoint
Next.js server	`fimo-next`
Next.js client	`fimo-next/client`
Astro server pages	`fimo/astro` and `fimo/astro/components`; hosting via `fimo-astro`
SvelteKit	`fimo-sveltekit`, `fimo-sveltekit/components`, and `fimo-sveltekit/vite`; hosting via `fimo-sveltekit/config`

The component vocabulary stays value-first across frameworks: <Text value={article.title} as="h1" />, <Image value={article.cover} />, and <RichText value={article.body} />. <Date> and <DateTime> both render a <time> element and are available in all four surfaces. Use <Date> for a date field, where the datetime attribute is the calendar day, and <DateTime> for a datetime field, where it is the full ISO instant.

Update Fimo packages

Keep fimo and its framework packages on the same exact version. Do not edit their versions directly in package.json. Run the latest CLI with the exact target version:

npm
Bun
pnpm
Yarn

npx fimo@latest update 1.0.0

bunx fimo@latest update 1.0.0

pnpm dlx fimo@latest update 1.0.0

yarn dlx fimo@latest update 1.0.0

It shows the plan first — the package pins, the companion packages your framework needs, any import rewrites, and that release’s breaking changes — and only writes after you confirm. Add --dry-run to inspect without changing anything, or --apply to run non-interactively. The command needs a clean git working tree, installs with your project’s package manager, runs fimo validate afterwards, and never commits, deploys, or publishes on its own. The update adds missing framework packages before it rewrites imports. For example, a Next.js project missing fimo-next receives fimo-next and fimo-react at the target version before fimo/next imports move to fimo-next. React and Next.js projects pinned to a release from before framework packages were split remain supported. The current CLI generates content clients against their existing fimo/ui or fimo/next runtime, without installing fimo-react or fimo-next or changing the project’s Fimo version. The companion becomes required only after you update to a release that uses the split packages.

Compatibility

The framework profile selects the integration; it does not promise every historical framework version. Current package ranges and tested baselines are:

Profile	Application versions
Next.js	Next 16 acceptance baseline; React 18.2+ or 19
React Router	React Router 7 or 8; React 18.2+ or 19; Vite 7 or 8
Vite + React	React 18.2+ or 19; Vite 7 or 8
Astro	Astro 5, 6, or 7
SvelteKit	SvelteKit 2; Svelte 5; Vite 7 or 8

Nuxt, Remix, and Vue currently have hosting detection only; they do not yet have a Fimo content/runtime adapter.

What’s next

Content & CMS

Declare schemas and use generated content clients.

Locales

Connect Fimo to the application’s locale policy.

Deploy & publish

Preview the application and publish it.

Start

Build your site

Preview and launch

Agents and automation

Work with your team

Migrate an existing site

Reference

Choose a framework

Connect an existing application

Framework guides

React Router

Vite with React

Astro

Next.js

SvelteKit

Agent best practices

Shared project contract

Package surfaces

Update Fimo packages

Compatibility

What’s next

Content & CMS

Locales

Deploy & publish

​Choose a framework

​Connect an existing application

​Framework guides

React Router

Vite with React

Astro

Next.js

SvelteKit

​Agent best practices

​Shared project contract

​Package surfaces

​Update Fimo packages

​Compatibility

​What’s next

Content & CMS

Locales

Deploy & publish

Choose a framework

Connect an existing application

Framework guides

Agent best practices

Shared project contract

Package surfaces

Update Fimo packages

Compatibility

What’s next