Multi-Framework Renderers
Relevant source files
The following files were used as context for generating this wiki page:
Farm.js provides a renderer-neutral architecture that supports multiple UI libraries beyond its default React implementation. The framework abstracts routing, server functions, and integrations into a core layer, allowing adapters for Preact, Solid, Vue, and Svelte to share the same full-stack contracts.
Sources: README.md:14-16, AGENTS.md:32-34, skills/farmjs/SKILL.md:58-62
Architecture and Renderer Abstraction
The renderer-neutral model ensures that framework-level behavior—such as file-based routing and provider integrations—remains consistent regardless of the chosen UI library. Each renderer package provides specific client, server, and Vite bindings to bridge the core framework with the library's runtime.
The diagram shows the relationship between the central Farm.js Core and the specific renderer packages that interface with the Vite build system.
Sources: ARCHITECTURE.md:12-25, AGENTS.md:32-34, skills/farmjs/SKILL.md:65-70
Configuration
You select a non-default renderer by importing its adapter in farm.config.ts. The framework enforces a single renderer per route tree; you must not mix different component formats (e.g., .vue and .svelte) within the same application.
import { defineConfig } from "@farm.js/core";
import { vue } from "@farm.js/vue";
export default defineConfig({
renderer: vue()
});
Sources: skills/farmjs/SKILL.md:65-70, README.md:129-131
Renderer Capability Matrix
Renderers are evaluated based on their ability to handle Server-Side Rendering (SSR), streaming, hydration, and component head output.
| Renderer | Vite Entry | Server Entry | Client Entry | Extensions |
|---|---|---|---|---|
| React | @farm.js/react/vite | @farm.js/react/server | @farm.js/react/client | .tsx, .jsx |
| Preact | @farm.js/preact/vite | @farm.js/preact/server | @farm.js/preact/client | .tsx, .jsx |
| Solid | @farm.js/solid/vite | @farm.js/solid/server | @farm.js/solid/client | .tsx, .jsx |
| Vue | @farm.js/vue/vite | @farm.js/vue/server | @farm.js/vue/client | .vue |
| Svelte | @farm.js/svelte/vite | @farm.js/svelte/server | @farm.js/svelte/client | .svelte |
Sources: scripts/renderer-capability-matrix.test.js:12-50, scripts/renderer-capability-matrix.test.js:145-155, skills/farmjs/SKILL.md:70-73
Feature Support Details
- SSR & Hydration: Most renderers support full SSR via
renderToStringand client-side hydration viahydrateRoot. - Head Output: Renderers either provide native
renderToStringWithHeadsupport or rely on framework-managed metadata for head tag injection. - Streaming: Streaming support varies by environment (Node.js vs. Web/Edge). For example, Solid and React provide streaming capabilities across both Node and Web runtimes.
- Route Updates: Renderers like React and Solid support reconciling re-renders during navigation, while others may remount the component tree.
Sources: scripts/renderer-capability-matrix.test.js:108-118, scripts/renderer-capability-matrix.test.js:157-170, README.md:33-45
Implementation and Bindings
Each renderer package (packages/farm-react, farm-solid, etc.) contains the specific logic required to map framework primitives to the UI library.
Sequence of Rendering and Hydration
The request flow maintains the same structure across renderers to ensure predictable full-stack boundaries.
The sequence diagram illustrates how the server renderer executes library-specific SSR before streaming the response to the browser for hydration.
Sources: ARCHITECTURE.md:46-53, AGENTS.md:7-12
Renderer-Specific Entry Points
Renderers export distinct descriptors used by the core framework to identify capabilities and entry points. Key identifiers include:
REACT_RENDERER(Core)PREACT_RENDERERSOLID_RENDERERVUE_RENDERERSVELTE_RENDERER
Sources: scripts/renderer-capability-matrix.test.js:12-50
Usage Summary
Farm.js enables product-integrated applications by treating UI libraries as interchangeable adapters. While React remains the primary focus for advanced features like the AOT compiler and Strata native rendering, the multi-framework architecture ensures that standard routing, server actions, and integrations function identically across all supported libraries.
Sources: README.md:14-16, AGENTS.md:32-34, README.md:52-54