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

# Framework support

> The React runtimes Fimo supports, the fimo/ui component set, and the fimo/vite plugin.

Fimo is a content, media, forms, and analytics layer for **React** websites. It plugs into your Vite build and provides a component set and runtime that render CMS content, labels, and media — while keeping your app's routing and framework choices yours.

## Supported setups

<CardGroup cols={2}>
  <Card title="React Router (framework mode)" icon="star">
    The canonical setup that `fimo init` scaffolds — React Router 8 framework mode on Vite. Per-route SEO via the `meta` export, `fimoRoutes()` for path-prefix locales, and `<FimoLink>` for locale-aware links.
  </Card>

  <Card title="Plain Vite + React" icon="bolt">
    A Vite + React SPA with a React Router library router (`BrowserRouter`) and build-time SEO via `fimo({ seo: true })`. Also the upgrade path for legacy Fimo v3 projects.
  </Card>
</CardGroup>

Both wire the app through `<FimoProviders>` (from `fimo/react-router`) with a `@tanstack/react-query` client. New projects use React Router framework mode by default.

## The `fimo` package surface

Your app imports three entry points from the `fimo` package:

* **`fimo/ui`** — components that render schema and `t()` values with inline-editing metadata: `<Text>`, `<RichText>`, `<Image>`, `<StaticImage>`, `<Video>`, `<Date>`, `<Boolean>`, plus the `useLabels()` and `useLocale()` hooks. Prefer these over raw HTML for anything that comes from a schema or `t()`.
* **`fimo/vite`** — the `fimo()` build plugin. It returns a `PluginOption[]` you drop into `plugins`; options include `seo`, `sitemap`, and `robots`. It never injects your framework's router plugin — you own that.
* **`fimo/react-router`** — the adapter barrel: `FimoProviders`, `FimoScripts`, `fimoRoutes()`, `FimoLink`, and the SEO helpers (`loadFimoMetaData`, `buildFimoMeta`).

## Custom frameworks

Using another React setup? The runtime needs two things from your app: a React Router context ancestor (it reads `useLocation` / `useNavigate` for the preview bridge and pageview tracking) and a react-query provider. Pass your active locale into `<FimoProviders locale={locale}>` and keep canonical, unlocalized route metadata in `fimo-config.json` so Studio's route selection works. Beyond that, your URL scheme and rendering are your call.

<Note>
  Setup specifics beyond the two documented recipes above aren't detailed in these docs. For exact `vite.config.ts`, `react-router.config.ts`, and provider wiring, load the project `fimo` skill's setup references.
</Note>

## What's next

<Columns cols={3}>
  <Card title="Content & CMS" icon="database" href="/docs/cli/content">
    Render schema content in your pages.
  </Card>

  <Card title="Labels, locales & i18n" icon="language" href="/docs/cli/labels">
    `t()`, `fimoRoutes()`, and `FimoLink`.
  </Card>

  <Card title="Deploy & publish" icon="cloud-arrow-up" href="/docs/deploy/overview">
    Preview and go live.
  </Card>
</Columns>