diff --git a/docs/docs/getting-started/hello-world.md b/docs/docs/getting-started/hello-world.md
index ebe380c35d..b05dc7ee62 100644
--- a/docs/docs/getting-started/hello-world.md
+++ b/docs/docs/getting-started/hello-world.md
@@ -8,28 +8,27 @@ slug: /getting-started/hello-world
 React Native Skia provides a declarative API using its own React Renderer.
 
 ```tsx twoslash
-import {Canvas, Circle, Group} from "@shopify/react-native-skia";
+import React from "react";
+import { Canvas, Circle, Group } from "@shopify/react-native-skia";
 
-export const HelloWorld = () => {
-  const size = 256;
-  const r = size * 0.33;
+const App = () => {
+  const width = 256;
+  const height = 256;
+  const r = width * 0.33;
   return (
-    <Canvas style={{ flex: 1 }}>
+    <Canvas style={{ width, height }}>
       <Group blendMode="multiply">
         <Circle cx={r} cy={r} r={r} color="cyan" />
-        <Circle cx={size - r} cy={r} r={r} color="magenta" />
-        <Circle
-          cx={size/2}
-          cy={size - r}
-          r={r}
-          color="yellow"
-        />
+        <Circle cx={width - r} cy={r} r={r} color="magenta" />
+        <Circle cx={width / 2} cy={width - r} r={r} color="yellow" />
       </Group>
     </Canvas>
   );
 };
+
+export default App;
 ```
 
 ### Result
 
-<img src={require("/static/img/getting-started/hello-world/blend-modes.png").default} width="256" height="256" alt="Hello World" />
\ No newline at end of file
+<img src={require("/static/img/getting-started/hello-world/blend-modes.png").default} width="256" height="256" alt="Hello World" />