diff --git a/src/content/tutorials/en/2x_tutorial.mdx b/src/content/tutorials/en/2x_tutorial.mdx
new file mode 100644
index 0000000000..90ead9121f
--- /dev/null
+++ b/src/content/tutorials/en/2x_tutorial.mdx
@@ -0,0 +1,463 @@
+---
+title: "Teachers' Guide to p5.js 2.x"
+description: A guide for middle school and high school educators for transtioning to p5.js version 2 from using previous versions.
+category: "2.0"
+featuredImage: ../images/featured/2x-teacher-ref.png
+featuredImageAlt: TODO BETTER IMAGE
+relatedContent:
+  references:
+    - en/p5/mousebutton
+    - en/p5/keyispressed
+    - en/p5/loadimage
+    - en/p5/keyisdown
+  examples:
+    - en/16_parallel_loading_promise/01_async_image_loader
+authors:
+  - Adrienne Gifford
+---
+import Callout from "../../../components/Callout/index.astro";
+
+## p5.js 2.x Transition Guide for Middle School and High School Educators
+
+As a middle school teacher, I know a version update to a tool you rely on can feel like a big adjustment, especially when you already have a set of lessons and activities you know and love. 
+
+If you’re feeling some trepidation about the transition to p5.js 2.x, this guide is here to reassure you. Most of what your students already do works exactly the same as before.
+
+
+After reviewing multiple middle school and high school p5.js curricula ([CS4All Creative Web](https://blueprint.cs4all.nyc/curriculum/creative-web/), [CS4All Introduction to Computational Media](https://blueprint.cs4all.nyc/curriculum/intro-to-computational-media/), [CodeHS Digital Art with p5.js](https://codehs.com/course/p5-js/overview), [CSinSF Creative Computing](https://sites.google.com/sfusd.edu/csinsfcreativecomputing/home?authuser=0), [Processing Foundation Art + Code](https://processing.github.io/art-plus-code/codeAsCreativeMedium-intro/)) just two areas consistently require updates when moving from p5.js 1.x to 2.x: 
+
+
+* Input Events
+* Asset Loading
+
+Although there are [other 2.x updates](https://github.com/processing/p5.js-compatibility) (such as changes to curved shapes, text measurement, and utility functions), these do not typically appear in middle school or high school curricula and are unlikely to impact your work with students. 
+
+This guide walks you through just the changes you’re likely to encounter in a Middle School (MS) or High School (HS) classroom. You’ll learn how to update your code for p5.js 2.x, and when compatibility add-ons might be helpful for older sketches.
+
+I’ve tried to include everything you need and nothing you don’t, so you can get up to speed easily and feel confident teaching with p5.js 2.x.
+
+## Versions in the Web Editor
+
+Most of the time, you and your students can use p5.js 2.x without changing anything.
+
+However, if you open an older sketch (for example, something a student created in a previous year or an example from a curriculum designed for p5.js 1.x), and it doesn’t behave quite the same, you have options:
+
+* You can **update the sketch** using the examples in this guide
+* You can **turn on a [compatibility add-on](https://docs.google.com/document/d/1Dk5nqLYL_ryw_7xjADhgPHOi5N6xkC9v_FM2vOz_Hc8/edit?tab=t.ocxorofdcw24)**
+* You can **switch the sketch back to p5.js 1.x** in the Editor
+
+![A screenshot of a new p5.js Web Editor project, with the version picker circled.](../images/2.0/switch-version.png)
+
+![Screenshot of the p5.js Web Editor version picker showing a list of versions. The latest is selected](../images/2.0/version-dropdown.png)
+
+
+## Input Events
+
+Input events are likely to be the first place you notice differences in p5.js 2.x. Students may use input events to: 
+
+* Select or toggle buttons 
+* Draw with the mouse while pressed
+* Change variables when a key is pressed 
+* Clear or save the canvas
+* Moving a game character with arrow keys
+
+This section covers the input event code you’re most likely to see in MS/HS classrooms and the changes introduced in p5.js 2.x.
+
+
+### Mouse Clicks
+
+
+In p5.js 1.x, checking for a specific mouse button looked like this: 
+
+```js
+if (mouseButton === RIGHT) {
+  // do a thing (p5.js 1.x)
+}
+```
+
+In p5.js 2.x, it looks like this:
+
+```js
+if (mouseButton.right) {
+  // do a thing (p5.js 2.x)
+}
+```
+
+<Callout title="Teacher Note">
+In 2.x, mouseButton is now an object with boolean properties (left, right, center). This makes it possible to detect multiple buttons at once. This is especially helpful for drawing apps or paint tools, where students may want different behaviors for different mouse buttons.
+</Callout>
+
+**Reference:** [mouseButton](/reference/p5/mouseButton/)
+
+### Keyboard Input
+
+In p5.js 1.x, most MS/HS curricula checked for keys using code like: 
+
+```js
+if (keyIsPressed) {
+  if (key === UP_ARROW){
+    // do a thing (p5.js 1.x)
+  }
+}
+```
+
+keyIsPressed is often introduced early as a simple Boolean variable and key== fits into the comparison structures students are already using.
+
+In p5.js 2.x, the recommended way to check for keys is:
+
+```js
+if (keyIsDown(UP_ARROW)) {
+  // do a thing (p5.js 2.x)
+}
+```
+
+`keyIsDown()` is now the recommended approach because it works consistently across both 1.x and 2.x and supports checking multiple keys at once.
+
+
+**Reference:** [keyIsDown](https://beta.p5js.org/reference/p5/keyIsDown/)
+
+### Input Events Quick Reference
+
+
+<table>
+
+<tr>
+
+<th>
+
+p5.js 1.x
+
+</th>
+
+<th>
+
+p5.js 2.x
+
+</th>
+
+<th>
+
+Reference
+
+</th>
+
+</tr>
+
+<tr>
+
+<td>
+
+`mouseButton === RIGHT`
+
+
+</td>
+
+<td>
+
+`mouseButton.right`
+
+</td>
+
+<td>
+
+[mouseButton](https://beta.p5js.org/reference/p5/mouseButton/)
+
+</td>
+
+</tr>
+
+<tr>
+
+<td>
+
+`keyIsPressed` & `key === UP_ARROW`
+
+</td>
+
+<td>
+
+`keyIsDown(UP_ARROW)`
+
+</td>
+
+<td>
+
+[keyIsDown](https://beta.p5js.org/reference/p5/keyIsDown/)
+
+</td>
+
+</tr>
+
+</table>
+
+
+### Compatibility Add-On (Optional)
+
+For new teaching, follow the 2.x code shown above.
+
+If you have older sketches that you want to keep working without updating the code, the **Data & Events** compatibility add-on restores the 1.x behavior. 
+
+See Compatibility Add-Ons section for more detail. 
+
+
+## Loading Assets
+
+As students advance in the curriculum, they may want to personalize their sketches by adding images, sounds, fonts, or other assets. 
+
+In p5.js 1.x, this was done using `preload()`.  
+In p5.js 2.x, we use `async` and `await` inside `setup()`. 
+
+### preload() in p5.js 1.x
+
+In p5.js 1.x, `preload()` stopped the sketch from running until everything inside it finished loading:
+
+```js
+let img;
+
+function preload(){ // used in p5.js 1.x, but not in 2.x
+  img = loadImage("happycat.jpg"); // waits for asset to load
+}
+
+function setup(){
+  createCanvas(100, 100);
+  image(img, 0, 0);
+}
+```
+
+
+### async and await in p5.js 2.x
+
+In the p5.js 2.x, `preload()` is no longer used, and assets are loaded using `await` inside `async setup()`.  This works for images, sounds, fonts, and other files: 
+
+```js
+let img;
+
+async function setup() {
+  createCanvas(100, 100);
+  img = await loadImage("happycat.jpg"); // waits for asset to load
+  image (img, 0, 0);
+}
+```
+
+
+**Reference:** [async_await](https://beta.p5js.org/reference/p5/async_await/)
+
+### Asset Loading Quick Reference
+
+
+
+<table>
+
+<tr>
+
+<th>
+
+p5.js 1.x
+
+</th>
+
+<th>
+
+p5.js 2.x
+
+</th>
+
+<th>
+
+Reference
+
+</th>
+
+</tr>
+
+<tr>
+
+<td>
+
+```js
+function preload(){   
+  img = loadImage("cat.jpg");
+}
+```
+
+</td>
+
+<td>
+
+```js
+async function setup() {
+  createCanvas(100, 100);
+  img = await loadImage("happycat.jpg"); 
+}
+```
+
+</td>
+
+<td>
+
+[async_await](https://beta.p5js.org/reference/p5/async_await/)
+
+</td>
+
+</tr>
+</table>
+
+
+
+
+
+### Compatibility Add-Ons (Optional)
+
+For new teaching, follow the 2.x code above.
+
+If you have older sketches that you want to keep working without updating the code, the **Preload** compatibility add-on restores the 1.x behavior. 
+
+See Compatibility Add-Ons section for more detail. 
+
+## Compatibility Add-Ons
+
+Compatibility add‑ons are optional helper files you can turn on in the p5.js Web Editor to make older p5.js 1.x sketches behave the same way in p5.js 2.x, without updating the code.
+
+These add-ons are only needed if you or your students open older sketches from online or older curriculum materials that use the p5.js 1.x patterns and you aren’t ready to update the code to the 2.x patterns yet.
+
+For new teaching, it’s better to use the 2.x ways of writing code so students learn the version that will be supported going forward.
+
+* For Input Events, use the Data & Events Compatibility Add-On.
+* For Asset Loading, use the Preload Compatibility Add-On. 
+
+
+
+*You will also see a Shapes Compatibility Add-On - the Shapes API changes only affect more advanced custom shapes that do not commonly appear in MS/HS curricula, so most MS/HS teachers won’t need the Shapes Compatibility Add-On.*
+
+
+## Teacher Quick Reference
+
+
+
+<table>
+
+<tr>
+
+<th>
+
+p5.js 1.x
+
+</th>
+
+<th>
+
+p5.js 2.x
+
+</th>
+
+<th>
+
+Reference
+
+</th>
+
+<tr>
+<th colspan="3">
+Input Events
+</th>
+</tr>
+
+</tr>
+
+<tr>
+
+<td>
+
+`mouseButton === RIGHT`
+
+
+</td>
+
+<td>
+
+`mouseButton.right`
+
+</td>
+
+<td>
+
+[mouseButton](https://beta.p5js.org/reference/p5/mouseButton/)
+
+</td>
+
+</tr>
+
+<tr>
+
+<td>
+
+`keyIsPressed` & `key === UP_ARROW`
+
+</td>
+
+<td>
+
+`keyIsDown(UP_ARROW)`
+
+</td>
+
+<td>
+
+[keyIsDown](https://beta.p5js.org/reference/p5/keyIsDown/)
+
+</td>
+
+</tr>
+
+
+<tr>
+<th colspan="3">
+Asset Loading
+</th>
+</tr>
+
+
+<tr>
+
+
+</tr>
+
+<tr>
+
+<td>
+
+```js
+function preload(){   
+  img = loadImage("cat.jpg");
+}
+```
+
+</td>
+
+<td>
+
+```js
+async function setup() {
+  createCanvas(100, 100);
+  img = await loadImage("happycat.jpg"); 
+}
+```
+
+</td>
+
+<td>
+
+[async_await](https://beta.p5js.org/reference/p5/async_await/)
+
+</td>
+
+</tr>
+</table>
+
+
+
+
+
+Teacher Note
+
+This quick reference includes only the p5.js 2.x changes that commonly affect MS & HS curricula (input events and asset loading). Other 2.x updates (such as changes to curved shapes, text measurement, and utility functions) do not appear in the reviewed curricula. For the full list of 2.x changes, see the [Technical Transition Guide](https://github.com/processing/p5.js-compatibility). 
diff --git a/src/content/tutorials/images/featured/2x-teacher-ref.png b/src/content/tutorials/images/featured/2x-teacher-ref.png
new file mode 100644
index 0000000000..b6ffe5e8cf
Binary files /dev/null and b/src/content/tutorials/images/featured/2x-teacher-ref.png differ