diff --git a/docs/getting-started/authoring.mdx b/docs/getting-started/authoring.mdx
index 2b80f823..974c10f9 100644
--- a/docs/getting-started/authoring.mdx
+++ b/docs/getting-started/authoring.mdx
@@ -89,13 +89,14 @@ export function Box(props) {
       scale={active ? 1.5 : 1}
       onClick={(event) => setActive(!active)}
       onPointerOver={(event) => setHover(true)}
-      onPointerOut={(event) => setHover(false)}>
+      onPointerOut={(event) => setHover(false)}
+    >
       <boxGeometry args={[1, 1, 1]} />
       <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
     </mesh>
   )
 }`,
-    '/App.js': `import { Canvas } from '@react-three/fiber'
+    '/App.js': `import {Canvas} from '@react-three/fiber'
 import {Box} from './Box'
 
 export default function App() {
@@ -134,20 +135,20 @@ export function Box(props) {
   useFrame((state, delta) => (meshRef.current.rotation.x += delta))
 
 return (
-
-{' '}
 <mesh
-  {...props}
-  ref={meshRef}
-  scale={active ? 1.5 : 1}
-  onClick={(event) => setActive(!active)}
-  onPointerOver={(event) => setHover(true)}
-  onPointerOut={(event) => setHover(false)}
->
-  <boxGeometry args={[1, 1, 1]} />
-  <meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
+{...props}
+ref={meshRef}
+scale={active ? 1.5 : 1}
+onClick={(event) => setActive(!active)}
+onPointerOver={(event) => setHover(true)}
+onPointerOut={(event) => setHover(false)} >
+<boxGeometry args={[1, 1, 1]} />
+<meshStandardMaterial color={hovered ? 'hotpink' : 'orange'} />
 </mesh>
-) }`, '/App.js': `import {Canvas} from '@react-three/fiber' import {Box} from './Box'
+)
+}`,
+    '/App.js': `import {Canvas} from '@react-three/fiber'
+import {Box} from './Box'
 
 export default function App() {
   return (