Skip to main content
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

React Router (framework mode)

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.

Plain Vite + React

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.
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.
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.

​
What’s next

Content & CMS

Render schema content in your pages.

Labels, locales & i18n

t(), fimoRoutes(), and FimoLink.

Deploy & publish

Preview and go live.