React Three Fiber

This is a json-render adapter that lets you build Three.js scenes declaratively from JSON specs instead of writing React Three Fiber code directly. You get 19 components out of the box (primitives like Box and Sphere, lighting, GLTF models, environments, controls) and can cherry-pick just what you need for your catalog. The split between catalog definitions and implementations is clever if you're doing server-side work, since the schema package has no R3F dependency. Honestly most useful if you're already invested in the json-render ecosystem and need 3D, otherwise you're adding abstraction layers on top of R3F that might just get in the way.

skills.sh installs: 2.4K
GitHub stars: 19.5K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add vercel-labs/json-render --skill react-three-fiber --agent claude-code

Installs into .claude/skills of the current project.

Files

@json-render/react-three-fiber

React Three Fiber renderer for json-render. 19 built-in 3D components.

Two Entry Points

Entry Point	Exports	Use For
`@json-render/react-three-fiber/catalog`	`threeComponentDefinitions`	Catalog schemas (no R3F dependency, safe for server)
`@json-render/react-three-fiber`	`threeComponents`, `ThreeRenderer`, `ThreeCanvas`, schemas	R3F implementations and renderer

Usage Pattern

Pick the 3D components you need from the standard definitions:

import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { threeComponentDefinitions } from "@json-render/react-three-fiber/catalog";
import { defineRegistry } from "@json-render/react";
import { threeComponents, ThreeCanvas } from "@json-render/react-three-fiber";

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly