RaspberryPiFoundation · zspriggs · Jun 10, 2026
@@ -22,7 +22,7 @@ git clone https://github.com/RaspberryPiFoundation/blockly.git
 
 If you downloaded the source as a zip, unpacking it should give you a root folder named `blockly-main`.
 
-The relevant files are in `docs/docs/codelabs/context-menu-option`. There are two versions of the app:
+The relevant files are in `packages/docs/docs/codelabs/context-menu-option`. There are two versions of the app:
 
 - `starter-code/`: The starter code that you'll build upon in this codelab.
 - `complete-code/`: The code after completing the codelab, in case you get lost or want to compare to your version.

@@ -21,7 +21,7 @@ git clone https://github.com/RaspberryPiFoundation/blockly.git
 
 If you downloaded the source as a zip, unpacking it should give you a root folder named `blockly-main`.
 
-The relevant files are in `docs/docs/codelabs/css`. There are two versions of the app:
+The relevant files are in `packages/docs/docs/codelabs/css`. There are two versions of the app:
 
 - `starter-code/`: The starter code that you'll build upon in this codelab.
 - `complete-code/`: The code after completing the codelab, in case you get lost or want to compare to your version.

@@ -21,7 +21,7 @@ Use the [`npx @blockly/create-package app`](https://www.npmjs.com/package/@block
 
 The initial application has one custom block and includes JavaScript generator definitions for that block. Since this codelab will be creating a JSON generator instead, it will remove that custom block and add its own.
 
-The complete code used in this codelab can be viewed in the `blockly` repository under [docs/docs/codelabs/custom-generator](https://github.com/RaspberryPiFoundation/blockly/docs/docs/codelabs/custom-generator/complete-code).
+The complete code used in this codelab can be viewed in the `blockly` repository under [packages/docs/docs/codelabs/custom-generator](https://github.com/RaspberryPiFoundation/blockly/tree/main/packages/docs/docs/codelabs/custom-generator/complete-code).
 
 Before setting up the rest of the application, change the storage key used for this codelab application. This will ensure that the workspace is saved in its own storage, separate from the regular sample app, so that it doesn't interfere with other demos. In `serialization.js`, change the value of `storageKey` to some unique string. `jsonGeneratorWorkspace` will work:
 

@@ -35,7 +35,7 @@ Blockly.blockRendering.register('custom_renderer', CustomRenderer);
 To use the custom renderer, import the new file at the top of `src/index.js`:
 
 ```js
-import './renderers/javascript';
+import './renderers/custom';
 ```
 
 Now, add the the `renderer` property into the configuration struct passed to `Blockly.inject` so that it now looks like this:

@@ -19,7 +19,7 @@ Use the Use the [`npx @blockly/create-package`](https://www.npmjs.com/package/@b
 
 The initial application uses the default renderer and contains no code or definitions for a custom renderer.
 
-The complete code used in this codelab can be viewed in the `blockly` repository under [docs/docs/codelabs/custom-renderer](https://github.com/RaspberryPiFoundation/blockly/docs/docs/codelabs/custom-renderer/complete-code).
+The complete code used in this codelab can be viewed in the `blockly` repository under [packages/docs/docs/codelabs/custom-renderer](https://github.com/RaspberryPiFoundation/blockly/tree/main/packages/docs/docs/codelabs/custom-renderer/complete-code).
 
 Before setting up the rest of the application, change the storage key used for this codelab application. This will ensure that the workspace is saved in its own storage, separate from the regular sample app, so that it doesn't interfere with other demos. In `serialization.js`, change the value of `storageKey` to some unique string. `customRenderersWorkspace` will work:
 

@@ -149,7 +149,7 @@ Navigate to your toolbox definition in `index.html` and modify it to look
 like the below line.
 
 ```xml
-<toolboxlabel name="Label" colour="darkslategrey" css-label="customLabel"></toolboxlabel>
+<toolboxlabel name="Custom Toolbox" colour="darkslategrey" css-label="customLabel"></toolboxlabel>
 ```
 
 Any item that begins with `css-` will be added to a `cssconfig` object stored on

@@ -33,7 +33,7 @@ The resulting toolbox is shown below.
   className="codelabImage"
 />
 
-The code samples are written in ES6 syntax. You can find the code for the [completed custom toolbox](https://github.com/RaspberryPiFoundation/blockly/docs/docs/codelabs/custom-toolbox/complete-code) on GitHub.
+The code samples are written in ES6 syntax. You can find the code for the [completed custom toolbox](https://github.com/RaspberryPiFoundation/blockly/tree/main/packages/docs/docs/codelabs/custom-toolbox/complete-code) on GitHub.
 
 ### What you'll need
 

@@ -22,7 +22,7 @@ git clone https://github.com/RaspberryPiFoundation/blockly.git
 
 If you downloaded the source as a zip, unpacking it should give you a root folder named `blockly-main`.
 
-The relevant files are in `docs/docs/codelabs/custom-toolbox`. There are two versions of the app:
+The relevant files are in `packages/docs/docs/codelabs/custom-toolbox`. There are two versions of the app:
 
 - `starter-code/`: The starter code that you'll build upon in this codelab.
 - `complete-code/`: The code after completing the codelab, in case you get lost or want to compare to your version.

@@ -11,7 +11,7 @@ import Image from '@site/src/components/Image';
 
 ### What you'll learn
 
-This codelab will teach you how to modify a simple web app to include the [Blockly](/blockly) visual programming library.
+This codelab will teach you how to modify a simple web app to include the [Blockly](/guides/get-started/what-is-blockly) visual programming library.
 
 ### What is Blockly?
 

@@ -20,7 +20,7 @@ git clone https://github.com/RaspberryPiFoundation/blockly.git
 
 If you downloaded the source as a zip, unpacking it should give you a root folder named `blockly-main`.
 
-The relevant files are in `docs/docs/codelabs/getting-started`. There are two versions of the app:
+The relevant files are in `packages/docs/docs/codelabs/getting-started`. There are two versions of the app:
 
 - `starter-code/`: The starter code that you'll build upon in this codelab.
 - `complete-code/`: The code after completing the codelab, in case you get lost or want to compare to your version.

@@ -20,7 +20,7 @@ git clone https://github.com/RaspberryPiFoundation/blockly.git
 
 If you downloaded the source as a zip, unpacking it should give you a root folder named `blockly-main`.
 
-The relevant files are in `docs/docs/codelabs/theme-extension-identifier`. There are two versions of the app:
+The relevant files are in `packages/docs/docs/codelabs/theme-extension-identifier`. There are two versions of the app:
 
 - `starter-code/`: The starter code that you'll build upon in this codelab.
 - `complete-code/`: The code after completing the codelab, in case you get lost or want to compare to your version.

@@ -26,7 +26,7 @@ In this codelab, you'll create a new custom block type that generates a list of
   className="codelabImage"
 />
 
-You can find the code for the [completed custom block](https://github.com/RaspberryPiFoundation/blockly/docs/docs/codelabs/validation-and-warnings/complete-code/index.js) on GitHub.
+You can find the code for the [completed custom block](https://github.com/RaspberryPiFoundation/blockly/tree/main/packages/docs/docs/codelabs/validation-and-warnings/complete-code/index.js) on GitHub.
 
 ### What you'll need
 

@@ -22,7 +22,7 @@ git clone https://github.com/RaspberryPiFoundation/blockly.git
 
 If you downloaded the source as a zip, unpacking it should give you a root folder named `blockly-main`.
 
-The relevant files are in `docs/docs/codelabs/validation-and-warnings`. There are two versions of the app:
+The relevant files are in `packages/docs/docs/codelabs/validation-and-warnings`. There are two versions of the app:
 
 - `starter-code/`: The starter code that you'll build upon in this codelab.
 - `complete-code/`: The code after completing the codelab, in case you get lost or want to compare to your version.
@@ -74,8 +74,8 @@ Then, to make this block available from the toolbox, find the toolbox definition
 
 ```js
         {
-          'kind': 'block',
-          'type': 'list_range',
+          kind: 'block',
+          type: 'list_range',
         },
 ```
 
@@ -93,7 +93,7 @@ You can drag this block out from the toolbox into the workspace, but if you try
 
 ```js
 // Define how to generate JavaScript from the custom block.
-javascript.javascriptGenerator['list_range'] = function (block) {
+javascript.javascriptGenerator.forBlock['list_range'] = function (block) {
   const first = this.getFieldValue('FIRST');
   const last = this.getFieldValue('LAST');
   const numbers = [];

@@ -13,20 +13,20 @@ When you're designing custom blocks, you may find that it doesn't make sense to
 Blockly generally allows users to enter negative values and decimal values for number fields, but for this custom block, let's make sure that only positive whole numbers are allowed. Add `'min': 0` and `'precision': 1` to the fields in the custom block definition so that they look like this:
 
 ```js
-    'args0': [
+    args0: [
       {
-        'type': 'field_number',
-        'name': 'FIRST',
-        'value': 0,
-        'min': 0,
-        'precision': 1,
+        type: 'field_number',
+        name: 'FIRST',
+        value: 0,
+        min: 0,
+        precision: 1,
       },
       {
-        'type': 'field_number',
-        'name': 'LAST',
-        'value': 5,
-        'min': 0,
-        'precision': 1,
+        type: 'field_number',
+        name: 'LAST',
+        value: 5,
+        min: 0,
+        precision: 1,
       },
     ],
 ```
@@ -46,10 +46,10 @@ Let's give our custom block a new extension called `list_range_validation`. Add
 ```js
 Blockly.common.defineBlocksWithJsonArray([
   {
-    'type': 'list_range',
+    type: 'list_range',
     ...
-    'style': 'list_blocks',
-    'extensions': [
+    style: 'list_blocks',
+    extensions: [
       'list_range_validation',
     ],
   },