@powerhousedao/academy 4.1.0-dev.5 → 4.1.0-dev.51

package/docs/academy/01-GetStarted/00-ExploreDemoPackage.mdx

@@ -2,7 +2,7 @@
 
 ## Let's get started
 
-To give you a quick idea of how the Powerhouse ecosystem operates on document models and packages, why don't you try installing a package? 
+To give you a quick idea of how the Powerhouse ecosystem operates on document models and packages, why don't you try installing a package?
 We will show you how to install the Powerhouse command-line tool `ph-cmd` and then use it to install a pre-built demo package with a document models, an editor and a drive-app.
 
 ## Step 1: Install the Powerhouse CLI
@@ -18,7 +18,7 @@ Verify the installation:
 
 ```bash
 ph-cmd --version
-```                                                   
+```
 
 ## Step 2: Install the to-do list demo package
 
@@ -73,27 +73,34 @@ This command downloads and sets up the `@powerhousedao/todo-demo-package`, makin
 
 </details>
 
-
-You have now successfully installed `ph-cmd` and added your first package! 
+You have now successfully installed `ph-cmd` and added your first package!
 
 ## Step 3: Run the connect app in studio mode
+
 To run the package locally in Connect Studio (our collaboration and contributor app), run:
 
 ```bash
 ph connect
 ```
-Click the returned localhost URL and you should see Connect Studio appear in your browser. 
+
+Click the returned localhost URL and you should see Connect Studio appear in your browser.
+
 <figure className="image-container">
   <img src={require("./images/Connect.png").default} alt="Connect Home" />
   <figcaption>The Powerhouse Connect Studio interface.</figcaption>
 </figure>
 
-When you move to the settingswheel in the bottom right corner you'll get access to the **Package Manager**. 
-Here, you'll see that you've installed the `@powerhousedao/todo-demo-package`, which contains not only a **Document Model** and its accompanying editor but also a **Drive App** specific to the to-do document model. 
+When you move to the settingswheel in the bottom right corner you'll get access to the **Package Manager**.
+Here, you'll see that you've installed the `@powerhousedao/todo-demo-package`, which contains not only a **Document Model** and its accompanying editor but also a **Drive App** specific to the to-do document model.
 
 <figure className="image-container">
-  <img src={require("./images/Packagemanager.png").default} alt="Package Manager" />
-  <figcaption>The Package Manager showing the installed todo-demo-package.</figcaption>
+  <img
+    src={require("./images/Packagemanager.png").default}
+    alt="Package Manager"
+  />
+  <figcaption>
+    The Package Manager showing the installed todo-demo-package.
+  </figcaption>
 </figure>
 
 ## Step 4: Create a todo list document
@@ -124,20 +131,36 @@ Now move into the drive you've just created:
 - After closing the document, look at the To-do Drive App interface—you'll see that it tracks your tasks and displays a progress bar
 
 <figure className="image-container">
-  <img src={require("./images/TodoDriveApp.png").default} alt="Todo Drive App" />
+  <img
+    src={require("./images/TodoDriveApp.png").default}
+    alt="Todo Drive App"
+  />
   <figcaption>A list of todo's in the custom todo drive app. </figcaption>
 </figure>
 
 A key feature you get with Connect is the **Operations History**. Every change to a document is stored as an individual operation, creating an immutable and replayable history. This provides complete auditability and transparency, as you can inspect each revision, its details, and any associated signatures. For example, you can see a chronological list of all modifications, along with who made them and when.
 
 <figure className="image-container">
-  <img src={require("./images/OperationsHistoryButton.png").default} alt="Operations History Button" />
-  <figcaption> You can find the button to visit the operations history in the document model toolbar </figcaption>
+  <img
+    src={require("./images/OperationsHistoryButton.png").default}
+    alt="Operations History Button"
+  />
+  <figcaption>
+    {" "}
+    You can find the button to visit the operations history in the document
+    model toolbar{" "}
+  </figcaption>
 </figure>
 
 <figure className="image-container">
-  <img src={require("./images/OperationsHistory.png").default} alt="Operations History" />
-  <figcaption>Example of the operations history for a document, showing all modifications made to it in a list. </figcaption>
+  <img
+    src={require("./images/OperationsHistory.png").default}
+    alt="Operations History"
+  />
+  <figcaption>
+    Example of the operations history for a document, showing all modifications
+    made to it in a list.{" "}
+  </figcaption>
 </figure>
 
 Learn more about the [Operations History](../MasteryTrack/BuildingUserExperiences/DocumentTools/OperationHistory) and other document tools you get for free.
@@ -158,7 +181,9 @@ When signing in with Renown, use an Ethereum or blockchain address that can func
 
 <figure className="image-container">
   <img src={require("./images/RenownLogin.png").default} alt="Renown Login" />
-  <figcaption>The Renown login screen, prompting for a signature from a wallet.</figcaption>
+  <figcaption>
+    The Renown login screen, prompting for a signature from a wallet.
+  </figcaption>
 </figure>
 
 ### 5.2 Authorize Connect to sign document edits on your behalf
@@ -166,12 +191,20 @@ When signing in with Renown, use an Ethereum or blockchain address that can func
 This DID is then associated with a credential that authorizes a specific Connect instance to act on your behalf. That credential is stored securely on Ceramic, a decentralized data network. When you perform actions through the Powerhouse Connect interface, those operations are signed with the DID and transmitted to Switchboard, which serves as the verifier.
 
 <figure className="image-container">
-  <img src={require("./images/ConnectAddress.png").default} alt="Connect Address for DID" />
-  <figcaption>A newly generated DID and address shown within the Connect interface.</figcaption>
+  <img
+    src={require("./images/ConnectAddress.png").default}
+    alt="Connect Address for DID"
+  />
+  <figcaption>
+    A newly generated DID and address shown within the Connect interface.
+  </figcaption>
 </figure>
 
 <figure className="image-container">
-  <img src={require("./images/LoginComplete.png").default} alt="Renown Login Complete" />
+  <img
+    src={require("./images/LoginComplete.png").default}
+    alt="Renown Login Complete"
+  />
   <figcaption>Confirmation of a successful login with Renown.</figcaption>
 </figure>
 
@@ -182,16 +215,20 @@ By leveraging this system, every operation or modification made to a document is
 Now, return to your to-do list and make some additional changes. You'll notice that these operations are now signed with your Renown identity, making every action traceable and verifiable in the operations history.
 
 <figure className="image-container">
-  <img src={require("./images/OperationsHistorySignature.png").default} alt="Operation History Signature" />
-  <figcaption>Your DID is now signing the operations that are being added to the history.</figcaption>
+  <img
+    src={require("./images/OperationsHistorySignature.png").default}
+    alt="Operation History Signature"
+  />
+  <figcaption>
+    Your DID is now signing the operations that are being added to the history.
+  </figcaption>
 </figure>
 
 ## Step 6: Export a document
 
-Export the document as a `.phd` (Powerhouse Document) file using the export button in the document toolbar at the top. In this toolbar, you will find all available functionality for your documents. The `.phd` file can be sent through any of your preferred channels to other users on your network. 
+Export the document as a `.phd` (Powerhouse Document) file using the export button in the document toolbar at the top. In this toolbar, you will find all available functionality for your documents. The `.phd` file can be sent through any of your preferred channels to other users on your network.
 
-### Up next 
+### Up next
 
-Now that you have explored a Powerhouse package and discovered its basic functionalities, it is time to start building your own. 
+Now that you have explored a Powerhouse package and discovered its basic functionalities, it is time to start building your own.
 Our next tutorial focuses on creating a simple to-do list document and will introduce you to the world of **Document Models**.
-

package/docs/academy/01-GetStarted/01-CreateNewPowerhouseProject.md

@@ -1,11 +1,13 @@
 # Create a new to-do list document
 
 ## Overview
-This tutorial guides you through creating a simplified version of a 'Powerhouse project' for a **To-do List**.   
-A Powerhouse project primarily consists of a document model and its editor.   
+
+This tutorial guides you through creating a simplified version of a 'Powerhouse project' for a **To-do List**.  
+A Powerhouse project primarily consists of a document model and its editor.  
 For this purpose, you'll be using Connect, our use-centric collaboration tool, locally, known as Connect in 'Studio mode'.
 
 ## Prerequisites
+
 - Powerhouse CLI installed: `pnpm install -g ph-cmd`
 - node.js 22 and pnpm installed
 - Visual Studio Code (or your preferred IDE)
@@ -14,12 +16,15 @@ For this purpose, you'll be using Connect, our use-centric collaboration tool, l
 If you need help with installing the prerequisites you can visit our page [prerequisites](/academy/MasteryTrack/BuilderEnvironment/Prerequisites)
 
 ## Quick start
+
 Create a new Powerhouse project with a single command:
+
 ```bash
 ph init
 ```
 
 ## Before you begin
+
 1. Open your terminal (either your system terminal or IDE's integrated terminal)
 2. Optionally, create a folder first to keep your Powerhouse projects:
 
@@ -27,18 +32,20 @@ ph init
    mkdir ph-projects
    cd ph-projects
    ```
+
 3. Ensure you're in the correct directory before running the `ph init` command.  
-In the terminal, you will be asked to enter the project name. Fill in the project name and press Enter.
-   ```bash
+   In the terminal, you will be asked to enter the project name. Fill in the project name and press Enter.
+
+   ````bash
     you@yourmachine:~/ph-projects % ph init
 
     ? What is the project name? ‣ getting-started
-    ```	
+    ```
 
     Once the project is created, you will see the following output:
     ```bash
     Initialized empty Git repository in /Users/you/ph-projects/getting-started/.git/
-    The installation is done! 
+    The installation is done!
     ```
 
     Navigate to the newly created project directory:
@@ -62,15 +69,17 @@ In the terminal, you will be asked to enter the project name. Fill in the projec
 
     A new browser window will open and you will see the Connect application. If it doesn't open automatically, you can open it manually by navigating to `http://localhost:3000/` in your browser.
 
-    You will see your local drive and a button to create a new drive.    
-    If you local drive is not present navigate into Settings in the bottom left corner. Settings > Danger Zone > Clear Storage.    
-    Clear the storage of your localhost application as it might has an old session cached.   
+    You will see your local drive and a button to create a new drive.
+    If you local drive is not present navigate into Settings in the bottom left corner. Settings > Danger Zone > Clear Storage.
+    Clear the storage of your localhost application as it might has an old session cached.
+
+   ````
 
-4. Move into your local drive.   
-Create a new document model by clicking the `DocumentModel` button, found in the 'New Document' section at the bottom of the page. 
+4. Move into your local drive.  
+   Create a new document model by clicking the `DocumentModel` button, found in the 'New Document' section at the bottom of the page.
 
 If you've followed the steps correctly, you'll have an empty document where you can define the **'Document Specifications'**.
 
 ## Up next
 
-In the next tutorials, you will learn how to specify, add code and build an editor for your document model and export it to be used in your Powerhouse package. 
+In the next tutorials, you will learn how to specify, add code and build an editor for your document model and export it to be used in your Powerhouse package.

package/docs/academy/01-GetStarted/02-DefineToDoListDocumentModel.md

@@ -1,12 +1,14 @@
-# Write the document specification 
+# Write the document specification
 
 In this tutorial, you will learn how to define the specifications for a **To-do List** document model within the Connect application using its GraphQL schema, and then export the resulting document model specification document for your Powerhouse project.
 If you don't have a document specification file created yet, have a look at the previous step of this tutorial to create a new document specification.
 
 Before you start, make sure you have the Connect application running locally with the command:
+
 ```bash
 ph connect
 ```
+
 The Connect application will start and you will see the following output:
 
 ```bash
@@ -17,11 +19,11 @@ The Connect application will start and you will see the following output:
 
 ## To-do list document specification
 
-Likely you have called your project 'ToDoList'.   
-If you've used a different name, please create a new document specification named 'ToDoList'.   
-**Pay close attention to capitalization, as it influences our code.**  
+Likely you have called your project 'ToDoList'.  
+If you've used a different name, please create a new document specification named 'ToDoList'.  
+**Pay close attention to capitalization, as it influences our code.**
 
-We'll continue with this project to teach you how to create a document model specification and later an editor for your document model. We use the **GraphQL Schema Definition Language** (SDL) to define the schema for the document model.   
+We'll continue with this project to teach you how to create a document model specification and later an editor for your document model. We use the **GraphQL Schema Definition Language** (SDL) to define the schema for the document model.  
 Below, you can see the SDL for the `To-do List` document model.
 
 :::info
@@ -45,9 +47,8 @@ type ToDoItem {
   checked: Boolean!
 }
 ```
-</details>
-
 
+</details>
 
 <details>
 <summary>Operations schema of our simplified to-do list</summary>
@@ -59,34 +60,37 @@ input AddTodoItemInput {
 }
 
 # Defines a GraphQL input type for updating a to-do item
+
 input UpdateTodoItemInput {
-  id: ID!
-  text: String
-  checked: Boolean
+id: ID!
+text: String
+checked: Boolean
 }
 
 # Defines a GraphQL input type for deleting a to-do item
+
 input DeleteTodoItemInput {
-  id: ID!
+id: ID!
 }
-```
+
+````
 </details>
 
 ## Define the document model specification
 
-To be able to define the document model, you need to open the document model editor in Connect. 
+To be able to define the document model, you need to open the document model editor in Connect.
 
 ### The steps below show you how to do this:
 
 1. In the Connect application, click on **'document model'** to open the document model specification editor.
-2. Name your document model '**ToDoList**' in the Connect application, paying close attention to capitalization. 
-3. You'll be presented with a form to fill in metadata about the document model. Fill in the details in the respective fields. 
+2. Name your document model '**ToDoList**' in the Connect application, paying close attention to capitalization.
+3. You'll be presented with a form to fill in metadata about the document model. Fill in the details in the respective fields.
 
     In the **Document Type** field, type `powerhouse/todolist`. This defines the new type of document that will be created with this document model specification.
-    
+
     ![ToDoList Document Model Form Metadata](./images/DocumentModelHeader.png)
 
-4. In the code editor, you can see the SDL for the document model. Replace the existing SDL template with the SDL defined in the [State Schema](#state-schema) section. Only copy and paste the types, leaving the inputs for the next step. You can, however, already press the 'Sync with schema' button to set the initial state of your document model specification based on your Schema Definition Language. 
+4. In the code editor, you can see the SDL for the document model. Replace the existing SDL template with the SDL defined in the [State Schema](#state-schema) section. Only copy and paste the types, leaving the inputs for the next step. You can, however, already press the 'Sync with schema' button to set the initial state of your document model specification based on your Schema Definition Language.
 5. Below the editor, find the input field `Add module`. You'll use this to create and name a module for organizing your input operations. In this case, we will name the module `to_do_list`. Press enter.
 6. Now there is a new field, called `Add operation`. Here you will have to add each input operation to the module, one by one.
 7. Inside the `Add operation` field, type `ADD_TODO_ITEM` and press enter. A small editor will appear underneath it, with an empty input type that you have to fill. Copy the first input type from the [Operations Schema](#operations-schema) section and paste it in the editor. The editor should look like this:
@@ -106,6 +110,7 @@ Check below screenshot for the complete implementation:
 
 ![ToDoList Document Model](./images/DocumentModelOperations.png)
 
-### Up next: reducers 
+### Up next: reducers
 
-Up next, you'll learn how to implement the runtime logic and components that will use the `ToDoList` document model specification you've just created and exported. 
+Up next, you'll learn how to implement the runtime logic and components that will use the `ToDoList` document model specification you've just created and exported.
+````

package/docs/academy/01-GetStarted/03-ImplementOperationReducers.md

@@ -1,6 +1,6 @@
 # Implement the document model
 
-In this section, we will implement and test the operation reducers for the **To-do List** document model. For this, you have to export the document model specification from the Connect application and import it into your Powerhouse project directory. 
+In this section, we will implement and test the operation reducers for the **To-do List** document model. For this, you have to export the document model specification from the Connect application and import it into your Powerhouse project directory.
 
 To export the document model specification, follow the steps in the [Define ToDoList Document Model](/academy/GetStarted/DefineToDoListDocumentModel) section.
 
@@ -9,11 +9,12 @@ To export the document model specification, follow the steps in the [Define ToDo
 Reducers are a core concept in Powerhouse document models. They implement the state transition logic for each operation defined in your schema.
 
 :::info
-**Connection to schema definition language (SDL)**: The reducers directly implement the operations you defined in your SDL. Remember how we defined `AddTodoItemInput`, `UpdateTodoItemInput`, and `DeleteTodoItemInput` in our schema?   
+**Connection to schema definition language (SDL)**: The reducers directly implement the operations you defined in your SDL. Remember how we defined `AddTodoItemInput`, `UpdateTodoItemInput`, and `DeleteTodoItemInput` in our schema?  
 The reducers provide the actual implementation of what happens when those operations are performed.
 :::
 
-To import the document model specification into your Powerhouse project, you can either: 
+To import the document model specification into your Powerhouse project, you can either:
+
 - Copy and paste the file directly into the root of your Powerhouse project.
 - Or drag and drop the file into the Powerhouse project directory in the VSCode editor as seen in the image below:
 
@@ -23,8 +24,7 @@ Either step will import the document model specification into your Powerhouse pr
 
 ## In your project directory
 
-The next steps will take place in the VSCode editor. Make sure to have it open and the terminal window inside VSCode open as well. 
-
+The next steps will take place in the VSCode editor. Make sure to have it open and the terminal window inside VSCode open as well.
 
 To write the operation reducers of the **To-do List** document model, you need to generate the document model code from the document model specification file you have exported into the Powerhouse project directory.
 
@@ -45,7 +45,6 @@ Open the `to-do-list.ts` file and you should see the code that needs to be fille
 1. Copy and paste the code below into the `to-do-list.ts` file in the `reducers` folder.
 2. Save the file.
 
-
 <details>
 <summary>Operation Reducers</summary>
 ```typescript
@@ -54,31 +53,31 @@ import { ToDoListToDoListOperations } from '../../gen/to-do-list/operations.js';
 // REMARKS: This is our main reducer object that implements all operations defined in the schema.
 // The ToDoListToDoListOperations type is auto-generated from our SDL and ensures type safety.
 export const reducer: ToDoListToDoListOperations = {
-  // REMARKS: The addTodoItemOperation adds a new item to our todolist.
-  // - state: The current document state that we can modify
-  // - action: Contains the operation type and input data from the client
-  // - dispatch: Function to trigger additional operations (not used here)
-  addTodoItemOperation(state, action, dispatch) {
-    // REMARKS: While this looks like we're directly mutating state, Powerhouse
-    // handles immutability behind the scenes, creating a new state object.
-    state.items.push({
-      id: action.input.id,      // Using the client-provided ID
-      text: action.input.text,  // Setting the todo text from input
-      checked: false,           // New items always start unchecked
-    });
-  },
-
-  // REMARKS: The updateTodoItemOperation modifies an existing todo item.
-  // It handles partial updates, allowing only specific fields to be updated.
-  updateTodoItemOperation(state, action, dispatch) {
-    // REMARKS: First find the item we want to update by its ID
-    const item = state.items.find(item => item.id === action.input.id);
-    
+// REMARKS: The addTodoItemOperation adds a new item to our todolist.
+// - state: The current document state that we can modify
+// - action: Contains the operation type and input data from the client
+// - dispatch: Function to trigger additional operations (not used here)
+addTodoItemOperation(state, action, dispatch) {
+// REMARKS: While this looks like we're directly mutating state, Powerhouse
+// handles immutability behind the scenes, creating a new state object.
+state.items.push({
+id: action.input.id, // Using the client-provided ID
+text: action.input.text, // Setting the todo text from input
+checked: false, // New items always start unchecked
+});
+},
+
+// REMARKS: The updateTodoItemOperation modifies an existing todo item.
+// It handles partial updates, allowing only specific fields to be updated.
+updateTodoItemOperation(state, action, dispatch) {
+// REMARKS: First find the item we want to update by its ID
+const item = state.items.find(item => item.id === action.input.id);
+
     // REMARKS: Proper error handling if item doesn't exist
     if (!item) {
       throw new Error(`Item with id ${action.input.id} not found`);
     }
-    
+
     // REMARKS: We only update fields that were included in the input
     // This allows for partial updates (only update what was provided)
     if (action.input.text) {
@@ -87,17 +86,19 @@ export const reducer: ToDoListToDoListOperations = {
     if (typeof action.input.checked === 'boolean') {
       item.checked = action.input.checked;
     }
-  },
-
-  // REMARKS: The deleteTodoItemOperation removes an item from the list.
-  // This showcases functional programming with array filters for immutable updates.
-  deleteTodoItemOperation(state, action, dispatch) {
-    // REMARKS: Create a new array containing only items that don't match the ID
-    // This is a common pattern for immutable array updates in JavaScript
-    state.items = state.items.filter(item => item.id !== action.input.id);
-  },
+
+},
+
+// REMARKS: The deleteTodoItemOperation removes an item from the list.
+// This showcases functional programming with array filters for immutable updates.
+deleteTodoItemOperation(state, action, dispatch) {
+// REMARKS: Create a new array containing only items that don't match the ID
+// This is a common pattern for immutable array updates in JavaScript
+state.items = state.items.filter(item => item.id !== action.input.id);
+},
 };
-```
+
+````
 </details>
 
 ## Write the operation reducers tests
@@ -131,7 +132,7 @@ describe('Todolist Operations', () => {
     it('should handle addTodoItem operation', () => {
         // REMARKS: We create an input object matching our AddTodoItemInput schema
         const input = { id: '1', text: 'Buy milk' };
-        
+
         // REMARKS: We apply the operation to get a new document state
         // Note how we use the creators to generate the operation action
         const updatedDocument = reducer(document, creators.addTodoItem(input));
@@ -174,7 +175,8 @@ describe('Todolist Operations', () => {
         expect(updatedDocument.state.global.items).toHaveLength(0);
     });
 });
-```
+````
+
 </details>
 
 Now you can run the tests to make sure the operation reducers are working as expected.
@@ -192,7 +194,8 @@ Output should be as follows:
    Duration  417ms (transform 79ms, setup 0ms, collect 174ms, tests 12ms, environment 0ms, prepare 158ms)
 ```
 
-If you got the same output, you have successfully implemented the operation reducers and tests for the **To-do List** document model. Congratulations, you've successfully set up the backbone for a simple **To-do List** document. 
+If you got the same output, you have successfully implemented the operation reducers and tests for the **To-do List** document model. Congratulations, you've successfully set up the backbone for a simple **To-do List** document.
 
 ## Up next: To-do list editor
-In the next chapter of this introduction track you will learn how to implement an editor for your document model so you can see a simple user interface for the **To-do List** document model in action.
+
+In the next chapter of this introduction track you will learn how to implement an editor for your document model so you can see a simple user interface for the **To-do List** document model in action.

package/docs/academy/01-GetStarted/04-BuildToDoListEditor.md

@@ -4,7 +4,7 @@ In this chapter we will continue with the interface or editor implementation of
 
 ## Generate the editor template
 
-Run the command below to generate the editor template for the **To-do List** document model.   
+Run the command below to generate the editor template for the **To-do List** document model.  
 This command reads the **To-do List** document model definition from the `document-models` folder and generates the editor template in the `editors/to-do-list` folder as `editor.tsx`.
 
 Notice the `--editor` flag which specifies the **To-do List** document model, and the `--document-types` flag defines the document type `powerhouse/todolist`.
@@ -15,16 +15,15 @@ ph generate --editor ToDoList --document-types powerhouse/todolist
 
 Once complete, navigate to the `editors/to-do-list/editor.tsx` file and open it in your editor.
 
-
 ### Editor implementation options
 
 When building your editor component within the Powerhouse ecosystem, you have several options for styling, allowing you to leverage your preferred methods:
 
-1.  **Default HTML Styling:** Standard HTML tags (`<h1>`, `<p>`, `<button>`, etc.) will render with default styles offered through the boilerplate. 
+1.  **Default HTML Styling:** Standard HTML tags (`<h1>`, `<p>`, `<button>`, etc.) will render with default styles offered through the boilerplate.
 2.  **Tailwind CSS:** Connect Studio comes with Tailwind CSS integrated. You can directly use Tailwind utility classes for rapid, consistent styling without writing separate CSS files.
 3.  **Custom CSS Files:** You can import traditional CSS files (`.css`) to apply custom styles or integrate existing style libraries.
 
-Connect Studio provides a dynamic local environment, by running `ph connect` to visualize your components instantly as you build them, regardless of the styling method you choose.    
+Connect Studio provides a dynamic local environment, by running `ph connect` to visualize your components instantly as you build them, regardless of the styling method you choose.  
 Manual build steps are typically only needed when publishing packages.
 
 ## To-do List editor
@@ -189,6 +188,7 @@ export default function Editor(props: IProps) {
     );
 }
 ```
+
 </details>
 
 Now you can run the Connect app and see the **To-do List** editor in action.
@@ -197,22 +197,22 @@ Now you can run the Connect app and see the **To-do List** editor in action.
 ph connect
 ```
 
-In Connect, in the bottom right corner you'll find a new Document Model that you can create: **To-do List**.    
+In Connect, in the bottom right corner you'll find a new Document Model that you can create: **To-do List**.  
 Click on it to create a new To-do List document.
 
 :::info
-The editor will update dynamically, so you can play around with your editor styling while seeing your results appear in Connect Studio. 
+The editor will update dynamically, so you can play around with your editor styling while seeing your results appear in Connect Studio.
 :::
 
 Congratulations!
-If you managed to follow this tutorial until this point, you have successfully implemented the **To-do List** document model with its reducer operations and editor. 
+If you managed to follow this tutorial until this point, you have successfully implemented the **To-do List** document model with its reducer operations and editor.
 
 ### Up next: Mastery Track
 
 In the [Mastery Track chapther: Document Model Creation](/academy/MasteryTrack/DocumentModelCreation/WhatIsADocumentModel) we guide you through the theoretics of the previous steps while created a more advanced version of the To-do List.
 
-You will learn: 
+You will learn:
+
 - The in's & out's of a document model.
 - How to use UI & Scalar components from the Document Engineering system.
-- How to build Custom Drive Apps or Drive Explorers. 
-
+- How to build Custom Drive Apps or Drive Explorers.