bryantgillespie · Jun 11, 2026 · Jun 11, 2026 · Jun 11, 2026
@@ -24,11 +24,11 @@ This is the base state of your Directus project. You can select from one of the
 - **Empty Project** – A completely blank project, ready for you to take in the direction you need.
 - **Simple CRM** – A customer relationship management system (CRM) that you can customise to your needs.
 - **Simple eCommerce** – A ready-to-go online store you can get going with.
-- **Simple CMS** – A ready-to-go content management sytem (CMS) that you can customise to your needs.
+- **Simple CMS** – A ready-to-go content management system (CMS) that you can customise to your needs.
 
 ## Project Tiers
 
-The available [project tiers](/cloud/getting-started/introduction) are billed either monthly or anually.
+The available [project tiers](/cloud/getting-started/introduction) are billed either monthly or annually.
 
 The Directus Cloud enterprise tier offers power and scale to meet any project's needs and offers more datacenter regions, upgraded support options, and more.
 

@@ -32,7 +32,7 @@ After this, create a subheading called "Before You Start" and list any prerequis
 
 #### Summary
 
-At the end of the post, add a summary that reenforces what the reader has learned and suggest next steps. 
+At the end of the post, add a summary that reinforces what the reader has learned and suggest next steps.
 
 ### Principles
 

@@ -49,7 +49,7 @@ pnpm test
 Install [Docker](https://docs.docker.com/get-docker/) and ensure that the service is up and running. Run the following commands to start the blackbox tests:
 
 ```bash
-# Ensure that you are testing against the lastest state of the codebase
+# Ensure that you are testing against the latest state of the codebase
 pnpm --workspace-root build
 
 # Clean up in case you ran the tests before

@@ -222,7 +222,7 @@ Explicit casting is also available when reading from a file with the `_FILE` suf
 
 ## Environment Object Syntax
 
-Environment vairables that end on a `*` in our docs allow you to configure internal objects with the following notation.
+Environment variables that end on a `*` in our docs allow you to configure internal objects with the following notation.
 
 For the variable `MY_ENV_*`:
 - `MY_ENV_SIZE=1` will be turned into `{ size: 1 }`

@@ -9,7 +9,7 @@ technologies:
 authors:
   - name: Esther Agbaje
     title: Developer Advocate
-description: Learn how to confgure Live Preview with Next.js' draft mode.
+description: Learn how to configure Live Preview with Next.js' draft mode.
 navigation:
   title: Draft Mode Preview
 ---

@@ -173,8 +173,8 @@ async function Pagination({ limit, currentPage }) {
   const totalPages = Math.ceil(totalPostCount / limit);
 
   const hasMorePage = () => {
-    const recievedPostsCount = limit * currentPage;
-    return recievedPostsCount < totalPostCount;
+    const receivedPostsCount = limit * currentPage;
+    return receivedPostsCount < totalPostCount;
   };
 
   return (
@@ -264,7 +264,7 @@ With this, you can now navigate between pages from the UI:
 
 ## Implementing Infinite Scrolling
 
-Infinite scrolling requires browser events or the Intersection observer JavaScript API to be implemented so it needs to be done on the client side but one way we can improve this is to load the initial HTML from the server. For that, we will be using [Serve Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
+Infinite scrolling requires browser events or the Intersection observer JavaScript API to be implemented so it needs to be done on the client side but one way we can improve this is to load the initial HTML from the server. For that, we will be using [Server Actions](https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations).
 
 In the root directory, create a `components` directory, inside it, create a `PostList.js` file and add the following lines of code:
 
@@ -379,8 +379,8 @@ const PostList = ({ initialPosts, getPosts, limit, totalPostCount }) => {
   const [posts, setPosts] = useState(initialPosts);
 
   const hasMorePosts = () => {
-    const recievedCount = limit * currentPage;
-    return recievedCount < totalPostCount;
+    const receivedCount = limit * currentPage;
+    return receivedCount < totalPostCount;
   };
 
   return (
@@ -444,10 +444,10 @@ const handleObserver = (entries) => {
   }
 };
 ```
-Here in the `useEffect` hook the Intersection Observer API is used to observe the `<span>` element of the loading indicator. At initial mount and when the `<span>` enters and exists the viewport, the `handleObserver()` callback function is called which will then call `fetchMorePosts()` to fetch new posts and update the state whenever there are more posts and the `<span>` element enters the viewport.
+Here in the `useEffect` hook the Intersection Observer API is used to observe the `<span>` element of the loading indicator. At initial mount and when the `<span>` enters and exits the viewport, the `handleObserver()` callback function is called which will then call `fetchMorePosts()` to fetch new posts and update the state whenever there are more posts and the `<span>` element enters the viewport.
 
 With this, the infinite scrolling should now be working:
-![Demonstrates the infinte scrolling functionality. When the page is scrolled down to the bottom, the loading indicator is displayed, and new posts are displayed afterwards. Finally, when the bottom of the page is reached again the text No more posts is displayed.](/img/f6dd7960-6296-4242-abc2-5a1232f06143.gif)
+![Demonstrates the infinite scrolling functionality. When the page is scrolled down to the bottom, the loading indicator is displayed, and new posts are displayed afterwards. Finally, when the bottom of the page is reached again the text No more posts is displayed.](/img/f6dd7960-6296-4242-abc2-5a1232f06143.gif)
 
 ## Which To Use
 As with most topics, the answer is "it depends". Paginated lists tend to have better performance Search Engine Optimization (SEO) as all page content (typically smaller) is initially loaded on the page. Infinite scrolling is better at maintaining attention and exploration

@@ -283,7 +283,7 @@ You'll notice that the `generateMetadata` function that would generate the SEO m
 
 ```js
 // Replace the following
-export const metadat = {
+export const metadata = {
   title: "Create Next App",
   description: "Generated by create next app",
 }

@@ -158,7 +158,7 @@ This will allow your Nuxt project to access directus via your Nuxt URL, eg. [htt
 
 #### Define a Directus Schema
 
-Typescript needs to know what the structure of our Directus data will be. To achieve this create a `directus.d.ts` file in the root of our project which defines our schema:
+TypeScript needs to know what the structure of our Directus data will be. To achieve this create a `directus.d.ts` file in the root of our project which defines our schema:
 
   ```ts
 /// <reference types="@directus/extensions/api.d.ts" />

@@ -106,7 +106,7 @@ This will allow your Nuxt project to access directus via your Nuxt URL, eg. [htt
 
 #### Define a Directus Schema
 
-Typescript needs to know what the structure of our Directus data will be. To achieve this create a `directus.d.ts` file in the root of our project which defines our schema:
+TypeScript needs to know what the structure of our Directus data will be. To achieve this create a `directus.d.ts` file in the root of our project which defines our schema:
 
 ```ts
 /// <reference types="@directus/extensions/api.d.ts" />

@@ -1118,7 +1118,7 @@ const { title, description } = seo || { title: "Default Title", description: "De
 
 The code above will set the title and description for each page based on the data coming from the CMS. If the SEO data is not available, it will use the default title and description.
 
-The CMS also has a navigation collection that has a header and footer data. You can use the `header` and `footer` fields to set the header and footer in the `Layout` component so it is reuseable for all pages.
+The CMS also has a navigation collection that has a header and footer data. You can use the `header` and `footer` fields to set the header and footer in the `Layout` component so it is reusable for all pages.
 
 To do this, you first need the header and footer data from the CMS.
 

@@ -20,7 +20,7 @@ navigation:
 You will need:
 
 - A Directus project with the collections defined in our Create Reusable Blocks with Many-to-Any Relationships tutorial.
-- Your public policy should have read permission on the reuseable blocks collections.
+- Your public policy should have read permission on the reusable blocks collections.
 - Fundamental understanding of Astro concepts.
 
 ## Edit Public Policy

@@ -87,7 +87,7 @@ When prompted, select SvelteKit minimal as the template. Do not add type checkin
 ◇  Which template would you like?
 │  SvelteKit minimal
 │
-◇  Add type checking with Typescript?
+◇  Add type checking with TypeScript?
 │  No
 │
 ◆  Project created
@@ -282,7 +282,7 @@ In the following step, you will create a login component where the users will be
 </div>
 ```
 
-### Json Authentcation mode
+### Json Authentication mode
 Json Authentication mode is one of the two approaches Directus offers to authentication. It involves the server returning an access token and a refresh token in the response body during authentication. To use the json mode, update your authentication composable in your `./src/lib/directus.js` file to this:
 
 ```javascript

@@ -70,7 +70,7 @@ When prompted, select SvelteKit minimal as the template. Do not add type checkin
 ◇  Which template would you like?
 │  SvelteKit minimal
 │
-◇  Add type checking with Typescript?
+◇  Add type checking with TypeScript?
 │  No
 │
 ◆  Project created

@@ -86,7 +86,7 @@ When prompted, select SvelteKit minimal as the template. Do not add type checkin
 ◇  Which template would you like?
 │  SvelteKit minimal
 │
-◇  Add type checking with Typescript?
+◇  Add type checking with TypeScript?
 │  No
 │
 ◆  Project created

@@ -63,7 +63,7 @@ When prompted, select SvelteKit minimal as the template. Do not add type checkin
 ◇  Which template would you like?
 │  SvelteKit minimal
 │
-◇  Add type checking with Typescript?
+◇  Add type checking with TypeScript?
 │  No
 │
 ◆  Project created

@@ -76,7 +76,7 @@ When prompted, select SvelteKit minimal as the template. Do not add type checkin
 ◇  Which template would you like?
 │  SvelteKit minimal
 │
-◇  Add type checking with Typescript?
+◇  Add type checking with TypeScript?
 │  No
 │
 ◆  Project created

@@ -189,7 +189,7 @@ export async function load({ fetch, params, url }) {
 
 The above code will:
 
-- Use the `readItem` funtion to find and get the news that matches the primary key field (slug) in the news collection.
+- Use the `readItem` function to find and get the news that matches the primary key field (slug) in the news collection.
 - Fetch all the available languages from the `languages` collection.
 
 Create a `+page.svelte` file in the `routes/news` directory and add the code:

@@ -72,7 +72,7 @@ When prompted, select SvelteKit minimal as the template. Do not add type checkin
 ◇  Which template would you like?
 │  SvelteKit minimal
 │
-◇  Add type checking with Typescript?
+◇  Add type checking with TypeScript?
 │  No
 │
 ◆  Project created

@@ -64,7 +64,7 @@ When prompted, select SvelteKit minimal as the template. Do not add type checkin
 ◇  Which template would you like?
 │  SvelteKit minimal
 │
-◇  Add type checking with Typescript?
+◇  Add type checking with TypeScript?
 │  No
 │
 ◆  Project created

@@ -54,7 +54,7 @@ When prompted, select SvelteKit minimal as the template. Do not add type-checkin
 ◇  Which template would you like?
 │  SvelteKit minimal
 │
-◇  Add type checking with Typescript?
+◇  Add type checking with TypeScript?
 │  No
 │
 ◆  Project created
@@ -206,7 +206,7 @@ Create a `src/lib/components/CardGroup.svelte` file. Add the following code:
 ```
 
 ### Page Component
-Create a `fetchPage.js` file inside the `./src/lib` directory to use the Directus client to fetch pages. Add the foloowing code:
+Create a `fetchPage.js` file inside the `./src/lib` directory to use the Directus client to fetch pages. Add the following code:
 
 ```javascript
 // src/lib/fetchPage.js

@@ -332,7 +332,7 @@ Navigate to `http://127.0.0.1:8000/blog` to access the blogs page.
 
 ## Add Navigation
 
-Run the commmand below to create a new service provider:
+Run the command below to create a new service provider:
 
 ```shell
 php artisan make:provider ViewServiceProvider

@@ -79,7 +79,7 @@ In GraphQL, each `json` type field exposes a `json(path: String!)` sub-field wit
 ::
 
 ::callout{icon="i-lucide-info" color="info"}
-The SDK supports a type safe `json(field, path)` expression within its `fields` array, see [SDK Type Safety](#sdk-type-safety) for more deatils.
+The SDK supports a type safe `json(field, path)` expression within its `fields` array, see [SDK Type Safety](#sdk-type-safety) for more details.
 ::
 
 ### Response Format

@@ -36,7 +36,7 @@ The keys contain the following information.
 - **`$env`** — Environment variables allowed in `FLOWS_ENV_ALLOW_LIST`. This could include PUBLIC_URL, PORT, etc. Every data chain has an `$env` key.
 - **`$last`** — The value appended under $last changes after each operation. It stores data of the last operation that executed in the Flow. Every data chain has a `$last` key.
 
-Operation keys will contain the data (if any) generated by the first operation. If none, `null` will be appeneded. It will also be common to have nested JSON data.
+Operation keys will contain the data (if any) generated by the first operation. If none, `null` will be appended. It will also be common to have nested JSON data.
 
 Real-life examples of data chains and their data structures will vary, based on your Flow's unique configuration.
 

@@ -263,7 +263,7 @@ The embed register function requires two parameters - the position of the embed
 
 ## Sandboxed Hooks
 
-When using the sandbox, you have access to `filter` and `action` events only. Callback functions recieve the `payload` object as the only parameter.
+When using the sandbox, you have access to `filter` and `action` events only. Callback functions receive the `payload` object as the only parameter.
 
 ### TypeScript
 

@@ -7,7 +7,7 @@ description: Sandboxed Extensions run in an isolated environment and must reques
 
 Sandboxed API Extensions run in an isolated environment and must request permission scopes to interact with the host environment.
 
-The sandboxed environment only has access to [JavaScript standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) which means that common runtime functions such as `console` and `setTimeout` are not available. A sandboxed extension is given additional capabilites through scopes and functions provided by the `directus:api` module.
+The sandboxed environment only has access to [JavaScript standard built-in objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects) which means that common runtime functions such as `console` and `setTimeout` are not available. A sandboxed extension is given additional capabilities through scopes and functions provided by the `directus:api` module.
 
 ## Enabling the Sandbox
 

@@ -146,7 +146,7 @@ This month we had two releases.
 - The [Tree Map Chart](https://github.com/directus-labs/extensions/tree/main/packages/treemap-chart-panel) presents a cluster or boxes where the size of each box represent the value. You can also group data into categories which are presented in different colors.
 - The [Funnel Chart](https://github.com/directus-labs/extensions/tree/main/packages/funnel-chart-panel) presents a list of numbers in an ascending or descending funnel chart.
 - The [Scatter Plot Chart](https://github.com/directus-labs/extensions/tree/main/packages/scatter-plot-panel) is a 2-axis chart where values are plotted as dots. You can optionally add axis labels and hover over any of the dots to see the values.
-- The [Timeline Chart](https://github.com/directus-labs/extensions/tree/main/packages/timeline-chart-panel) presents a series of tasks or events with a start and end date on a graph. You can also group data into categories on the y axis and seperate tasks into different colors.
+- The [Timeline Chart](https://github.com/directus-labs/extensions/tree/main/packages/timeline-chart-panel) presents a series of tasks or events with a start and end date on a graph. You can also group data into categories on the y axis and separate tasks into different colors.
 - The [Customizable Tabular Layout Boilerplate](https://github.com/directus-labs/extensions/tree/main/boilerplates/tabular-layout) give extension authors the ability to use it as a base for their customizations.
 
 ## October 2024

@@ -67,7 +67,7 @@ When prompted, select SvelteKit minimal as the template. Do not add type checkin
 ◇  Which template would you like?
 │  SvelteKit minimal
 │
-◇  Add type checking with Typescript?
+◇  Add type checking with TypeScript?
 │  No
 │
 ◆  Project created

@@ -28,7 +28,7 @@ Before we hop 🐰 in , here’s what you’ll need to follow along:
 
 **Knowledge**
 
-- Beginner knowledge of Javascript, Typescript, and Vue.js (Composition API)
+- Beginner knowledge of Javascript, TypeScript, and Vue.js (Composition API)
 
 **Tooling**
 
@@ -388,7 +388,7 @@ async function handleSubmission(rating?: number) {
 		const data = await response.json();
 		feedback.id = data.id;
 
-		// If the reponse has comments, we can assume they've completed the second step. So we'll show the success message.
+		// If the response has comments, we can assume they've completed the second step. So we'll show the success message.
 		if (data.comments) {
 			success.value = true;
 		}

@@ -276,7 +276,7 @@ Now click on any of the videos to stream it.
 
 ## Creating Search Functionality
 
-In your `services/index.ts`, add a new funtion that implements search functionality to find videos by title or description.
+In your `services/index.ts`, add a new function that implements search functionality to find videos by title or description.
 
 ```ts
 export async function searchVideos(query: string): Promise<Video[]> {

@@ -329,7 +329,7 @@ export function CartProvider({ children }: CartProviderProps) {
 Let's break down the `cart-context` component for better understanding:
 
 - `CartContext` uses React's `createContext` API to create a new context and `useState` for storing items into the `cartItem` array.
-- Use `localStorage` for storing `cartItems` for persistance
+- Use `localStorage` for storing `cartItems` for persistence
 - Creates a `CartProvider` component from which the context can be passed from to other components
 - `addToCart` adds an item to the shopping cart if it's not already there.
 - `removeFromCart` removes an item from the shopping cart.

@@ -108,7 +108,7 @@ export default defineEventHandler(async (event) => {
 			throw createError({ statusCode: 500, statusMessage: 'Ticket not found' });
 		}
 
-		// If they have genearated 3 avatars, throw an error
+		// If they have generated 3 avatars, throw an error
 		if (ticket.avatars && ticket.avatars.length >= avatarLimit) {
 			throw createError({ statusCode: 500, statusMessage: `Maximum number of ${avatarLimit} avatars generated.` });
 		}

@@ -351,7 +351,7 @@ Directus returns for Many To Any (M2A) relationships.
 If you notice you aren't receiving the data that you expect, check the Permissions settings for your Public or chosen
 role. You'll have to enable Read access for each collection using in the Pages > Blocks Many-To-Any field.
 
-### Use Typescript
+### Use TypeScript
 
 We recommend adding types for each of your different collections to your frontend framework.