diff --git a/docs/plugins/hwp-previews/explanation/core-concepts/index.md b/docs/plugins/hwp-previews/explanation/core-concepts/index.md
index 1f9148ee..53c52a74 100644
--- a/docs/plugins/hwp-previews/explanation/core-concepts/index.md
+++ b/docs/plugins/hwp-previews/explanation/core-concepts/index.md
@@ -3,4 +3,101 @@ title: "Core Concepts"
 description: "Deep dive explanations of the HWP Previews plugin's core concepts, architecture, and systems."
 ---
 
-@TODO
+## Overview
+
+This article provides an in-depth exploration of the fundamental concepts that power the HWP Previews plugin, covering the template-based URL system that enables framework-agnostic preview generation, the parameter registry that makes URLs dynamic and context-aware, the flexible post type configuration system, solutions for WordPress hierarchical content challenges, and the different preview modes available to content creators.
+
+## Core Architectural Concepts
+
+### 1. Preview URL Templates with Dynamic Parameters
+
+At the heart of HWP Previews is the concept of URL templates. Instead of hardcoding preview URLs, administrators define templates using placeholder tokens that get dynamically replaced with actual post data.
+
+For example, a template like:
+```
+https://mysite.com/preview?p={ID}&type={type}&status={status}
+```
+
+When previewing a draft post with ID 42 of type "page", this becomes:
+```
+https://mysite.com/preview?p=42&type=page&status=draft
+```
+
+This template approach ensures framework agnosticity, whether you're using Next.js with `/api/preview?slug={slug}`, a custom React app with `/preview/{ID}`, or any other front-end architecture. The system generates context-rich URLs that can pass any information your front-end needs to handle previews intelligently, from basic post data to complex hierarchical relationships.
+
+#### The Parameter Registry System
+
+HWP Previews maintains a parameter registry, a centralized collection of available dynamic parameters. Out of the box, it provides:
+
+- `{ID}` – Post ID
+- `{author_ID}` – Post author's user ID
+- `{status}` – Post status (draft, pending, etc.)
+- `{slug}` – Post slug
+- `{parent_ID}` – Parent post ID (for hierarchical types)
+- `{type}` – Post type slug
+- `{template}` – Template filename
+
+This registry is extensible through WordPress filters, allowing developers to add custom parameters (e.g., `{category}`, `{custom_field}`, or `{locale}` for multilingual sites).
+
+### 2. Post Type-Specific Configuration
+
+WordPress sites often have diverse content types (posts, pages, custom post types) each potentially requiring different preview handling. To address this challenge, HWP Previews provides per-post-type configuration.
+
+For each public post type, you can independently configure:
+- Whether previews are enabled at all
+- The preview URL template
+- Whether to display previews in an iframe within the editor
+- Whether to allow non-published posts as parents (for hierarchical types)
+
+### 3. Hierarchical Post Types and Parent Status
+
+WordPress supports hierarchical post types (like pages) where posts can have parent-child relationships. By default, WordPress only allows published posts to be parents. This creates a workflow problem: when building a site, you often want to establish page hierarchies while everything is still in draft.
+
+HWP Previews solves this with the "Allow All Statuses as Parent" option. When enabled for a post type, draft, pending, or private posts can serve as parents.
+
+### 4. Iframe vs. New Tab Preview Modes
+
+HWP Previews offers two preview rendering modes, each suited to different workflows:
+
+#### Iframe Mode
+When enabled, previews load directly within the WordPress editor in a sandboxed `<iframe>`. This provides an integrated experience, so you can see your changes alongside the preview, similar to the WordPress theme customizer.
+
+#### New Tab Mode
+When disabled, clicking "Preview" opens the preview URL in a new browser tab.
+
+### 5. Faust Integration
+
+When Faust.js is detected, HWP Previews automatically configures itself to work seamlessly with Faust's preview system. This provides Faust users with an upgrade path that maintains their existing workflows while gaining access to additional features like iframe mode, custom parameters, and per-post-type control.
+
+The integration removes potential conflicts by disabling Faust's native preview handling and pre-configuring preview URLs to match Faust's expected structure. This **compatibility without compromise** approach minimizes adoption barriers for users with existing Faust investments.
+
+## The Hook System and Extensibility
+
+HWP Previews provides a comprehensive system of WordPress actions and filters for extending functionality.
+
+### Key Extension Points
+
+`hwp_previews_register_parameters`: Add custom dynamic parameters
+`hwp_previews_filter_available_post_types`: Control which post types appear in settings
+`hwp_previews_filter_available_post_statuses`: Modify available post statuses
+`hwp_previews_template_path`: Replace the iframe preview template
+
+## Security Considerations
+
+While HWP Previews focuses on preview URL generation rather than authentication, its design acknowledges security concerns:
+
+1. **No token generation**: The plugin intentionally doesn't handle authentication tokens, that's the front-end's responsibility
+2. **URL encoding**: All parameter values are properly encoded to prevent injection attacks
+3. **Capability checks**: Admin settings pages require appropriate WordPress capabilities
+4. **Nonce verification**: AJAX requests (like dismissing notices) include nonce verification
+
+## Performance Characteristics
+
+HWP Previews is designed for minimal performance impact:
+
+- **Settings caching**: Configuration is cached and only loaded when needed
+- **Lazy initialization**: Services instantiate only when actually used
+- **Selective hooks**: Post-type-specific hooks only register for enabled post types
+- **No frontend overhead**: The plugin only activates for authenticated users in admin/preview contexts
+
+These choices reflect an understanding that preview functionality should never degrade the public site's performance.
diff --git a/docs/plugins/hwp-previews/how-to/configure-previews/hwp-previews-iframe.png b/docs/plugins/hwp-previews/how-to/configure-previews/hwp-previews-iframe.png
new file mode 100644
index 00000000..6d8eddf0
Binary files /dev/null and b/docs/plugins/hwp-previews/how-to/configure-previews/hwp-previews-iframe.png differ
diff --git a/docs/plugins/hwp-previews/how-to/configure-previews/hwp-previews-menu-item.png b/docs/plugins/hwp-previews/how-to/configure-previews/hwp-previews-menu-item.png
new file mode 100644
index 00000000..04ed2a33
Binary files /dev/null and b/docs/plugins/hwp-previews/how-to/configure-previews/hwp-previews-menu-item.png differ
diff --git a/docs/plugins/hwp-previews/how-to/configure-previews/hwp-previews-page-settings.png b/docs/plugins/hwp-previews/how-to/configure-previews/hwp-previews-page-settings.png
new file mode 100644
index 00000000..70955a7e
Binary files /dev/null and b/docs/plugins/hwp-previews/how-to/configure-previews/hwp-previews-page-settings.png differ
diff --git a/docs/plugins/hwp-previews/how-to/configure-previews/hwp-previews-post-settings.png b/docs/plugins/hwp-previews/how-to/configure-previews/hwp-previews-post-settings.png
new file mode 100644
index 00000000..9e6ea2f3
Binary files /dev/null and b/docs/plugins/hwp-previews/how-to/configure-previews/hwp-previews-post-settings.png differ
diff --git a/docs/plugins/hwp-previews/how-to/configure-previews/index.md b/docs/plugins/hwp-previews/how-to/configure-previews/index.md
index badbcb04..536f3e16 100644
--- a/docs/plugins/hwp-previews/how-to/configure-previews/index.md
+++ b/docs/plugins/hwp-previews/how-to/configure-previews/index.md
@@ -3,4 +3,114 @@ title: "Configure Previews"
 description: "Learn how to configure preview functionality using the HWP Previews plugin in your headless WordPress application."
 ---
 
-@TODO
+## Overview
+
+This guide shows you how to configure preview URLs for your headless WordPress site using HWP Previews. You'll set up preview links that redirect from WordPress to your front-end application with the necessary context data.
+
+> [!TIP]
+> Want to see HWP Previews in action first? Check out the working examples in the `examples/` directory that demonstrate integration with WP GraphQL and REST API. You can run them locally using `wp-env` to test the plugin functionality before configuring your own setup.
+
+## Prerequisites
+
+- HWP Previews plugin installed and activated
+- A running front-end application with a preview endpoint
+
+## 1. Access the settings page
+
+1. Log into your WordPress admin dashboard
+2. Navigate to **Settings > HWP Previews**
+
+![HWP Previews menu item in WordPress admin sidebar under Settings](hwp-previews-menu-item.png)
+
+You'll see tabs for each public post type on your site (Posts, Pages, and any custom post types).
+
+## 2. Configure a post type
+
+### a. Enable previews for the post type
+
+1. Click on the tab for the post type you want to configure (e.g., "Posts")
+2. Check the "Enable HWP Previews" box
+
+> [!NOTE]  
+> If you have Faust.js installed, this option will be enabled by default for all post types.
+
+### b. Set the preview URL template
+
+In the "Preview URL Template" field, enter your front-end preview endpoint URL with dynamic parameters:
+
+```
+https://mysite.com/api/preview?id={ID}&type={type}&status={status}
+```
+
+Available parameters:
+
+- `{ID}` - Post ID
+- `{author_ID}` - Post author's user ID
+- `{status}` - Post status (draft, pending, etc.)
+- `{slug}` - Post slug
+- `{parent_ID}` - Parent post ID (for hierarchical types)
+- `{type}` - Post type slug
+- `{template}` - Template filename
+
+The parameters sidebar shows descriptions for each available parameter.
+
+![HWP Previews post settings page showing the Posts tab with Enable HWP Previews checkbox, Preview URL Template field with example URL, and parameters sidebar](hwp-previews-post-settings.png)
+
+### c. Choose the preview mode
+
+Select how you want previews to display:
+
+- **Iframe mode**: Check "Load Previews in Iframe" to display previews within the WordPress editor
+- **New tab mode**: Leave unchecked to open previews in a new browser tab
+
+For iframe mode to work, your front-end must not set restrictive `X-Frame-Options` headers.
+
+### d. Optional: Configure hierarchical post types (Pages only)
+
+For hierarchical post types like Pages, you can allow draft posts to be parents by checking "Allow All Statuses as Parent" and saving changes, which lets you build page hierarchies before publishing content.
+
+![HWP Previews page settings showing the Pages tab with Enable HWP Previews checkbox, Preview URL Template field, and Allow All Statuses as Parent checkbox for hierarchical post types](hwp-previews-page-settings.png)
+
+## 3. Save your settings
+
+Click the "Save Changes" button at the bottom of the page.
+
+## 4. Test the preview
+
+1. Open any post of the configured type in the editor
+2. Make a change to the content
+3. Click the "Preview" button
+
+If configured correctly:
+- **Iframe mode**: The preview loads within the editor
+- **New tab mode**: A new tab opens with your front-end preview URL
+
+The URL will include the dynamic parameters you specified, for example:
+```
+https://mysite.com/api/preview?id=42&type=post&status=draft
+```
+
+![HWP Previews iframe mode showing a preview of a post loaded within the WordPress editor interface](hwp-previews-iframe.png)
+
+## Troubleshooting common issues
+
+### Preview button doesn't redirect
+
+Check that:
+- The "Enable HWP Previews" checkbox is checked for that post type
+- You've saved your settings
+- The Preview URL Template field is not empty
+
+### Iframe preview shows a blank screen
+
+Your front-end may be blocking iframe embedding. Either:
+- Make sure your front-end can properly handle authentication to show draft content
+- Configure your front-end to allow embedding from your WordPress domain
+- Switch to new tab mode by unchecking "Load Previews in Iframe"
+
+### Dynamic parameters show "PARAMETER_NOT_FOUND"
+
+This happens when you use a parameter that doesn't exist. Verify:
+- Parameter names are spelled correctly
+- Parameters are wrapped in curly braces: `{ID}` not `ID`
+- The parameter is available (check the parameters sidebar)
diff --git a/docs/plugins/hwp-previews/how-to/integrate-with-faust/hwp-previews-faust-integration.png b/docs/plugins/hwp-previews/how-to/integrate-with-faust/hwp-previews-faust-integration.png
new file mode 100644
index 00000000..0fcb93f4
Binary files /dev/null and b/docs/plugins/hwp-previews/how-to/integrate-with-faust/hwp-previews-faust-integration.png differ
diff --git a/docs/plugins/hwp-previews/how-to/integrate-with-faust/index.md b/docs/plugins/hwp-previews/how-to/integrate-with-faust/index.md
index 6151e961..7acd8c62 100644
--- a/docs/plugins/hwp-previews/how-to/integrate-with-faust/index.md
+++ b/docs/plugins/hwp-previews/how-to/integrate-with-faust/index.md
@@ -3,4 +3,56 @@ title: "Integrate with Faust.js"
 description: "Learn how to integrate the HWP Previews plugin with Faust.js in your headless WordPress application."
 ---
 
-@TODO
+## Overview
+
+This guide shows you how to use HWP Previews with Faust.js. The integration happens automatically when both plugins are installed.
+
+## Prerequisites
+
+- [Faust.js](https://wordpress.org/plugins/faustwp/) plugin installed and activated
+
+## 1. Install HWP Previews
+
+1. Install and activate the HWP Previews plugin
+2. Navigate to **Settings > HWP Previews**
+
+HWP Previews automatically detects Faust.js and configures itself to work with Faust's preview system.
+
+### Automatic setup
+
+When HWP Previews detects Faust.js, it:
+
+1. Enables previews for all public post types
+2. Sets the preview URL template to match Faust's expected format:
+   ```
+   {FAUST_FRONTEND_URI}/preview?p={ID}&preview=true&previewPathname=p{ID}&typeName={type}
+   ```
+3. Removes Faust.js's native preview link filter to prevent conflicts
+4. Disables Faust's redirect functionality for preview URLs
+5. Shows an admin notice on the settings page confirming the integration
+
+The `{FAUST_FRONTEND_URI}` is automatically pulled from your Faust.js settings. If not configured, it defaults to `http://localhost:3000`.
+
+### Authentication
+HWP Previews handles preview URL generation, but authentication remains the responsibility of your Faust front-end application. Continue using [Faust.js authentication](https://faustjs.org/docs/how-to/authentication/) to access draft content in previews.
+
+## 2. Verify the integration
+
+1. Go to **Settings > HWP Previews**
+2. Check any post type tab (Posts, Pages, etc.)
+3. Verify that:
+   - "Enable HWP Previews" is checked
+   - The Preview URL Template contains your Faust front-end URL
+
+![HWP Previews settings page showing automatic Faust.js integration with enabled previews and configured preview URL template](hwp-previews-faust-integration.png)
+
+## 3. Test previews
+
+1. Open any post in the WordPress editor
+2. Click the "Preview" button
+3. You should be redirected to your Faust front-end preview endpoint
+
+The preview URL will look like:
+```
+https://your-faust-site.com/preview?p=42&preview=true&previewPathname=p42&typeName=post
+```
diff --git a/docs/plugins/hwp-previews/index.md b/docs/plugins/hwp-previews/index.md
index 791bac6d..5ea0d1fb 100644
--- a/docs/plugins/hwp-previews/index.md
+++ b/docs/plugins/hwp-previews/index.md
@@ -3,4 +3,150 @@ title: "HWP Previews"
 description: "HWP Previews plugin enables seamless preview functionality for headless WordPress applications, allowing content creators to preview their changes in the frontend application before publishing."
 ---
 
-@TODO
+## Introduction
+
+**HWP Previews** is a headless preview solution for WordPress that provides fully configurable preview URLs via a settings interface.
+
+This plugin bridges the preview gap in headless WordPress architectures, allowing content creators to preview their changes in the front-end application before publishing.
+
+## Table of Contents
+
+* [Key Features](#key-features)
+* [Setup](#setup)
+* [Project Structure](#project-structure)
+* [Configuration](#configuration)
+* [Front-End Integration](#front-end-integration)
+* [Using With Faust.js](#using-with-faustjs)
+* [Documentation](#documentation)
+* [Contributing](#contributing)
+
+## Key Features
+
+### Framework Agnostic
+
+The plugin works with any front-end framework (Next.js, Nuxt, React, Vue, etc.) and data-fetching method (WPGraphQL, REST API, or custom endpoints).
+
+### Per Post Type Configuration
+
+Configure preview behavior independently for each public post type:
+
+* Enable or disable previews
+* Define custom URL templates with dynamic parameters
+* Choose between iframe or new tab preview modes
+* Allow draft posts as parents for hierarchical types
+
+### Dynamic URL Templates
+
+Use placeholder tokens to build context-rich preview URLs:
+
+* `{ID}` - Post ID
+* `{author_ID}` - Post author's user ID
+* `{status}` - Post status (draft, pending, etc.)
+* `{slug}` - Post slug
+* `{parent_ID}` - Parent post ID (for hierarchical types)
+* `{type}` - Post type slug
+* `{template}` - Template filename
+
+### Extensible Architecture
+
+Extend the plugin through WordPress hooks and filters to add custom parameters, modify settings, or integrate with other plugins.
+
+### Faust.js Integration
+
+Automatic integration with Faust.js that pre-configures preview URLs and removes conflicts while maintaining existing workflows.
+
+***
+
+## Setup
+
+Once the plugin is installed and activated, you can configure it under Settings > HWP Previews.
+
+By default, no post types are configured unless you have Faust.js installed, which triggers automatic configuration.
+
+### Quick Start
+
+| Step | Action | Description |
+| ---- | ------ | ----------- |
+| 1 | Navigate to Settings | Go to **Settings > HWP Previews** in WordPress admin |
+| 2 | Choose a post type | Click the tab for the post type (Posts, Pages, etc.) |
+| 3 | Enable previews | Check "Enable HWP Previews" |
+| 4 | Set preview URL | Enter your front-end preview endpoint with parameters |
+| 5 | Save and test | Save changes and click Preview on any post |
+
+### Basic Configuration
+
+For each public post type, you can configure:
+
+* **Enable HWP Previews**: Master switch to enable preview functionality for the post type
+* **Preview URL Template**: The URL template with dynamic parameters that redirects to your front-end
+* **Load Previews in Iframe**: Display preview within the WordPress editor or open in a new tab
+* **Allow All Statuses as Parent**: (Hierarchical types only) Allow draft/pending posts as parents
+
+![Basic Configuration](how-to/configure-previews/hwp-previews-post-settings.png)
+
+> [!NOTE]  
+> Settings are cached for performance. Changes may require clearing your object cache.
+
+## Project Structure
+
+```text
+hwp-previews/
+├── src/                        # Main plugin source code
+│   ├── Admin/                  # Admin settings, menu, and settings page logic
+│   │   └── Settings/           # Settings fields and form manager
+│   ├── Hooks/                  # WordPress hooks and filters
+│   ├── Integration/            # Framework integrations (Faust.js)
+│   ├── Preview/                # Preview URL resolver, parameters, and services
+│   ├── Plugin.php              # Main plugin class (entry point)
+│   └── Autoloader.php          # PSR-4 autoloader
+├── examples/                   # Example front-end integrations
+│   ├── hwp-preview-wpgraphql/  # Next.js + WPGraphQL example
+│   └── hwp-preview-rest/       # Next.js + REST API example
+├── tests/                      # Test suites
+│   ├── wpunit/                 # WPBrowser/Codeception unit tests
+└─  └── e2e/                    # End-to-end tests
+```
+
+***
+
+## Front-End Integration
+
+HWP Previews is framework and API agnostic. You can integrate it with any front-end application and data-fetching method (WPGraphQL, REST API, or custom endpoints).
+
+### Example Implementations
+
+We provide working examples in the `examples/` directory:
+
+* **[hwp-preview-wpgraphql](https://github.com/wpengine/hwptoolkit/tree/main/plugins/hwp-previews/examples/hwp-preview-wpgraphql)**: Next.js with WPGraphQL using Draft Mode
+* **[hwp-preview-rest](https://github.com/wpengine/hwptoolkit/tree/main/plugins/hwp-previews/examples/hwp-preview-rest)**: Next.js App Router with REST API
+
+### Framework-Specific Preview Guides
+
+To implement previews from scratch, refer to your framework's documentation:
+
+* [Next.js Draft Mode (Pages Router)](https://nextjs.org/docs/pages/guides/draft-mode)
+* [Next.js Draft Mode (App Router)](https://nextjs.org/docs/app/guides/draft-mode)
+* [Nuxt usePreviewMode](https://nuxt.com/docs/api/composables/use-preview-mode)
+
+## Using With Faust.js
+
+HWP Previews automatically integrates with [Faust.js](https://faustjs.org/) when both plugins are active. See the [Integrate with Faust.js](how-to/integrate-with-faust/index.md) guide for details.
+
+## Documentation
+
+### How-to guides
+
+* [Configure Previews](how-to/configure-previews/index.md)
+* [Integrate with Faust.js](how-to/integrate-with-faust/index.md)
+
+### Tutorials
+* [Build Previews with Next.js and WPGraphQL](tutorial/previews-with-wpgraphql/index.md)
+* [Build Previews with Next.js and REST API](tutorial/previews-with-rest/index.md)
+
+### Explanation
+
+* [Core Concepts](explanation/core-concepts/index.md)
+
+## Contributing
+
+If you feel like something is missing or you want to add documentation, we encourage you to contribute! Please check out our [Contributing Guide](https://github.com/wpengine/hwptoolkit/blob/main/CONTRIBUTING.md) for more details.
diff --git a/docs/plugins/hwp-previews/tutorial/astro/index.md b/docs/plugins/hwp-previews/tutorial/astro/index.md
deleted file mode 100644
index 1fd5648e..00000000
--- a/docs/plugins/hwp-previews/tutorial/astro/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: "HWP Previews Astro Tutorial"
-description: "Learn how to implement preview functionality using the HWP Previews plugin with Astro in your headless WordPress application."
----
-
-@TODO
diff --git a/docs/plugins/hwp-previews/tutorial/learn-previews/index.md b/docs/plugins/hwp-previews/tutorial/learn-previews/index.md
deleted file mode 100644
index 2e6edb48..00000000
--- a/docs/plugins/hwp-previews/tutorial/learn-previews/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: "Learn HWP Previews"
-description: "Learn how to implement preview functionality using the HWP Previews plugin in your headless WordPress application."
----
-
-@TODO
diff --git a/docs/plugins/hwp-previews/tutorial/previews-with-rest/index.md b/docs/plugins/hwp-previews/tutorial/previews-with-rest/index.md
new file mode 100644
index 00000000..d080b931
--- /dev/null
+++ b/docs/plugins/hwp-previews/tutorial/previews-with-rest/index.md
@@ -0,0 +1,300 @@
+---
+title: "Build Previews with Next.js and REST API"
+description: "Learn how to build a Next.js application with WordPress preview functionality using the REST API and Application Passwords."
+---
+
+## Overview
+
+In this tutorial, we will build a Next.js application that displays WordPress content and enables preview functionality for draft posts. By the end, you will have a working headless WordPress setup where clicking "Preview" in WordPress opens your draft content in Next.js.
+
+We will use Next.js Pages Router, WordPress REST API for data fetching, and WordPress Application Passwords for authentication.
+
+> [!NOTE]
+> This tutorial uses the REST API. If you prefer WPGraphQL, see [Build Previews with Next.js and WPGraphQL](../previews-with-wpgraphql/index.md).
+
+## What you'll build
+
+By following this tutorial, you will create:
+
+* A Next.js application that fetches WordPress content via REST API
+* An API route that enables Next.js Draft Mode for previews
+* Preview functionality that shows draft content when you click "Preview" in WordPress
+* Authentication using WordPress Application Passwords
+
+## Prerequisites
+
+Before starting, make sure you have:
+
+* Node.js 18 or higher installed
+* A WordPress site with HWP Previews plugin installed
+* Basic familiarity with Next.js and React
+
+## Step 1: Create the Next.js application
+
+First, we will create a new Next.js project.
+
+Open your terminal and run:
+
+```bash
+npx create-next-app@latest my-wordpress-preview-rest
+```
+
+When prompted, select:
+* TypeScript: No
+* ESLint: Yes
+* Tailwind CSS: Yes (optional)
+* App Router: No (we'll use Pages Router)
+
+Navigate into your project:
+
+```bash
+cd my-wordpress-preview-rest
+```
+
+You should now see a basic Next.js project structure with a `pages` directory.
+
+## Step 2: Create environment variables
+
+Create a `.env.local` file in your project root:
+
+```bash
+NEXT_PUBLIC_WORDPRESS_URL=http://your-wordpress-site.com
+
+WP_USERNAME=admin           # WordPress username which you created Application Password for
+WP_APP_PASSWORD=****        # WordPress Application Password
+WP_PREVIEW_SECRET=****      # Any strong secret string
+```
+
+Use your actual WordPress URL and username here. We will cover the Application Password and the secret in a later step.
+
+## Step 3: Create the authentication utility
+
+We need a way to send WordPress credentials with our preview requests.
+
+Create `src/utils/getAuthString.js`:
+
+```javascript
+export function getAuthString() {
+  const username = process.env.WP_USERNAME;
+  const password = process.env.WP_APP_PASSWORD;
+
+  if (!username || !password) {
+    return null;
+  }
+
+  return "Basic " + Buffer.from(`${username}:${password}`).toString("base64");
+}
+```
+
+This function creates a Base64-encoded authentication string from your WordPress credentials. You will use this when fetching preview content.
+
+## Step 4: Create the fetch utility
+
+We will create a helper function to fetch data from WordPress REST API.
+
+Create `src/lib/fetchWP.js`:
+
+```javascript
+export async function fetchWP(endpoint, authString = null) {
+  const WP_URL = process.env.NEXT_PUBLIC_WORDPRESS_URL;
+  const url = `${WP_URL}/wp-json/wp/v2/${endpoint}`;
+
+  const headers = {
+    "Content-Type": "application/json",
+  };
+
+  if (authString) {
+    headers.Authorization = authString;
+  }
+
+  const res = await fetch(url, { headers });
+
+  if (!res.ok) {
+    return null;
+  }
+
+  return res.json();
+}
+```
+
+This function fetches from WordPress REST API and optionally includes an authorization header for draft content.
+
+## Step 5: Create the preview API route
+
+Now we will create the API route that enables Draft Mode when WordPress redirects to your preview.
+
+Create `src/pages/api/preview.js`:
+
+```javascript
+import { fetchWP } from "@/lib/fetchWP";
+import { getAuthString } from "@/utils/getAuthString";
+
+export default async function handler(req, res) {
+  const { secret, id } = req.query;
+
+  if (!id) {
+    return res.status(400).json({ message: "No ID provided." });
+  }
+
+  // Verify the secret token matches our environment variable for security
+  if (secret !== process.env.WP_PREVIEW_SECRET) {
+    return res.status(401).json({ message: "Invalid secret token." });
+  }
+
+  // Query WordPress to verify the content exists and we can access it
+  const post = await fetchWP(`posts/${id}`, getAuthString());
+
+  if (!post) {
+    return res.status(404).json({ message: "Content not found." });
+  }
+
+  // Enable Next.js Draft Mode for this session
+  res.setDraftMode({ enable: true });
+  // Redirect to the content page using the database ID
+  res.redirect("/" + post.id);
+}
+```
+
+This route does three important things:
+
+1. Checks if the secret token matches (security)
+2. Verifies the content exists using REST API
+3. Enables Draft Mode and redirects to the content
+
+## Step 6: Create the content display page
+
+We will create a dynamic page that displays both published and preview content.
+
+Create `src/pages/[identifier].js`:
+
+```javascript
+import { fetchWP } from "@/lib/fetchWP";
+import { getAuthString } from "@/utils/getAuthString";
+
+// This page handles both published content and preview content
+export default function Content({ post }) {
+  if (!post) {
+    return <div>Content not found</div>;
+  }
+
+  return (
+    <article>
+      <h1 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
+      <div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
+    </article>
+  );
+}
+
+export async function getStaticProps({ params, draftMode }) {
+  // Use different endpoints based on whether we're in draft mode
+  // For previews, fetch by ID; for published posts, fetch by slug
+  const endpoint = draftMode
+    ? `posts/${params.identifier}`
+    : `posts?slug=${params.identifier}`;
+
+  // Only send auth header for preview requests
+  const authString = draftMode ? getAuthString() : null;
+
+  const data = await fetchWP(endpoint, authString);
+
+  // Extract post from the appropriate format
+  const post = draftMode ? data : data?.[0];
+
+  if (!post) {
+    return {
+      notFound: true,
+    };
+  }
+
+  return {
+    props: { post },
+    revalidate: 60,
+  };
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: "blocking",
+  };
+}
+```
+
+Notice how this page handles both preview mode (using post ID) and normal mode (using slug). When Draft Mode is enabled, it sends authentication headers.
+
+## Step 7: Generate a WordPress Application Password
+
+Now we need to create an Application Password in WordPress for authentication.
+
+1. Log into your WordPress admin
+2. Go to Users > Profile
+3. Scroll down to "Application Passwords"
+4. Enter a name like "Next.js Preview"
+5. Click "Add Application Password"
+
+![WordPress Application Passwords section showing the form to generate a new application password with a name field and "Add Application Password" button](../screenshots/generate-application-password.png)
+
+Copy the generated password (it will look like `xxxx xxxx xxxx xxxx xxxx xxxx`). You will not be able to see it again.
+
+Update your `.env.local` file with this password:
+
+```bash
+WP_APP_PASSWORD=xxxx xxxx xxxx xxxx xxxx xxxx
+```
+
+## Step 8: Configure HWP Previews in WordPress
+
+We will now configure the preview URL in WordPress to point to your Next.js app.
+
+1. In WordPress admin, go to Settings > HWP Previews
+2. Click the "Posts" tab
+3. Check "Enable HWP Previews"
+4. In the Preview URL Template field, enter:
+   ```
+   http://localhost:3000/api/preview?id={ID}&secret=YOUR_SECRET_TOKEN
+   ```
+5. Replace `YOUR_SECRET_TOKEN` with a random string
+6. Click "Save Changes"
+
+![WordPress HWP Previews settings page showing the Posts tab with "Enable HWP Previews" checkbox checked and a Preview URL Template field containing the localhost preview URL](../screenshots/configure-hwp-previews.png)
+
+Update your `.env.local` file with the same secret token:
+
+```bash
+WP_PREVIEW_SECRET=YOUR_SECRET_TOKEN
+```
+
+## Step 9: Start your application
+
+Start the Next.js development server:
+
+```bash
+npm run dev
+```
+
+You should see output indicating the server is running at `http://localhost:3000`.
+
+## Step 10: Test the preview
+
+Now we will test that previews work correctly.
+
+1. In WordPress, create or edit a post
+2. Make some changes but do not publish
+3. Click the "Preview" button
+
+You should be redirected to your Next.js application showing your draft content. Notice the URL includes your post ID.
+
+![Screenshot showing a Next.js application displaying WordPress draft content in preview mode, with the post title and content visible on the page](../screenshots/preview-view.png)
+
+If you see your draft content, congratulations! Your preview system is working.
+
+## Next steps
+
+Now that you have a working preview system, you can:
+
+* Add support for Pages and custom post types
+* Implement a "Disable Preview" button
+* Add loading states and error handling
+* Deploy your application to production
+
+For an advanced implementation using App Router and JWT authentication, see the [complete example](https://github.com/wpengine/hwptoolkit/tree/main/plugins/hwp-previews/examples/hwp-preview-rest) which includes these additional features.
diff --git a/docs/plugins/hwp-previews/tutorial/previews-with-wpgraphql/index.md b/docs/plugins/hwp-previews/tutorial/previews-with-wpgraphql/index.md
new file mode 100644
index 00000000..0783bfee
--- /dev/null
+++ b/docs/plugins/hwp-previews/tutorial/previews-with-wpgraphql/index.md
@@ -0,0 +1,345 @@
+---
+title: "Build Previews with Next.js and WPGraphQL"
+description: "Learn how to build a Next.js application with WordPress preview functionality using WPGraphQL and the HWP Previews plugin."
+---
+
+## Overview
+
+In this tutorial, we will build a Next.js application that displays WordPress content and enables preview functionality for draft posts. By the end, you will have a working headless WordPress setup where clicking "Preview" in WordPress opens your draft content in Next.js.
+
+We will use Next.js Draft Mode, WPGraphQL for data fetching, and WordPress Application Passwords for authentication.
+
+> [!NOTE]
+> This tutorial uses WPGraphQL. If you prefer the REST API, see [Build Previews with Next.js and REST API](../previews-with-rest/index.md).
+
+> [!TIP]
+> You can see the completed project in the [hwp-preview-wpgraphql example](https://github.com/wpengine/hwptoolkit/tree/main/plugins/hwp-previews/examples/hwp-preview-wpgraphql).
+
+## What you'll build
+
+By following this tutorial, you will create:
+
+* A Next.js application that fetches WordPress content via GraphQL
+* An API route that enables Next.js Draft Mode for previews
+* Preview functionality that shows draft content when you click "Preview" in WordPress
+* Authentication using WordPress Application Passwords
+
+## Prerequisites
+
+Before starting, make sure you have:
+
+* Node.js 18 or higher installed
+* A WordPress site with HWP Previews and WPGraphQL plugins installed
+* Basic familiarity with Next.js and React
+
+## Step 1: Create the Next.js application
+
+First, we will create a new Next.js project.
+
+Open your terminal and run:
+
+```bash
+npx create-next-app@latest my-wordpress-preview
+```
+
+When prompted, select:
+* TypeScript: No
+* ESLint: Yes
+* Tailwind CSS: Yes (optional)
+* App Router: No (we'll use Pages Router)
+
+Navigate into your project:
+
+```bash
+cd my-wordpress-preview
+```
+
+You should now see a basic Next.js project structure with a `pages` directory.
+
+## Step 2: Install Apollo Client
+
+We will use Apollo Client to fetch data from WordPress via GraphQL.
+
+Install the required packages:
+
+```bash
+npm install @apollo/client graphql
+```
+
+Notice that your `package.json` now includes these new dependencies.
+
+## Step 3: Set up Apollo Client
+
+Now we will create an Apollo Client instance to connect to WordPress.
+
+Create a new file `src/lib/client.js`:
+
+```javascript
+import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
+
+const WORDPRESS_URL = process.env.NEXT_PUBLIC_WORDPRESS_URL;
+
+export const client = new ApolloClient({
+  link: new HttpLink({
+    uri: WORDPRESS_URL + "/graphql",
+  }),
+  ssrMode: typeof window === "undefined",
+  cache: new InMemoryCache(),
+});
+```
+
+This creates a client that points to your WordPress GraphQL endpoint. Notice how we use an environment variable for the WordPress URL.
+
+## Step 4: Create environment variables
+
+Create a `.env.local` file in your project root:
+
+```bash
+NEXT_PUBLIC_WORDPRESS_URL=http://your-wordpress-site.com
+
+WP_USERNAME=admin           # WordPress username which you created Application Password for
+WP_APP_PASSWORD=****        # WordPress Application Password
+WP_PREVIEW_SECRET=****      # Any strong secret string
+```
+
+Use your actual WordPress URL and username here. We will cover the Application Password and the secret in a later step.
+
+## Step 5: Create the authentication utility
+
+We need a way to send WordPress credentials with our preview requests.
+
+Create `src/utils/getAuthString.js`:
+
+```javascript
+export function getAuthString() {
+  const username = process.env.WP_USERNAME;
+  const password = process.env.WP_APP_PASSWORD;
+
+  if (!username || !password) {
+    return null;
+  }
+
+  return "Basic " + Buffer.from(`${username}:${password}`).toString("base64");
+}
+```
+
+This function creates a Base64-encoded authentication string from your WordPress credentials. You will use this when fetching preview content.
+
+## Step 6: Create the preview API route
+
+Now we will create the API route that enables Draft Mode when WordPress redirects to your preview.
+
+Create `src/pages/api/preview.js`:
+
+```javascript
+import { client } from "@/lib/client";
+import { getAuthString } from "@/utils/getAuthString";
+import { gql } from "@apollo/client";
+
+// GraphQL query to verify the content exists and get its database ID
+const GET_CONTENT = gql`
+  query GetNode($id: ID!) {
+    contentNode(id: $id, idType: DATABASE_ID, asPreview: true) {
+      databaseId
+    }
+  }
+`;
+
+export default async function handler(req, res) {
+  const { secret, id } = req.query;
+
+  if (!id) {
+    return res.status(400).json({ message: "No ID provided." });
+  }
+
+  // Verify the secret token matches our environment variable for security
+  if (secret !== process.env.WP_PREVIEW_SECRET) {
+    return res.status(401).json({ message: "Invalid secret token." });
+  }
+
+  // Query WordPress to verify the content exists and we can access it
+  const { data } = await client.query({
+    query: GET_CONTENT,
+    variables: { id },
+    context: {
+      headers: {
+        Authorization: getAuthString(),
+      },
+    },
+  });
+
+  if (!data?.contentNode) {
+    return res.status(404).json({ message: "Content not found." });
+  }
+
+  // Enable Next.js Draft Mode for this session
+  res.setDraftMode({ enable: true });
+  // Redirect to the content page using the database ID
+  res.redirect("/" + data.contentNode.databaseId);
+}
+```
+
+This route does three important things:
+
+1. Checks if the secret token matches (security)
+2. Verifies the content exists using GraphQL
+3. Enables Draft Mode and redirects to the content
+
+## Step 7: Create the content display page
+
+We will create a dynamic page that displays both published and preview content.
+
+Create `src/pages/[identifier].js`:
+
+```javascript
+import { client } from "@/lib/client";
+import { getAuthString } from "@/utils/getAuthString";
+import { gql } from "@apollo/client";
+
+// This query handles both published content and preview content
+// It uses GraphQL directives to conditionally fetch from different fields
+const GET_CONTENT = gql`
+  query GetSeedNode($id: ID! = 0, $uri: String! = "", $asPreview: Boolean = false) {
+    nodeByUri(uri: $uri) @skip(if: $asPreview) {
+      __typename
+      ... on Post {
+        title
+        content
+        date
+      }
+    }
+
+    contentNode(id: $id, idType: DATABASE_ID, asPreview: true) @include(if: $asPreview) {
+      __typename
+      ... on Post {
+        title
+        content
+        date
+      }
+    }
+  }
+`;
+
+export default function Content({ data }) {
+  if (!data) {
+    return <div>Content not found</div>;
+  }
+
+  return (
+    <article>
+      <h1>{data.title}</h1>
+      <div dangerouslySetInnerHTML={{ __html: data.content }} />
+    </article>
+  );
+}
+
+export async function getStaticProps({ params, draftMode }) {
+  // Use different variables based on whether we're in draft mode
+  const variables = draftMode
+    ? { id: params.identifier, asPreview: true }
+    : { uri: params.identifier };
+
+  // Only send auth headers for preview requests
+  const headers = draftMode ? { Authorization: getAuthString() } : null;
+
+  const { data } = await client.query({
+    query: GET_CONTENT,
+    variables,
+    context: { headers },
+  });
+
+  // Extract content from the appropriate field
+  const content = draftMode ? data?.contentNode : data?.nodeByUri;
+
+  return {
+    props: { data: content },
+    revalidate: 60,
+  };
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: [],
+    fallback: "blocking",
+  };
+}
+```
+
+Notice how this page handles both preview mode (using `contentNode`) and normal mode (using `nodeByUri`). When Draft Mode is enabled, it sends authentication headers.
+
+## Step 8: Generate a WordPress Application Password
+
+Now we need to create an Application Password in WordPress for authentication.
+
+1. Log into your WordPress admin
+2. Go to Users > Profile
+3. Scroll down to "Application Passwords"
+4. Enter a name like "Next.js Preview"
+5. Click "Add Application Password"
+
+![WordPress Application Passwords section showing the form to generate a new application password with a name field and "Add Application Password" button](../screenshots/generate-application-password.png)
+
+Copy the generated password (it will look like `xxxx xxxx xxxx xxxx xxxx xxxx`). You will not be able to see it again.
+
+Update your `.env.local` file with this password:
+
+```bash
+WP_APP_PASSWORD=xxxx xxxx xxxx xxxx xxxx xxxx
+```
+
+## Step 9: Configure HWP Previews in WordPress
+
+We will now configure the preview URL in WordPress to point to your Next.js app.
+
+1. In WordPress admin, go to Settings > HWP Previews
+2. Click the "Posts" tab
+3. Check "Enable HWP Previews"
+4. In the Preview URL Template field, enter:
+   ```
+   http://localhost:3000/api/preview?id={ID}&secret=YOUR_SECRET_TOKEN
+   ```
+5. Replace `YOUR_SECRET_TOKEN` with a random string
+6. Click "Save Changes"
+
+![WordPress HWP Previews settings page showing the Posts tab with "Enable HWP Previews" checkbox checked and a Preview URL Template field containing the localhost preview URL](../screenshots/configure-hwp-previews.png)
+
+Update your `.env.local` file with the same secret token:
+
+```bash
+WP_PREVIEW_SECRET=YOUR_SECRET_TOKEN
+```
+
+## Step 10: Start your application
+
+Start the Next.js development server:
+
+```bash
+npm run dev
+```
+
+You should see output indicating the server is running at `http://localhost:3000`.
+
+## Step 11: Test the preview
+
+Now we will test that previews work correctly.
+
+1. In WordPress, create or edit a post
+2. Make some changes but do not publish
+3. Click the "Preview" button
+
+You should be redirected to your Next.js application showing your draft content. Notice the URL includes your post ID.
+
+![Screenshot showing a Next.js application displaying WordPress draft content in preview mode, with the post title and content visible on the page](../screenshots/preview-view.png)
+
+If you see your draft content, congratulations! Your preview system is working.
+
+## Next steps
+
+Now that you have a working preview system, you can:
+
+* Add support for Pages and custom post types
+* Implement a "Disable Preview" button
+* Add loading states and error handling
+* Deploy your application to production
+
+For more details about extending this setup, see the [complete example](https://github.com/wpengine/hwptoolkit/tree/main/plugins/hwp-previews/examples/hwp-preview-wpgraphql) which includes these additional features.
diff --git a/docs/plugins/hwp-previews/tutorial/rest/index.md b/docs/plugins/hwp-previews/tutorial/rest/index.md
deleted file mode 100644
index 70e9e46c..00000000
--- a/docs/plugins/hwp-previews/tutorial/rest/index.md
+++ /dev/null
@@ -1,6 +0,0 @@
----
-title: "HWP Previews REST API Tutorial"
-description: "Learn how to implement preview functionality using the HWP Previews plugin with REST API endpoints in your headless WordPress application."
----
-
-@TODO
diff --git a/docs/plugins/hwp-previews/tutorial/screenshots/configure-hwp-previews.png b/docs/plugins/hwp-previews/tutorial/screenshots/configure-hwp-previews.png
new file mode 100644
index 00000000..cb10d327
Binary files /dev/null and b/docs/plugins/hwp-previews/tutorial/screenshots/configure-hwp-previews.png differ
diff --git a/docs/plugins/hwp-previews/tutorial/screenshots/generate-application-password.png b/docs/plugins/hwp-previews/tutorial/screenshots/generate-application-password.png
new file mode 100644
index 00000000..74a55953
Binary files /dev/null and b/docs/plugins/hwp-previews/tutorial/screenshots/generate-application-password.png differ
diff --git a/docs/plugins/hwp-previews/tutorial/screenshots/preview-view.png b/docs/plugins/hwp-previews/tutorial/screenshots/preview-view.png
new file mode 100644
index 00000000..d70ba166
Binary files /dev/null and b/docs/plugins/hwp-previews/tutorial/screenshots/preview-view.png differ
diff --git a/plugins/hwp-previews/README.md b/plugins/hwp-previews/README.md
index f992feff..c70113e5 100644
--- a/plugins/hwp-previews/README.md
+++ b/plugins/hwp-previews/README.md
@@ -42,12 +42,10 @@ HWP Previews is a robust and extensible WordPress plugin that centralizes all pr
 It empowers site administrators and developers to tailor preview behaviors for each public post type independently, facilitating seamless headless or decoupled workflows.
 With HWP Previews, you can define dynamic URL templates, allow posts of all statuses to be used as parents, and extend functionality through flexible hooks and filters, ensuring a consistent and conflict-free preview experience across diverse environments.
 
+## Motivation
+In traditional WordPress, previewing content is straightforward: clicking the "Preview" button shows you a draft version of your post on the same WordPress site. However, in headless WordPress architectures, where the front-end is decoupled from WordPress, this simple mechanism breaks down. The front-end application lives on a different domain, knows nothing about WordPress authentication, and cannot automatically access unpublished content.
 
-
->[!IMPORTANT]
-> For Faust users, HWP Previews integrates seamlessly, automatically configuring settings to match Faust's preview system. This allows you to maintain your existing preview workflow without additional setup.
-
----
+This fundamental architectural shift creates what we call the "preview problem" in headless WordPress. HWP Previews was created to bridge this gap, providing a centralized, framework-agnostic solution to preview management.
 
 ## Features
 
@@ -58,6 +56,9 @@ With HWP Previews, you can define dynamic URL templates, allow posts of all stat
 - **Faust Compatibility**: The plugin is compatible with [Faust.js](https://faustjs.org/) and the [FaustWP plugin](https://github.com/wpengine/faustjs/tree/canary/plugins/faustwp).
 
 
+>[!IMPORTANT]
+> For Faust users, HWP Previews integrates seamlessly, automatically configuring settings to match Faust's preview system. This allows you to maintain your existing preview workflow without additional setup.
+
 ## Getting Started
 
 This guide will help you set up your first headless preview link for the "Posts" post type.