diff --git a/web_src/src/components/CreateCanvasModal/index.tsx b/web_src/src/components/CreateCanvasModal/index.tsx
index 8a625950db..8ea8145298 100644
--- a/web_src/src/components/CreateCanvasModal/index.tsx
+++ b/web_src/src/components/CreateCanvasModal/index.tsx
@@ -1,16 +1,28 @@
-import { useEffect, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { Upload } from "lucide-react";
 import { showErrorToast } from "../../utils/toast";
+import { parseCanvasYaml, readFileAsText, type ParsedCanvas } from "../../utils/parseCanvasYaml";
+import type { ComponentsNode, ComponentsEdge } from "@/api-client";
 import { Dialog, DialogActions, DialogBody, DialogDescription, DialogTitle } from "../Dialog/dialog";
 import { Field, Label } from "../Fieldset/fieldset";
 import { Icon } from "../Icon";
 import { Input } from "../Input/input";
 import { Textarea } from "../ui/textarea";
 import { Button } from "../ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+
+export interface CreateCanvasSubmitData {
+  name: string;
+  description?: string;
+  templateId?: string;
+  nodes?: ComponentsNode[];
+  edges?: ComponentsEdge[];
+}
 
 interface CreateCanvasModalProps {
   isOpen: boolean;
   onClose: () => void;
-  onSubmit: (data: { name: string; description?: string; templateId?: string }) => Promise<void>;
+  onSubmit: (data: CreateCanvasSubmitData) => Promise<void>;
   isLoading?: boolean;
   initialData?: { name: string; description?: string };
   templates?: { id: string; name: string; description?: string }[];
@@ -37,11 +49,21 @@ export function CreateCanvasModal({
   const [nameError, setNameError] = useState("");
   const [templateId, setTemplateId] = useState("");
 
+  const [activeTab, setActiveTab] = useState<string>("manual");
+  const [yamlText, setYamlText] = useState("");
+  const [yamlError, setYamlError] = useState("");
+  const [importedSpec, setImportedSpec] = useState<{ nodes: ComponentsNode[]; edges: ComponentsEdge[] } | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
   useEffect(() => {
     if (isOpen) {
       setName(initialData?.name ?? "");
       setDescription(initialData?.description ?? "");
       setNameError("");
+      setActiveTab("manual");
+      setYamlText("");
+      setYamlError("");
+      setImportedSpec(null);
     }
     if (isOpen && mode === "create") {
       setTemplateId(defaultTemplateId || "");
@@ -56,9 +78,62 @@ export function CreateCanvasModal({
     setDescription("");
     setNameError("");
     setTemplateId("");
+    setYamlText("");
+    setYamlError("");
+    setImportedSpec(null);
     onClose();
   };
 
+  const applyParsedYaml = useCallback((parsed: ParsedCanvas) => {
+    setName(parsed.name.slice(0, MAX_CANVAS_NAME_LENGTH));
+    setDescription((parsed.description ?? "").slice(0, MAX_CANVAS_DESCRIPTION_LENGTH));
+    setImportedSpec({ nodes: parsed.nodes, edges: parsed.edges });
+    setYamlError("");
+    setNameError("");
+  }, []);
+
+  const handleYamlParse = useCallback(() => {
+    if (!yamlText.trim()) {
+      setYamlError("Paste or upload a YAML file first.");
+      setImportedSpec(null);
+      return;
+    }
+
+    try {
+      const parsed = parseCanvasYaml(yamlText);
+      applyParsedYaml(parsed);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setYamlError(message);
+      setImportedSpec(null);
+    }
+  }, [yamlText, applyParsedYaml]);
+
+  const handleFileUpload = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) return;
+
+      try {
+        const text = await readFileAsText(file);
+        setYamlText(text);
+
+        const parsed = parseCanvasYaml(text);
+        applyParsedYaml(parsed);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        setYamlError(message);
+        setImportedSpec(null);
+      }
+
+      // Reset file input so re-uploading the same file triggers onChange
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    [applyParsedYaml],
+  );
+
   const handleSubmit = async () => {
     setNameError("");
 
@@ -77,6 +152,8 @@ export function CreateCanvasModal({
         name: name.trim(),
         description: description.trim() || undefined,
         templateId: templateId || undefined,
+        nodes: importedSpec?.nodes,
+        edges: importedSpec?.edges,
       });
 
       // Reset form and close modal
@@ -84,6 +161,9 @@ export function CreateCanvasModal({
       setDescription("");
       setNameError("");
       setTemplateId("");
+      setYamlText("");
+      setYamlError("");
+      setImportedSpec(null);
       onClose();
     } catch (error) {
       const errorMessage = (error as Error)?.message || error?.toString() || "Failed to create canvas";
@@ -96,6 +176,8 @@ export function CreateCanvasModal({
     }
   };
 
+  const showYamlTab = mode === "create" && !fromTemplate;
+
   return (
     <Dialog open={isOpen} onClose={handleClose} size="lg" className="text-left relative">
       <DialogTitle>
@@ -106,66 +188,113 @@ export function CreateCanvasModal({
           ? "Create a canvas from this template. Give it a name and optional description to get started."
           : mode === "edit"
             ? "Update the canvas details to keep things clear for your teammates."
-            : "Create a new canvas to orchestrate your DevOps work. You can tweak the details any time."}
+            : "Create a new canvas or import one from a YAML file."}
       </DialogDescription>
       <button onClick={handleClose} className="absolute top-4 right-4">
         <Icon name="close" size="sm" />
       </button>
 
       <DialogBody>
-        <div className="space-y-6">
-          <Field>
-            <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Canvas name *</Label>
-            <Input
-              data-testid="canvas-name-input"
-              type="text"
-              autoComplete="off"
-              value={name}
-              onChange={(e) => {
-                if (e.target.value.length <= MAX_CANVAS_DESCRIPTION_LENGTH) {
-                  setName(e.target.value);
-                }
-                if (nameError) {
-                  setNameError("");
-                }
-              }}
-              placeholder=""
-              className={`w-full ${nameError ? "border-red-500" : ""}`}
-              autoFocus
-              maxLength={MAX_CANVAS_NAME_LENGTH}
-            />
-            <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-              {name.length}/{MAX_CANVAS_NAME_LENGTH} characters
-            </div>
-            {nameError && <div className="text-xs text-red-600 mt-1">{nameError}</div>}
-          </Field>
-
-          <Field>
-            <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</Label>
-            <Textarea
-              value={description}
-              onChange={(e) => {
-                if (e.target.value.length <= MAX_CANVAS_DESCRIPTION_LENGTH) {
-                  setDescription(e.target.value);
-                }
-              }}
-              placeholder="Describe what is does (optional)"
-              rows={3}
-              className="w-full"
-              maxLength={MAX_CANVAS_DESCRIPTION_LENGTH}
-            />
-            <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-              {description.length}/{MAX_CANVAS_DESCRIPTION_LENGTH} characters
-            </div>
-          </Field>
-        </div>
+        {showYamlTab ? (
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList className="mb-4">
+              <TabsTrigger value="manual">Create manually</TabsTrigger>
+              <TabsTrigger value="yaml">Import from YAML</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="manual">
+              <CanvasFormFields
+                name={name}
+                description={description}
+                nameError={nameError}
+                onNameChange={setName}
+                onDescriptionChange={setDescription}
+                onNameErrorChange={setNameError}
+              />
+            </TabsContent>
+
+            <TabsContent value="yaml">
+              <div className="space-y-4">
+                <div>
+                  <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                    YAML content
+                  </Label>
+                  <Textarea
+                    data-testid="yaml-import-textarea"
+                    value={yamlText}
+                    onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                      setYamlText(e.target.value);
+                      if (yamlError) setYamlError("");
+                    }}
+                    placeholder={`metadata:\n  name: My Canvas\n  description: Optional description\nspec:\n  nodes: []\n  edges: []`}
+                    rows={10}
+                    className="w-full font-mono text-sm"
+                  />
+                  {yamlError && <div className="text-xs text-red-600 mt-1">{yamlError}</div>}
+                  {importedSpec && (
+                    <div className="text-xs text-green-700 mt-1">
+                      Parsed successfully: {importedSpec.nodes.length} node(s), {importedSpec.edges.length} edge(s).
+                    </div>
+                  )}
+                </div>
+
+                <div className="flex items-center gap-3">
+                  <Button type="button" variant="outline" size="sm" onClick={handleYamlParse}>
+                    Parse YAML
+                  </Button>
+                  <input
+                    ref={fileInputRef}
+                    type="file"
+                    accept=".yaml,.yml"
+                    onChange={handleFileUpload}
+                    className="hidden"
+                    data-testid="yaml-file-input"
+                  />
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={() => fileInputRef.current?.click()}
+                    className="flex items-center gap-1.5"
+                  >
+                    <Upload className="h-3.5 w-3.5" />
+                    Upload file
+                  </Button>
+                </div>
+
+                {importedSpec && (
+                  <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
+                    <CanvasFormFields
+                      name={name}
+                      description={description}
+                      nameError={nameError}
+                      onNameChange={setName}
+                      onDescriptionChange={setDescription}
+                      onNameErrorChange={setNameError}
+                    />
+                  </div>
+                )}
+              </div>
+            </TabsContent>
+          </Tabs>
+        ) : (
+          <CanvasFormFields
+            name={name}
+            description={description}
+            nameError={nameError}
+            onNameChange={setName}
+            onDescriptionChange={setDescription}
+            onNameErrorChange={setNameError}
+          />
+        )}
       </DialogBody>
 
       <DialogActions>
         <Button
           onClick={handleSubmit}
-          disabled={!name.trim() || isLoading || !!nameError}
+          disabled={!name.trim() || isLoading || !!nameError || (activeTab === "yaml" && !importedSpec)}
           className="flex items-center gap-2"
+          data-testid="create-canvas-submit"
         >
           {mode === "edit"
             ? isLoading
@@ -183,3 +312,68 @@ export function CreateCanvasModal({
     </Dialog>
   );
 }
+
+function CanvasFormFields({
+  name,
+  description,
+  nameError,
+  onNameChange,
+  onDescriptionChange,
+  onNameErrorChange,
+}: {
+  name: string;
+  description: string;
+  nameError: string;
+  onNameChange: (value: string) => void;
+  onDescriptionChange: (value: string) => void;
+  onNameErrorChange: (value: string) => void;
+}) {
+  return (
+    <div className="space-y-6">
+      <Field>
+        <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Canvas name *</Label>
+        <Input
+          data-testid="canvas-name-input"
+          type="text"
+          autoComplete="off"
+          value={name}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            if (e.target.value.length <= MAX_CANVAS_NAME_LENGTH) {
+              onNameChange(e.target.value);
+            }
+            if (nameError) {
+              onNameErrorChange("");
+            }
+          }}
+          placeholder=""
+          className={`w-full ${nameError ? "border-red-500" : ""}`}
+          autoFocus
+          maxLength={MAX_CANVAS_NAME_LENGTH}
+        />
+        <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+          {name.length}/{MAX_CANVAS_NAME_LENGTH} characters
+        </div>
+        {nameError && <div className="text-xs text-red-600 mt-1">{nameError}</div>}
+      </Field>
+
+      <Field>
+        <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</Label>
+        <Textarea
+          value={description}
+          onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+            if (e.target.value.length <= MAX_CANVAS_DESCRIPTION_LENGTH) {
+              onDescriptionChange(e.target.value);
+            }
+          }}
+          placeholder="Describe what it does (optional)"
+          rows={3}
+          className="w-full"
+          maxLength={MAX_CANVAS_DESCRIPTION_LENGTH}
+        />
+        <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+          {description.length}/{MAX_CANVAS_DESCRIPTION_LENGTH} characters
+        </div>
+      </Field>
+    </div>
+  );
+}
diff --git a/web_src/src/pages/canvas/CreateCanvasPage.tsx b/web_src/src/pages/canvas/CreateCanvasPage.tsx
index 42ca2ba5cc..5fb384b933 100644
--- a/web_src/src/pages/canvas/CreateCanvasPage.tsx
+++ b/web_src/src/pages/canvas/CreateCanvasPage.tsx
@@ -1,15 +1,18 @@
 import { OrganizationMenuButton } from "@/components/OrganizationMenuButton";
 import { usePageTitle } from "@/hooks/usePageTitle";
-import { useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useNavigate, useParams } from "react-router-dom";
+import { Upload } from "lucide-react";
 import { Field, Label } from "../../components/Fieldset/fieldset";
 import { Heading } from "../../components/Heading/heading";
 import { Input } from "../../components/Input/input";
 import { Text } from "../../components/Text/text";
 import { Textarea } from "../../components/ui/textarea";
 import { Button } from "../../components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../../components/ui/tabs";
 import { useCreateCanvas, useCanvasTemplates } from "../../hooks/useCanvasData";
 import { showErrorToast } from "../../utils/toast";
+import { parseCanvasYaml, readFileAsText, type ParsedCanvas } from "../../utils/parseCanvasYaml";
 import type { ComponentsEdge, ComponentsNode } from "@/api-client";
 import { Rainbow } from "lucide-react";
 
@@ -24,10 +27,66 @@ export function CreateCanvasPage() {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [nameError, setNameError] = useState("");
+  const [activeTab, setActiveTab] = useState<string>("manual");
+
+  // YAML import state
+  const [yamlText, setYamlText] = useState("");
+  const [yamlError, setYamlError] = useState("");
+  const [importedSpec, setImportedSpec] = useState<{ nodes: ComponentsNode[]; edges: ComponentsEdge[] } | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
 
   const createMutation = useCreateCanvas(organizationId || "");
   const { data: workflowTemplates = [] } = useCanvasTemplates(organizationId || "");
 
+  const applyParsedYaml = useCallback((parsed: ParsedCanvas) => {
+    setName(parsed.name.slice(0, MAX_CANVAS_NAME_LENGTH));
+    setDescription((parsed.description ?? "").slice(0, MAX_CANVAS_DESCRIPTION_LENGTH));
+    setImportedSpec({ nodes: parsed.nodes, edges: parsed.edges });
+    setYamlError("");
+    setNameError("");
+  }, []);
+
+  const handleYamlParse = useCallback(() => {
+    if (!yamlText.trim()) {
+      setYamlError("Paste or upload a YAML file first.");
+      setImportedSpec(null);
+      return;
+    }
+
+    try {
+      const parsed = parseCanvasYaml(yamlText);
+      applyParsedYaml(parsed);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : String(err);
+      setYamlError(message);
+      setImportedSpec(null);
+    }
+  }, [yamlText, applyParsedYaml]);
+
+  const handleFileUpload = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) return;
+
+      try {
+        const text = await readFileAsText(file);
+        setYamlText(text);
+
+        const parsed = parseCanvasYaml(text);
+        applyParsedYaml(parsed);
+      } catch (err) {
+        const message = err instanceof Error ? err.message : String(err);
+        setYamlError(message);
+        setImportedSpec(null);
+      }
+
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    },
+    [applyParsedYaml],
+  );
+
   const handleSubmit = async () => {
     setNameError("");
 
@@ -50,6 +109,8 @@ export function CreateCanvasPage() {
       const result = await createMutation.mutateAsync({
         name: name.trim(),
         description: description.trim() || undefined,
+        nodes: importedSpec?.nodes,
+        edges: importedSpec?.edges,
       });
 
       if (result?.data?.canvas?.metadata?.id) {
@@ -70,6 +131,9 @@ export function CreateCanvasPage() {
     navigate(`/${organizationId}`);
   };
 
+  const isSubmitDisabled =
+    !name.trim() || createMutation.isPending || !!nameError || (activeTab === "yaml" && !importedSpec);
+
   return (
     <div className="min-h-screen flex flex-col bg-slate-100 dark:bg-gray-900">
       <header className="bg-white border-b border-slate-950/15 px-4 h-12 flex items-center">
@@ -83,68 +147,193 @@ export function CreateCanvasPage() {
                 Create New Canvas
               </Heading>
               <Text className="text-gray-800 dark:text-gray-400">
-                Create a new canvas to orchestrate your DevOps work.
+                Create a new canvas or import one from a YAML file.
               </Text>
             </div>
 
-            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-800 p-6 space-y-6">
-              <Field>
-                <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Canvas name *</Label>
-                <Input
-                  data-testid="canvas-name-input"
-                  type="text"
-                  autoComplete="off"
-                  value={name}
-                  onChange={(e) => {
-                    if (e.target.value.length <= MAX_CANVAS_NAME_LENGTH) {
-                      setName(e.target.value);
-                    }
-                    if (nameError) {
-                      setNameError("");
-                    }
-                  }}
-                  placeholder=""
-                  className={`w-full ${nameError ? "border-red-500" : ""}`}
-                  autoFocus
-                  maxLength={MAX_CANVAS_NAME_LENGTH}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" && !e.shiftKey) {
-                      e.preventDefault();
-                      handleSubmit();
-                    }
-                  }}
-                />
-                <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                  {name.length}/{MAX_CANVAS_NAME_LENGTH} characters
-                </div>
-                {nameError && <div className="text-xs text-red-600 mt-1">{nameError}</div>}
-              </Field>
-
-              <Field>
-                <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Description</Label>
-                <Textarea
-                  value={description}
-                  onChange={(e) => {
-                    if (e.target.value.length <= MAX_CANVAS_DESCRIPTION_LENGTH) {
-                      setDescription(e.target.value);
-                    }
-                  }}
-                  placeholder="Describe what it does (optional)"
-                  rows={3}
-                  className="w-full"
-                  maxLength={MAX_CANVAS_DESCRIPTION_LENGTH}
-                />
-                <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                  {description.length}/{MAX_CANVAS_DESCRIPTION_LENGTH} characters
-                </div>
-              </Field>
-
-              <div className="flex justify-start gap-3">
-                <Button
-                  onClick={handleSubmit}
-                  disabled={!name.trim() || createMutation.isPending || !!nameError}
-                  data-testid="create-canvas-button"
-                >
+            <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-300 dark:border-gray-800 p-6">
+              <Tabs
+                value={activeTab}
+                onValueChange={(value: string) => {
+                  setActiveTab(value);
+                  // Reset import state when switching back to manual
+                  if (value === "manual") {
+                    setYamlText("");
+                    setYamlError("");
+                    setImportedSpec(null);
+                  }
+                }}
+              >
+                <TabsList className="mb-6">
+                  <TabsTrigger value="manual">Create manually</TabsTrigger>
+                  <TabsTrigger value="yaml">Import from YAML</TabsTrigger>
+                </TabsList>
+
+                <TabsContent value="manual">
+                  <div className="space-y-6">
+                    <Field>
+                      <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Canvas name *
+                      </Label>
+                      <Input
+                        data-testid="canvas-name-input"
+                        type="text"
+                        autoComplete="off"
+                        value={name}
+                        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                          if (e.target.value.length <= MAX_CANVAS_NAME_LENGTH) {
+                            setName(e.target.value);
+                          }
+                          if (nameError) {
+                            setNameError("");
+                          }
+                        }}
+                        placeholder=""
+                        className={`w-full ${nameError ? "border-red-500" : ""}`}
+                        autoFocus
+                        maxLength={MAX_CANVAS_NAME_LENGTH}
+                        onKeyDown={(e: React.KeyboardEvent<HTMLInputElement>) => {
+                          if (e.key === "Enter" && !e.shiftKey) {
+                            e.preventDefault();
+                            handleSubmit();
+                          }
+                        }}
+                      />
+                      <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        {name.length}/{MAX_CANVAS_NAME_LENGTH} characters
+                      </div>
+                      {nameError && <div className="text-xs text-red-600 mt-1">{nameError}</div>}
+                    </Field>
+
+                    <Field>
+                      <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Description
+                      </Label>
+                      <Textarea
+                        value={description}
+                        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                          if (e.target.value.length <= MAX_CANVAS_DESCRIPTION_LENGTH) {
+                            setDescription(e.target.value);
+                          }
+                        }}
+                        placeholder="Describe what it does (optional)"
+                        rows={3}
+                        className="w-full"
+                        maxLength={MAX_CANVAS_DESCRIPTION_LENGTH}
+                      />
+                      <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                        {description.length}/{MAX_CANVAS_DESCRIPTION_LENGTH} characters
+                      </div>
+                    </Field>
+                  </div>
+                </TabsContent>
+
+                <TabsContent value="yaml">
+                  <div className="space-y-4">
+                    <div>
+                      <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        YAML content
+                      </Label>
+                      <Textarea
+                        data-testid="yaml-import-textarea"
+                        value={yamlText}
+                        onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                          setYamlText(e.target.value);
+                          if (yamlError) setYamlError("");
+                        }}
+                        placeholder={`metadata:\n  name: My Canvas\n  description: Optional description\nspec:\n  nodes: []\n  edges: []`}
+                        rows={10}
+                        className="w-full font-mono text-sm"
+                      />
+                      {yamlError && <div className="text-xs text-red-600 mt-1">{yamlError}</div>}
+                      {importedSpec && (
+                        <div className="text-xs text-green-700 mt-1">
+                          Parsed successfully: {importedSpec.nodes.length} node(s), {importedSpec.edges.length} edge(s).
+                        </div>
+                      )}
+                    </div>
+
+                    <div className="flex items-center gap-3">
+                      <Button type="button" variant="outline" size="sm" onClick={handleYamlParse}>
+                        Parse YAML
+                      </Button>
+                      <input
+                        ref={fileInputRef}
+                        type="file"
+                        accept=".yaml,.yml"
+                        onChange={handleFileUpload}
+                        className="hidden"
+                        data-testid="yaml-file-input"
+                      />
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => fileInputRef.current?.click()}
+                        className="flex items-center gap-1.5"
+                      >
+                        <Upload className="h-3.5 w-3.5" />
+                        Upload file
+                      </Button>
+                    </div>
+
+                    {importedSpec && (
+                      <div className="border-t border-gray-200 dark:border-gray-700 pt-4 space-y-6">
+                        <Field>
+                          <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            Canvas name *
+                          </Label>
+                          <Input
+                            data-testid="canvas-name-input-yaml"
+                            type="text"
+                            autoComplete="off"
+                            value={name}
+                            onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                              if (e.target.value.length <= MAX_CANVAS_NAME_LENGTH) {
+                                setName(e.target.value);
+                              }
+                              if (nameError) {
+                                setNameError("");
+                              }
+                            }}
+                            placeholder=""
+                            className={`w-full ${nameError ? "border-red-500" : ""}`}
+                            maxLength={MAX_CANVAS_NAME_LENGTH}
+                          />
+                          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                            {name.length}/{MAX_CANVAS_NAME_LENGTH} characters
+                          </div>
+                          {nameError && <div className="text-xs text-red-600 mt-1">{nameError}</div>}
+                        </Field>
+
+                        <Field>
+                          <Label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                            Description
+                          </Label>
+                          <Textarea
+                            value={description}
+                            onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => {
+                              if (e.target.value.length <= MAX_CANVAS_DESCRIPTION_LENGTH) {
+                                setDescription(e.target.value);
+                              }
+                            }}
+                            placeholder="Describe what it does (optional)"
+                            rows={3}
+                            className="w-full"
+                            maxLength={MAX_CANVAS_DESCRIPTION_LENGTH}
+                          />
+                          <div className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                            {description.length}/{MAX_CANVAS_DESCRIPTION_LENGTH} characters
+                          </div>
+                        </Field>
+                      </div>
+                    )}
+                  </div>
+                </TabsContent>
+              </Tabs>
+
+              <div className="flex justify-start gap-3 mt-6">
+                <Button onClick={handleSubmit} disabled={isSubmitDisabled} data-testid="create-canvas-button">
                   {createMutation.isPending ? "Creating Canvas..." : "Create Canvas"}
                 </Button>
                 <Button variant="outline" onClick={handleCancel}>
diff --git a/web_src/src/pages/home/useCreateCanvasModalState.tsx b/web_src/src/pages/home/useCreateCanvasModalState.tsx
index 918c69fff2..f3b0d58fa0 100644
--- a/web_src/src/pages/home/useCreateCanvasModalState.tsx
+++ b/web_src/src/pages/home/useCreateCanvasModalState.tsx
@@ -36,7 +36,13 @@ export function useCreateCanvasModalState() {
   const updateMutation = useUpdateCanvas(organizationId || "", modalState?.workflow?.id || "");
   const { data: workflowTemplates = [] } = useCanvasTemplates(organizationId || "");
 
-  const onSubmit = async (data: { name: string; description?: string; templateId?: string }) => {
+  const onSubmit = async (data: {
+    name: string;
+    description?: string;
+    templateId?: string;
+    nodes?: ComponentsNode[];
+    edges?: ComponentsEdge[];
+  }) => {
     if (!organizationId) {
       return;
     }
@@ -52,12 +58,20 @@ export function useCreateCanvasModalState() {
       return;
     }
 
-    const selectedTemplate = workflowTemplates.find((template) => template.metadata?.id === data.templateId);
+    let nodes = data.nodes;
+    let edges = data.edges;
+
+    if (!nodes && !edges && data.templateId) {
+      const selectedTemplate = workflowTemplates.find((template) => template.metadata?.id === data.templateId);
+      nodes = selectedTemplate?.spec?.nodes;
+      edges = selectedTemplate?.spec?.edges;
+    }
+
     const result = await createMutation.mutateAsync({
       name: data.name,
       description: data.description,
-      nodes: selectedTemplate?.spec?.nodes,
-      edges: selectedTemplate?.spec?.edges,
+      nodes,
+      edges,
     });
 
     if (result?.data?.canvas?.metadata?.id) {
diff --git a/web_src/src/utils/parseCanvasYaml.ts b/web_src/src/utils/parseCanvasYaml.ts
new file mode 100644
index 0000000000..a3caddabe4
--- /dev/null
+++ b/web_src/src/utils/parseCanvasYaml.ts
@@ -0,0 +1,89 @@
+import * as yaml from "js-yaml";
+import type { ComponentsNode, ComponentsEdge } from "@/api-client";
+
+export interface ParsedCanvas {
+  name: string;
+  description?: string;
+  nodes: ComponentsNode[];
+  edges: ComponentsEdge[];
+}
+
+/*
+   Parses a YAML string into a Canvas definition.
+  
+   Accepts two shapes:
+    - UI export format:  { metadata, spec }
+    - CLI resource format: { apiVersion, kind: "Canvas", metadata, spec }
+  
+   Returns a ParsedCanvas on success, or throws an Error with a user-friendly message.
+ */
+export function parseCanvasYaml(text: string): ParsedCanvas {
+  if (!text.trim()) {
+    throw new Error("YAML content is empty.");
+  }
+
+  let parsed: unknown;
+  try {
+    parsed = yaml.load(text);
+  } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    throw new Error(`Invalid YAML syntax: ${message}`);
+  }
+
+  if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed)) {
+    throw new Error("YAML must be an object with 'metadata' and optionally 'spec'.");
+  }
+
+  const doc = parsed as Record<string, unknown>;
+
+  if ("kind" in doc) {
+    if (doc.kind !== "Canvas") {
+      throw new Error(`Unsupported resource kind "${doc.kind}". Expected "Canvas".`);
+    }
+  }
+
+  if (!doc.metadata || typeof doc.metadata !== "object" || Array.isArray(doc.metadata)) {
+    throw new Error("Missing or invalid 'metadata' section. It must include at least a 'name' field.");
+  }
+
+  const metadata = doc.metadata as Record<string, unknown>;
+
+  const name = typeof metadata.name === "string" ? metadata.name.trim() : "";
+  if (!name) {
+    throw new Error("'metadata.name' is required and must be a non-empty string.");
+  }
+
+  const description = typeof metadata.description === "string" ? metadata.description.trim() : undefined;
+
+  let nodes: ComponentsNode[] = [];
+  let edges: ComponentsEdge[] = [];
+
+  if (doc.spec && typeof doc.spec === "object" && !Array.isArray(doc.spec)) {
+    const spec = doc.spec as Record<string, unknown>;
+
+    if (spec.nodes !== undefined) {
+      if (!Array.isArray(spec.nodes)) {
+        throw new Error("'spec.nodes' must be an array.");
+      }
+      nodes = spec.nodes as ComponentsNode[];
+    }
+
+    if (spec.edges !== undefined) {
+      if (!Array.isArray(spec.edges)) {
+        throw new Error("'spec.edges' must be an array.");
+      }
+      edges = spec.edges as ComponentsEdge[];
+    }
+  }
+
+  return { name, description, nodes, edges };
+}
+
+export function readFileAsText(file: File): Promise<string> {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = () => reject(new Error("Failed to read the file."));
+    reader.readAsText(file);
+  });
+}