diff --git a/website/src/docs/docs.json b/website/src/docs/docs.json
index d40368434f0..00bcff995fa 100644
--- a/website/src/docs/docs.json
+++ b/website/src/docs/docs.json
@@ -120,8 +120,8 @@
"title": "Introduction"
},
{
- "path": "get-started-with-graphql-in-net-core",
- "title": "Get Started"
+ "path": "getting-started",
+ "title": "Getting Started"
},
{
"path": "defining-a-schema",
diff --git a/website/src/docs/hotchocolate/v14/get-started-with-graphql-in-net-core.md b/website/src/docs/hotchocolate/v14/get-started-with-graphql-in-net-core.md
deleted file mode 100644
index b6ddfae2157..00000000000
--- a/website/src/docs/hotchocolate/v14/get-started-with-graphql-in-net-core.md
+++ /dev/null
@@ -1,255 +0,0 @@
----
-title: "Get started with GraphQL in .NET Core"
-description: "In this tutorial, we will walk you through the basics of creating a GraphQL .NET server with Hot Chocolate."
----
-
-import { ApiChoiceTabs } from "../../../components/mdx/api-choice-tabs"
-import { InputChoiceTabs } from "../../../components/mdx/input-choice-tabs"
-
-
-
-# Setup
-
-If you are integrating Hot Chocolate into an existing project using ASP.NET Core, you can skip step 1.
-
-## 1. Create a new ASP.NET Core project
-
-
-
-
-```bash
-dotnet new web -n Demo
-```
-
-This will create a new directory called "Demo" containing your project's files.
-
-You can now open the "Demo" directory or the "Demo.csproj" file in your favorite code editor.
-
-
-
-
-Create a new project from within Visual Studio using the "ASP.NET Core Empty" template.
-
-[Learn how you can create a new project within Visual Studio](https://docs.microsoft.com/visualstudio/ide/create-new-project)
-
-
-
-
-## 2. Add the HotChocolate.AspNetCore package
-
-This package includes everything that's needed to get your GraphQL server up and running.
-
-
-
-## 3. Define the types
-
-Next, we need to define the types our GraphQL schema should contain. These types and their fields define what consumers can query from our GraphQL API.
-
-For starters we can define two object types that we want to expose through our schema.
-
-```csharp
-public class Book
-{
- public string Title { get; set; }
-
- public Author Author { get; set; }
-}
-
-public class Author
-{
- public string Name { get; set; }
-}
-```
-
-## 4. Add a Query type
-
-Now we need to define a Query type that exposes the types we have just created through a field.
-
-```csharp
-public class Query
-{
- public Book GetBook() =>
- new Book
- {
- Title = "C# in depth.",
- Author = new Author
- {
- Name = "Jon Skeet"
- }
- };
-}
-```
-
-The field in question is called `GetBook`, but the name will be shortened to just `book` in the resulting schema.
-
-## 5. Add GraphQL services
-
-Next, we need to add the services required by Hot Chocolate to our Dependency Injection container.
-
-
-
-
-```csharp
-var builder = WebApplication.CreateBuilder(args);
-
-builder.Services
- .AddGraphQLServer()
- .AddQueryType();
-```
-
-
-
-
-```csharp
-public void ConfigureServices(IServiceCollection services)
-{
- services
- .AddGraphQLServer()
- .AddQueryType();
-}
-```
-
-
-
-
-The `AddGraphQLServer` returns an `IRequestExecutorBuilder`, which has many extension methods, similar to an `IServiceCollection`, that can be used to configure the GraphQL schema. In the above example we are specifying the Query type that should be exposed by our GraphQL server.
-
-## 6. Map the GraphQL endpoint
-
-Now that we've added the necessary services, we need to expose our GraphQL server at an endpoint. Hot Chocolate comes with an ASP.NET Core middleware that is used to serve up the GraphQL server.
-
-
-
-
-```csharp
-var app = builder.Build();
-
-app.MapGraphQL();
-
-app.Run();
-```
-
-
-
-
-```csharp
-public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
-{
- app.UseRouting();
-
- app.UseEndpoints(endpoints =>
- {
- endpoints.MapGraphQL();
- });
-}
-```
-
-
-
-
-And this is it - you have successfully setup a Hot Chocolate GraphQL server! 🚀
-
-
-
-# Executing a query
-
-First off we have to run the project.
-
-
-
-
-```bash
-dotnet run
-```
-
-
-
-
-The Project can be started by either pressing `Ctrl + F5` or clicking the green "Debug" button in the Visual Studio toolbar.
-
-
-
-
-If you have setup everything correctly, you should be able to open http://localhost:5000/graphql (the port might be different for you) in your browser and be greeted by our GraphQL IDE [Banana Cake Pop](/products/bananacakepop).
-
-
-
-Next click on "Create document". You will be presented with a settings dialog for this new tab, pictured below. Make sure the "Schema Endpoint" input field has the correct URL under which your GraphQL endpoint is available. If it is correct you can just go ahead and click the "Apply" button in the bottom right.
-
-
-
-Now you should be seeing an editor like the one pictured below. If your GraphQL server has been correctly setup you should be seeing a green "online" in the top right corner of the editor.
-
-
-
-The view is split into four panes. The top left pane is where you enter the queries you wish to send to the GraphQL server - the result will be displayed in the top right pane. Variables and headers can be modified in the bottom left pane and recent queries can be viewed in the bottom right pane.
-
-Okay, so let's send a query to your GraphQL server. Paste the below query into the top left pane of the editor:
-
-```graphql
-{
- book {
- title
- author {
- name
- }
- }
-}
-```
-
-To execute the query, simply press the "Run" button. The result should be displayed as JSON in the top right pane as shown below:
-
-
-
-You can also view and browse the schema from within Banana Cake Pop. Click on the "Schema Reference" tab next to "Operations" in order to browse the schema. There's also a "Schema Definition" tab, pictured below, which shows the schema using the raw SDL (Schema Definition Language).
-
-
-
-Congratulations, you've built your first Hot Chocolate GraphQL server and sent a query using the Banana Cake Pop GraphQL IDE 🎉🚀
-
-# Additional resources
-
-Now that you've setup a basic GraphQL server, what should be your next steps?
-
-If this is your first time using GraphQL, we recommend [this guide](https://graphql.org/learn/) that walks you through the basic concepts of GraphQL.
-
-If you want to get an overview of Hot Chocolate's features, we recommend reading the _Overview_ pages in each section of the documentation. They can be found in the sidebar to your left.
-
-For a guided tutorial that explains how you can setup your GraphQL server beyond this basic example, checkout [our workshop](https://github.com/ChilliCream/graphql-workshop). Here we will dive deeper into several topics around Hot Chocolate and GraphQL in general.
-
-You can also jump straight into our documentation and learn more about
[Defining a GraphQL schema](/docs/hotchocolate/v14/defining-a-schema).
diff --git a/website/src/docs/hotchocolate/v14/getting-started.md b/website/src/docs/hotchocolate/v14/getting-started.md
new file mode 100644
index 00000000000..a3e5e3ae291
--- /dev/null
+++ b/website/src/docs/hotchocolate/v14/getting-started.md
@@ -0,0 +1,174 @@
+---
+title: "Getting started with GraphQL in .NET Core"
+description: "In this tutorial, we will walk you through the basics of creating a GraphQL server with Hot Chocolate."
+---
+
+import { InputChoiceTabs } from "../../../components/mdx/input-choice-tabs"
+
+# Setup
+
+## Install the Hot Chocolate templates
+
+Hot Chocolate provides a set of templates that can be used to quickly get started. Run the following command to install the templates:
+
+```bash
+dotnet new install HotChocolate.Templates
+```
+
+These templates are kept up to date with the latest .NET and Hot Chocolate features.
+
+## Create a new Hot Chocolate GraphQL server project
+
+Once you have installed the templates you can use them to bootstrap your next ASP.NET Core project with Hot Chocolate.
+
+
+
+
+```bash
+dotnet new graphql --name GettingStarted
+```
+
+This will create a new directory named `GettingStarted` containing your project's files. You can open the directory or the `GettingStarted.csproj` file in your favorite code editor.
+
+
+
+
+Create a new project from within Visual Studio using the `GraphQL Server` template.
+
+[Learn how you can create a new project within Visual Studio](https://docs.microsoft.com/visualstudio/ide/create-new-project)
+
+
+
+
+# Exploring the template files
+
+## Types
+
+The `Types` directory defines the types that our GraphQL schema should contain. These types and their fields define what consumers can query from our GraphQL API.
+
+We define two object types that we want to expose through our schema.
+
+```csharp
+public record Author(string Name);
+```
+
+```csharp
+public record Book(string Title, Author Author);
+```
+
+> Note: Regular classes may also be used to define object types.
+
+We also define a `Query` type that exposes the types above through a field.
+
+```csharp
+[QueryType]
+public static class Query
+{
+ public static Book GetBook()
+ => new Book("C# in depth.", new Author("Jon Skeet"));
+}
+```
+
+The field in question is named `GetBook`, but the name will be shortened to just `book` in the resulting schema.
+
+The `QueryType` attribute marks a class as an extension of the `query` operation type.
+
+## Program
+
+In the `Program.cs` file, we start by adding the services required by Hot Chocolate to our dependency injection container.
+
+```csharp
+builder.Services
+ .AddGraphQLServer()
+```
+
+`AddGraphQLServer` returns an `IRequestExecutorBuilder`, which has many extension methods, similar to an `IServiceCollection`, that can be used to configure the GraphQL server.
+
+We then call `AddTypes`, a source-generated extension method that automatically registers all types in the assembly.
+
+> Note: The name of the `AddTypes` method is based on the assembly name by default, but can be set using the `[Module]` assembly attribute, as seen in `ModuleInfo.cs`.
+
+Next, we call `app.MapGraphQL()` to expose our GraphQL server at an endpoint with the default path `/graphql`. Hot Chocolate comes with an ASP.NET Core middleware that is used to serve up the GraphQL server.
+
+Finally, we call `app.RunWithGraphQLCommands(args)` to start the server.
+
+And that is it – you have successfully set up a Hot Chocolate GraphQL server! 🚀
+
+# Executing a query
+
+First off we have to run the project.
+
+
+
+
+```bash
+dotnet run --no-hot-reload
+```
+
+
+
+
+The project can be started by either pressing `Ctrl + F5` or clicking the green `Debug` button in the Visual Studio toolbar.
+
+
+
+
+If you have set everything up correctly, you should be able to open http://localhost:5095/graphql in your browser and be greeted by our GraphQL IDE [Banana Cake Pop](/products/bananacakepop).
+
+
+
+Next, click on `Create Document`. You will be presented with a settings dialog for this new tab, pictured below. Make sure the `Schema Endpoint` input field has the correct URL under which your GraphQL endpoint is available. If it is correct you can just go ahead and click the `Apply` button.
+
+
+
+Now you should be seeing an editor like the one pictured below. If your GraphQL server has been correctly set up you should see `Schema available` at the bottom right of the editor.
+
+
+
+The view is split into five panes.
+
+1. `Builder`
+ - This is where you build operations with a visual editor.
+1. `Request`
+ - This is where you enter operations that you wish to send to the GraphQL server.
+1. `Response`
+ - This is where results will be displayed.
+1. `GraphQL Variables / HTTP Headers`
+ - This is where you modify variables and headers.
+1. `Responses`
+ - This is where you view recent queries.
+
+Let's send a query to your GraphQL server. Paste the below query into the `Request` pane of the editor:
+
+```graphql
+{
+ book {
+ title
+ author {
+ name
+ }
+ }
+}
+```
+
+To execute the query, simply press the `Run` button. The result should be displayed as JSON in the `Response` pane as shown below:
+
+
+
+You can also view and browse the schema from within Banana Cake Pop. Click on the `Schema Reference` tab next to `Operation` in order to browse the schema. There's also a `Schema Definition` tab, pictured below, which shows the schema using the raw SDL (Schema Definition Language).
+
+
+
+Congratulations, you've built your first Hot Chocolate GraphQL server and sent a query using the Banana Cake Pop GraphQL IDE. 🎉🚀
+
+# Additional resources
+
+Now that you've set up a basic GraphQL server, what should your next steps be?
+
+If this is your first time using GraphQL, we recommend [this guide](https://graphql.org/learn/) that walks you through the basic concepts of GraphQL.
+
+If you want to get an overview of Hot Chocolate's features, we recommend reading the _Overview_ pages in each section of the documentation. They can be found in the sidebar to your left.
+
+For a guided tutorial that explains how you can set up your GraphQL server beyond this basic example, check out [our workshop](https://github.com/ChilliCream/graphql-workshop). Here we will dive deeper into several topics around Hot Chocolate and GraphQL in general.
+
+You can also jump straight into our documentation and learn more about [Defining a GraphQL schema](/docs/hotchocolate/v14/defining-a-schema).
diff --git a/website/src/docs/hotchocolate/v14/index.md b/website/src/docs/hotchocolate/v14/index.md
index 31c7ca811ae..9c39992efbd 100644
--- a/website/src/docs/hotchocolate/v14/index.md
+++ b/website/src/docs/hotchocolate/v14/index.md
@@ -16,6 +16,6 @@ You can use Hot Chocolate Server as:
Hot Chocolate is very easy to set up and takes the clutter away from writing GraphQL schemas. We update Hot Chocolate continuously and implement new spec features as they hit draft status. This lets you pick up new GraphQL features incrementally to open up new development opportunities for your ideas.
-Let's [get started](/docs/hotchocolate/v14/get-started-with-graphql-in-net-core) with Hot Chocolate!
+Let's [get started](/docs/hotchocolate/v14/getting-started) with Hot Chocolate!
Join us on [YouTube](https://youtube.chillicream.com) for Hot Chocolate deep dives.
diff --git a/website/src/images/get-started-bcp-editor.png b/website/src/images/get-started-bcp-editor.png
deleted file mode 100644
index e076b2bd710..00000000000
Binary files a/website/src/images/get-started-bcp-editor.png and /dev/null differ
diff --git a/website/src/images/get-started-bcp-query.png b/website/src/images/get-started-bcp-query.png
deleted file mode 100644
index 9b8d8da6771..00000000000
Binary files a/website/src/images/get-started-bcp-query.png and /dev/null differ
diff --git a/website/src/images/get-started-bcp-schema.png b/website/src/images/get-started-bcp-schema.png
deleted file mode 100644
index ece15c1d71e..00000000000
Binary files a/website/src/images/get-started-bcp-schema.png and /dev/null differ
diff --git a/website/src/images/get-started-bcp-setup.png b/website/src/images/get-started-bcp-setup.png
deleted file mode 100644
index dbfcd78927a..00000000000
Binary files a/website/src/images/get-started-bcp-setup.png and /dev/null differ
diff --git a/website/src/images/get-started-bcp.png b/website/src/images/get-started-bcp.png
deleted file mode 100644
index 41c11e634a4..00000000000
Binary files a/website/src/images/get-started-bcp.png and /dev/null differ
diff --git a/website/src/images/getting-started-bcp-editor.webp b/website/src/images/getting-started-bcp-editor.webp
new file mode 100644
index 00000000000..a8d1cf33fac
Binary files /dev/null and b/website/src/images/getting-started-bcp-editor.webp differ
diff --git a/website/src/images/getting-started-bcp-query.webp b/website/src/images/getting-started-bcp-query.webp
new file mode 100644
index 00000000000..c4a131bd59c
Binary files /dev/null and b/website/src/images/getting-started-bcp-query.webp differ
diff --git a/website/src/images/getting-started-bcp-schema.webp b/website/src/images/getting-started-bcp-schema.webp
new file mode 100644
index 00000000000..0e019f7ac6b
Binary files /dev/null and b/website/src/images/getting-started-bcp-schema.webp differ
diff --git a/website/src/images/getting-started-bcp-setup.webp b/website/src/images/getting-started-bcp-setup.webp
new file mode 100644
index 00000000000..e2c7e85d50a
Binary files /dev/null and b/website/src/images/getting-started-bcp-setup.webp differ
diff --git a/website/src/images/getting-started-bcp.webp b/website/src/images/getting-started-bcp.webp
new file mode 100644
index 00000000000..0879b39c39b
Binary files /dev/null and b/website/src/images/getting-started-bcp.webp differ