diff --git a/README.md b/README.md
index 41121aa..2d6890a 100644
--- a/README.md
+++ b/README.md
@@ -22,7 +22,7 @@ npm i --save rive-react
 
 _Note: This library is using React hooks so the minimum version required for both react and react-dom is 16.8.0._
 
-### Migrating from v 0.0.x to 1.x.x
+### Migrating from version 0.0.x to 1.x.x
 
 Starting in v 1.0.0, we've migrated from wrapping around the `@rive-app/canvas` runtime (which uses the `CanvasRendereringContext2D` renderer) to the `@rive-app/webgl` runtime (which uses the WebGL renderer). The high-level API doesn't require any change to upgrade, but there are some notes to consider about the backing renderer.
 
@@ -46,6 +46,10 @@ return (
 );
 ```
 
+### Migrating from version 1.x.x to 2.x.x
+
+In most cases, you may be able to migrate safely. We are mainly enabling `rive-react` to work with both backing renderers `@rive-app/webgl` and `@rive-app/canvas`, such that you can use either `@rive-app/react-canvas` or `@rive-app/react-webgl` as the dependency in your React applications. Another change that is mostly internal is that by default, `rive-react` will now use `@rive-app/canvas` (as opposed to `@rive-app/webgl`) to wrap around, as it currently yields the fastest performance across devices. Therefore, **we recommend installing `@rive-app/react-canvas` in your applicaions**. However, if you need a WebGL backing renderer, you may want to use `@rive-app/react-webgl`.
+
 ## Usage
 
 ### Component
diff --git a/npm/rive-react-canvas/README.md b/npm/react-canvas/README.md
similarity index 74%
rename from npm/rive-react-canvas/README.md
rename to npm/react-canvas/README.md
index 3e612af..a459a9b 100644
--- a/npm/rive-react-canvas/README.md
+++ b/npm/react-canvas/README.md
@@ -1,3 +1,3 @@
-# rive-react-canvas
+# @rive-app/react-canvas
 
 Output for `rive-react` using the backing `@rive-app/canvas` JS runtime
diff --git a/npm/rive-react-webgl/README.md b/npm/react-webgl/README.md
similarity index 75%
rename from npm/rive-react-webgl/README.md
rename to npm/react-webgl/README.md
index f6aadef..3a915d0 100644
--- a/npm/rive-react-webgl/README.md
+++ b/npm/react-webgl/README.md
@@ -1,3 +1,3 @@
-# rive-react-webgl
+# @rive-app/react-webgl
 
 Output for `rive-react` using the backing `@rive-app/webgl` JS runtime
diff --git a/package.json b/package.json
index db7df96..17e57d3 100644
--- a/package.json
+++ b/package.json
@@ -27,7 +27,8 @@
   },
   "homepage": "https://github.com/rive-app/rive-react#readme",
   "dependencies": {
-    "@rive-app/webgl": "1.0.39"
+    "@rive-app/canvas": "1.0.44",
+    "@rive-app/webgl": "1.0.41"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
diff --git a/scripts/build.sh b/scripts/build.sh
index ec90e87..bb2019c 100755
--- a/scripts/build.sh
+++ b/scripts/build.sh
@@ -2,18 +2,18 @@
 
 set -e
 
-# Run the build and copy to the rive-react-webgl build for npm release
+# Run the build and copy to each react-variant build for npm release
 npm run build
-cp -r ./dist ./npm/rive-react-webgl
-cp -r ./dist ./npm/rive-react-canvas
+cp -r ./dist ./npm/react-webgl
+cp -r ./dist ./npm/react-canvas
 
-echo Replacing the webgl with canvas references
-pushd ./npm/rive-react-canvas/dist
+echo "Replacing the canvas with webgl references in react-webgl"
+pushd ./npm/react-webgl/dist
 if [[ "$OSTYPE" == "darwin"* ]]; then
-  find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/webgl/@rive-app\/canvas/g'
-  find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/webgl/@rive-app\/canvas/g'
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/webgl/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i '' -e 's/@rive-app\/canvas/@rive-app\/webgl/g'
 else
-  find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/webgl/@rive-app\/canvas/g'
-  find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/webgl/@rive-app\/canvas/g'
+  find . -type f -name "*.ts" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl/g'
+  find . -type f -name "*.js" -print0 | xargs -0 sed -i -e 's/@rive-app\/canvas/@rive-app\/webgl/g'
 fi
 popd
diff --git a/scripts/trimPackageJson.js b/scripts/trimPackageJson.js
index 0dc2f75..ad636c3 100644
--- a/scripts/trimPackageJson.js
+++ b/scripts/trimPackageJson.js
@@ -5,7 +5,7 @@ const renderer = npmPackageSplit[npmPackageSplit.length - 1];
 const package = require(path + '/package.json');
 
 function trimNpmPackage() {
-  package.name = `${package.name}-${renderer}`;
+  package.name = `@rive-app/react-${renderer}`;
   package.description = `React wrapper around the @rive-app/${renderer} library`;
   const webDependencyName = `@rive-app/${renderer}`;
   const canvasDep = package.dependencies[webDependencyName];
diff --git a/src/components/Rive.tsx b/src/components/Rive.tsx
index bf0065b..db4b568 100644
--- a/src/components/Rive.tsx
+++ b/src/components/Rive.tsx
@@ -1,4 +1,4 @@
-import { Layout } from '@rive-app/webgl';
+import { Layout } from '@rive-app/canvas';
 import React, { ComponentProps } from 'react';
 import useRive from '../hooks/useRive';
 
diff --git a/src/hooks/useRive.tsx b/src/hooks/useRive.tsx
index 2e94f7d..99fa5d4 100644
--- a/src/hooks/useRive.tsx
+++ b/src/hooks/useRive.tsx
@@ -6,7 +6,7 @@ import React, {
   ComponentProps,
   RefCallback,
 } from 'react';
-import { Rive, EventType } from '@rive-app/webgl';
+import { Rive, EventType } from '@rive-app/canvas';
 import {
   UseRiveParameters,
   UseRiveOptions,
diff --git a/src/hooks/useStateMachineInput.ts b/src/hooks/useStateMachineInput.ts
index 5f3f191..5f72de4 100644
--- a/src/hooks/useStateMachineInput.ts
+++ b/src/hooks/useStateMachineInput.ts
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { Rive, StateMachineInput } from '@rive-app/webgl';
+import { Rive, StateMachineInput } from '@rive-app/canvas';
 
 /**
  * Custom hook for fetching a stateMachine input from a rive file.
diff --git a/src/index.ts b/src/index.ts
index 9f36ca0..28b2951 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -5,4 +5,4 @@ import useStateMachineInput from './hooks/useStateMachineInput';
 export default Rive;
 export { useRive, useStateMachineInput };
 export { RiveState, UseRiveParameters, UseRiveOptions } from './types';
-export * from '@rive-app/webgl';
+export * from '@rive-app/canvas';
diff --git a/src/types.ts b/src/types.ts
index 931e0af..c9345e2 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,5 @@
 import { RefCallback, ComponentProps } from 'react';
-import { Rive, RiveParameters } from '@rive-app/webgl';
+import { Rive, RiveParameters } from '@rive-app/canvas';
 
 export type UseRiveParameters = Partial<Omit<RiveParameters, 'canvas'>> | null;