Fiber Snap
Emmet-style abbreviation expansion for React Three Fiber.
Type a shorthand abbreviation in any .jsx or .tsx file, accept the r3f: suggestion from autocomplete, and it expands into a full R3F JSX tree with tab stops — exactly like Emmet, but for 3D.
Demo
Install
Search Fiber Snap in the VS Code Extensions panel, or install from the command line:
ext install abram-manaka.fiber-snap
Usage
Type an abbreviation in a .jsx or .tsx file and accept the r3f: suggestion from IntelliSense.
Quick examples
| You type |
Expands to |
mesh.box |
<mesh> with <boxGeometry /> + <meshStandardMaterial /> |
mesh.sphere>mat.phong |
Sphere mesh with Phong material |
alight |
<ambientLight intensity={Math.PI / 2} /> |
plight |
<pointLight position={[10, 10, 10]} intensity={Math.PI} /> |
canvas>alight+plight+mesh.box |
Full Canvas setup with lights and a mesh |
group>mesh.box*3 |
Group containing 3 box meshes |
orbit |
<OrbitControls /> (from @react-three/drei) |
environment |
<Environment preset="studio" /> |
stars |
<Stars /> |
float>mesh.sphere |
Floating sphere with drei's <Float> |
center>mesh.box |
Auto-centered box with drei's <Center> |
presentation |
<PresentationControls> for drag-to-rotate |
transmission |
<MeshTransmissionMaterial /> (glass/crystal) |
contactshadows |
<ContactShadows position={[0, -0.5, 0]} ... /> |
instances |
<Instances> for hardware-instanced rendering |
bake+adaptdpr |
Performance combo: baked shadows + adaptive DPR |
Abbreviation Grammar
| Operator |
Meaning |
Example |
. |
Attach geometry or material |
mesh.sphere, mat.phong |
> |
Nest as child |
group>mesh.box |
+ |
Add as sibling |
alight+plight |
*N |
Repeat N times |
mesh.box*3 |
Supported Shortcodes
Geometries
box sphere plane cylinder cone torus ring circle tube extrude lathe dodecahedron icosahedron octahedron tetrahedron
Materials
std basic phong lambert normal toon physical depth matcap
Lights
alight plight dlight slight hlight
Controls (drei)
orbit trackball fly pointerlock transform mapcontrols cameracontrols presentation pivot scrollcontrols keyboard firstperson
Helpers
axes grid arrow
Drei: Scene & Decorative
text html billboard float sparkles stars cloud sky environment
Drei: Staging & Lighting
center stage contactshadows softshadows lightformer loader preload
Drei: Materials
reflector transmission distort wobble
Drei: Shapes & Geometry
roundedbox text3d line image
bake adaptdpr adaptevents perfmon instances lod
Structural
mesh group canvas scene
Settings
| Setting |
Default |
Description |
r3fEmmet.enable |
true |
Enable or disable Fiber Snap |
Requirements
- VS Code
^1.85.0
- A project using
@react-three/fiber (the extension works on any .jsx/.tsx file)
Contributing
Pull requests welcome. The shortcode registry lives in src/registry.ts — adding new components is straightforward.
GitHub →
Changelog
See CHANGELOG.md for full release history.
License
MIT
