diff --git a/src/components/CanvasCreator.astro b/src/components/CanvasCreator.astro
index 9495726..91f184b 100644
--- a/src/components/CanvasCreator.astro
+++ b/src/components/CanvasCreator.astro
@@ -1,4 +1,6 @@
---
+import initCanvasCreator from '../scripts/init-canvascreator.js?url';
+
interface Props {
canvasId: string;
}
@@ -7,7 +9,9 @@ const { canvasId } = Astro.props as Props;
---
-
+
diff --git a/src/content/docs/resources/api-business-model-canvas.mdx b/src/content/docs/resources/api-business-model-canvas.mdx
new file mode 100644
index 0000000..5af7262
--- /dev/null
+++ b/src/content/docs/resources/api-business-model-canvas.mdx
@@ -0,0 +1,46 @@
+---
+title: API Business Model Canvas
+slug: resources/api-business-model-canvas
+sidebar:
+ order: 3
+icon: dashboard-outline
+category: canvas
+canvasId: apiBusinessModelCanvas
+image: /assets/resource/Canvas_apiBusinessModelCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Strategically assess API business viability by mapping value propositions, consumer segments, and key resources.
+
+## Outcomes
+
+- Clear business strategy for APIs
+
+## How it works
+
+
+
+[SVG](../../../assets/resource/Canvas_apiBusinessModelCanvas.svg) | [PNG](../../../assets/resource/Canvas_apiBusinessModelCanvas.png) | [JSON](../../../assets/resource/Canvas_apiBusinessModelCanvas.json)
+
+### Steps
+
+1. Summarize the API's value proposition
+2. Define consumer segments
+3. Identify developer relations strategies
+4. Map distribution channels
+5. document key resources and activities
+6. Identify key partners and stakeholders
+7. Highlight benefits and costs
+
+
+
+
+
+
diff --git a/src/content/docs/resources/api-value-proposition-canvas.mdx b/src/content/docs/resources/api-value-proposition-canvas.mdx
new file mode 100644
index 0000000..1be6bb8
--- /dev/null
+++ b/src/content/docs/resources/api-value-proposition-canvas.mdx
@@ -0,0 +1,43 @@
+---
+title: API Value Proposition Canvas
+slug: resources/api-value-proposition-canvas
+sidebar:
+ order: 2
+icon: dashboard-outline
+category: canvas
+canvasId: apiValuePropositionCanvas
+image: /assets/resource/Canvas_apiValuePropositionCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Align API features with user needs by mapping tasks, pains, and gains to API products.
+
+## Outcomes
+
+- Focused feature development
+
+## How it works
+
+
+
+[SVG](../../../assets/resource/Canvas_apiValuePropositionCanvas.svg) | [PNG](../../../assets/resource/Canvas_apiValuePropositionCanvas.png) | [JSON](../../../assets/resource/Canvas_apiValuePropositionCanvas.json)
+
+### Steps
+
+1. List user journey tasks
+2. Identify features delivering expected gains
+3. Define features addressing challenges
+4. Map features to API products
+
+
+
+
+
+
diff --git a/src/content/docs/resources/business-impact-canvas.mdx b/src/content/docs/resources/business-impact-canvas.mdx
new file mode 100644
index 0000000..56b082b
--- /dev/null
+++ b/src/content/docs/resources/business-impact-canvas.mdx
@@ -0,0 +1,45 @@
+---
+title: Business Impact Canvas
+slug: resources/business-impact-canvas
+sidebar:
+ order: 4
+icon: dashboard-outline
+category: canvas
+canvasId: businessImpactCanvas
+image: /assets/resource/Canvas_businessImpactCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Design a scalable and secure API platform architecture that meets business and technical requirements.
+
+## Outcomes
+
+- Scalable API infrastructure
+
+## How it works
+
+
+
+[SVG](../../../assets/resource/Canvas_businessImpactCanvas.svg) | [PNG](../../../assets/resource/Canvas_businessImpactCanvas.png) | [JSON](../../../assets/resource/Canvas_businessImpactCanvas.json)
+
+### Steps
+
+1. Availability Risks: Identify risks and impacts.
+2. Ways to Mitigate Availability Risks: Define mitigation measures.
+3. Security Risks: Document security-related risks.
+4. Ways to Mitigate Security Risks: Propose strategies to mitigate security risks.
+5. Data Risks: Identify risks to data accuracy or availability.
+6. Ways to Mitigate Data Risks: Plan strategies to address data risks.
+
+
+
+
+
+
diff --git a/src/content/docs/resources/capacity-canvas.mdx b/src/content/docs/resources/capacity-canvas.mdx
new file mode 100644
index 0000000..34b3129
--- /dev/null
+++ b/src/content/docs/resources/capacity-canvas.mdx
@@ -0,0 +1,44 @@
+---
+title: Capacity Canvas
+slug: resources/capacity-canvas
+sidebar:
+ order: 7
+icon: dashboard-outline
+category: canvas
+canvasId: capacityCanvas
+image: /assets/resource/Canvas_capacityCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Plan API capacity to meet current and future business demands, ensuring scalability and performance.
+
+## Outcomes
+
+- Aligned API capacity with business volumes
+
+## How it works
+
+
+
+[SVG](../../../assets/resource/Canvas_capacityCanvas.svg) | [PNG](../../../assets/resource/Canvas_capacityCanvas.png) | [JSON](../../../assets/resource/Canvas_capacityCanvas.json)
+
+### Steps
+
+1. Document current business volumes
+2. Forecast future consumption trends
+3. Plan for peak load and availability requirements
+4. Define caching and rate-limiting strategies
+5. Propose scaling strategies
+
+
+
+
+
+
diff --git a/src/content/docs/resources/customer-journey-canvas.mdx b/src/content/docs/resources/customer-journey-canvas.mdx
new file mode 100644
index 0000000..0a1bff2
--- /dev/null
+++ b/src/content/docs/resources/customer-journey-canvas.mdx
@@ -0,0 +1,46 @@
+---
+title: Customer Journey Canvas
+slug: resources/customer-journey-canvas
+sidebar:
+ order: 1
+icon: dashboard-outline
+category: canvas
+canvasId: customerJourneyCanvas
+image: /assets/resource/Canvas_customerJourneyCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Map customer journeys to identify needs and pain points, enhancing API design and user experience.
+
+## Outcomes
+
+- Improved customer understanding
+
+## How it works
+
+
+
+[SVG](../../../assets/resource/Canvas_customerJourneyCanvas.svg) | [PNG](../../../assets/resource/Canvas_customerJourneyCanvas.png) | [JSON](../../../assets/resource/Canvas_customerJourneyCanvas.json)
+
+### Steps
+
+1. Define customer persona
+2. Identify triggers for the journey
+3. Describe the journey's end
+4. Map journey steps with inputs/outputs
+5. Identify customer pains
+6. Summarize customer gains
+7. Define necessary inputs and resulting outputs
+8. Define API interactions for each step
+
+
+
+
+
+
diff --git a/src/content/docs/resources/domain-canvas.mdx b/src/content/docs/resources/domain-canvas.mdx
new file mode 100644
index 0000000..f247b80
--- /dev/null
+++ b/src/content/docs/resources/domain-canvas.mdx
@@ -0,0 +1,39 @@
+---
+title: Domain Canvas
+slug: resources/domain-canvas
+sidebar:
+ order: 152
+icon: dashboard-outline
+category: canvas
+canvasId: domainCanvas
+image: /assets/resource/Canvas_domainCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+A modeling tool to define and communicate the key entities and relationships in your domain, ensuring semantic consistency across APIs.
+
+## Outcomes
+
+- Better understanding of domain canvas principles
+
+## How it works
+
+
+
+[SVG](../../../assets/resource/Canvas_domainCanvas.svg) | [PNG](../../../assets/resource/Canvas_domainCanvas.png) | [JSON](../../../assets/resource/Canvas_domainCanvas.json)
+
+### Steps
+
+1. Define core entities, their attributes, and relationships to create a shared conceptual understanding across APIs.
+
+
+
+
+
+
diff --git a/src/content/docs/resources/event-canvas.mdx b/src/content/docs/resources/event-canvas.mdx
new file mode 100644
index 0000000..c3517c0
--- /dev/null
+++ b/src/content/docs/resources/event-canvas.mdx
@@ -0,0 +1,43 @@
+---
+title: Event Canvas
+slug: resources/event-canvas
+sidebar:
+ order: 12
+icon: dashboard-outline
+category: canvas
+canvasId: eventCanvas
+image: /assets/resource/Canvas_eventCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Design event-driven APIs by defining events, triggers, and processing logic.
+
+## Outcomes
+
+- Defined event-driven architecture
+
+## How it works
+
+
+
+[SVG](../../../assets/resource/Canvas_eventCanvas.svg) | [PNG](../../../assets/resource/Canvas_eventCanvas.png) | [JSON](../../../assets/resource/Canvas_eventCanvas.json)
+
+### Steps
+
+1. Identify key events in the system
+2. Define triggers for each event
+3. Describe backend processing logic for events
+4. Specify resulting outputs or acknowledgments
+
+
+
+
+
+
diff --git a/src/content/docs/resources/graphql-canvas.mdx b/src/content/docs/resources/graphql-canvas.mdx
new file mode 100644
index 0000000..3165c5f
--- /dev/null
+++ b/src/content/docs/resources/graphql-canvas.mdx
@@ -0,0 +1,47 @@
+---
+title: GraphQL Canvas
+slug: resources/graphql-canvas
+sidebar:
+ order: 11
+icon: dashboard-outline
+category: canvas
+canvasId: graphqlCanvas
+image: /assets/resource/Canvas_graphqlCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Design GraphQL APIs by defining types, queries, mutations, and subscriptions.
+
+## Outcomes
+
+- Structured GraphQL API design
+
+## How it works
+
+
+
+[SVG](../../../assets/resource/Canvas_graphqlCanvas.svg) | [PNG](../../../assets/resource/Canvas_graphqlCanvas.png) | [JSON](../../../assets/resource/Canvas_graphqlCanvas.json)
+
+### Steps
+
+1. What problems are API consumers trying to solve? What data do they need?
+2. Define GraphQL types and their attributes: What are the core types exposed (e.g., User, Order, Product)?
+3. Map relationships between types: How do types relate to each other in nested queries?
+4. Specify queries for data retrieval
+5. Define mutations for data modification: What operations will modify data (e.g., create, update, delete)?
+6. Outline subscriptions for real-time updates
+7. Define authentication and authorization: Who can access which fields or types?
+8. Consider if there are any pagination, filtering, or rate-limiting constraints
+
+
+
+
+
+
diff --git a/src/content/docs/resources/interaction-canvas.mdx b/src/content/docs/resources/interaction-canvas.mdx
new file mode 100644
index 0000000..13bfb86
--- /dev/null
+++ b/src/content/docs/resources/interaction-canvas.mdx
@@ -0,0 +1,44 @@
+---
+title: Interaction Canvas
+slug: resources/interaction-canvas
+sidebar:
+ order: 9
+icon: dashboard-outline
+category: canvas
+canvasId: interactionCanvas
+image: /assets/resource/Canvas_interactionCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Define API interactions, workflows, and expected responses to ensure a consistent API consumer experience.
+
+## Outcomes
+
+- Clear API interaction workflows
+
+## How it works
+
+
+
+[SVG](../../../assets/resource/Canvas_interactionCanvas.svg) | [PNG](../../../assets/resource/Canvas_interactionCanvas.png) | [JSON](../../../assets/resource/Canvas_interactionCanvas.json)
+
+### Steps
+
+1. Map API interactions to user tasks
+2. Define endpoints for each interaction
+3. document inputs and outputs for each interaction
+4. Specify validation rules and constraints
+5. Create interaction models for CRUD, query-driven, command-driven, and event-driven interactions
+
+
+
+
+
+
diff --git a/src/content/docs/resources/locations-canvas.mdx b/src/content/docs/resources/locations-canvas.mdx
new file mode 100644
index 0000000..3ca4842
--- /dev/null
+++ b/src/content/docs/resources/locations-canvas.mdx
@@ -0,0 +1,20 @@
+---
+title: Locations Canvas
+description: Plan where data, services, and workloads live across environments.
+canvasId: locationsCanvas
+---
+
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+export const canvasId = 'locationsCanvas';
+
+Use the Locations Canvas to document data residency, deployment targets, and latency considerations. It keeps platform and product teams aligned on where critical components will run.
+
+{canvasId ? (
+
+) : (
+
+ Open the canvas in Canvas Creator at{' '}
+ canvascreator.apiopscycles.com.
+
+)}
diff --git a/src/content/docs/resources/rest-canvas.mdx b/src/content/docs/resources/rest-canvas.mdx
new file mode 100644
index 0000000..fd5bd3f
--- /dev/null
+++ b/src/content/docs/resources/rest-canvas.mdx
@@ -0,0 +1,43 @@
+---
+title: REST Canvas
+slug: resources/rest-canvas
+sidebar:
+ order: 10
+icon: dashboard-outline
+category: canvas
+canvasId: restCanvas
+image: /assets/resource/Canvas_restCanvas.png
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import CanvasCreator from '../../../components/CanvasCreator.astro';
+
+Design APIs using RESTful principles, defining resources, verbs, and example requests and responses.
+
+## Outcomes
+
+- Consistent RESTful API design
+
+## How it works
+
+
+
+[SVG](../../../assets/resource/Canvas_restCanvas.svg) | [PNG](../../../assets/resource/Canvas_restCanvas.png) | [JSON](../../../assets/resource/Canvas_restCanvas.json)
+
+### Steps
+
+1. Identify key resources exposed by the API
+2. Define the structure of the API resource model
+3. Specify HTTP verbs used to interact with resources
+4. Provide example requests and responses for each verb
+
+
+
+
+
+
diff --git a/src/scripts/init-canvascreator.js b/src/scripts/init-canvascreator.js
new file mode 100644
index 0000000..cbd716f
--- /dev/null
+++ b/src/scripts/init-canvascreator.js
@@ -0,0 +1,10 @@
+import canvascreator from 'canvascreator';
+
+function initializeFromScriptTag(script) {
+ if (!script) return;
+ const canvasId = script.dataset.canvasId;
+ if (!canvasId) return;
+ canvascreator.initialize({ canvasId });
+}
+
+initializeFromScriptTag(document.currentScript);