diff --git a/runtime/parser/schema/project.schema.yaml b/runtime/parser/schema/project.schema.yaml
index 81c3387a7d7d..8c8b91777cc8 100644
--- a/runtime/parser/schema/project.schema.yaml
+++ b/runtime/parser/schema/project.schema.yaml
@@ -3417,11 +3417,11 @@ definitions:
                   - path
         required:
           - glob
-        examples: 
+        examples:
           - type: api
+            glob: data/*.csv
+            args:
 
-            glob: "data/*.csv"
- 
       - title: Resource Status Check
         type: object
         description: Uses the status of a resource as data.
diff --git a/web-common/src/features/apis/editor/APIEditor.svelte b/web-common/src/features/apis/editor/APIEditor.svelte
new file mode 100644
index 000000000000..b203b3226989
--- /dev/null
+++ b/web-common/src/features/apis/editor/APIEditor.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import type { EditorView } from "@codemirror/view";
+  import { setLineStatuses } from "@rilldata/web-common/components/editor/line-status";
+  import type { LineStatus } from "@rilldata/web-common/components/editor/line-status/state";
+  import { customYAMLwithJSONandSQL } from "@rilldata/web-common/components/editor/presets/yamlWithJsonAndSql";
+  import Editor from "@rilldata/web-common/features/editor/Editor.svelte";
+  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
+  import WorkspaceEditorContainer from "@rilldata/web-common/layout/workspace/WorkspaceEditorContainer.svelte";
+  import APITestPanel from "./APITestPanel.svelte";
+  import type { Arg } from "./types";
+
+  export let apiName: string;
+  export let errors: LineStatus[];
+  export let fileArtifact: FileArtifact;
+  export let autoSave: boolean;
+  export let isReconciling: boolean;
+  export let host: string;
+  export let instanceId: string;
+  export let args: Arg[];
+
+  let editor: EditorView;
+
+  $: if (editor) setLineStatuses(errors, editor);
+  $: mainError = errors?.at(0)?.message;
+  $: hasErrors = errors.length > 0;
+</script>
+
+<div class="flex flex-col h-full overflow-hidden">
+  <div class="editor-panel">
+    <WorkspaceEditorContainer error={mainError}>
+      <Editor
+        bind:autoSave
+        bind:editor
+        onSave={(content) => {
+          if (!content?.length) {
+            setLineStatuses([], editor);
+          }
+        }}
+        {fileArtifact}
+        extensions={[customYAMLwithJSONandSQL]}
+      />
+    </WorkspaceEditorContainer>
+  </div>
+
+  <APITestPanel
+    {apiName}
+    {hasErrors}
+    {isReconciling}
+    {host}
+    {instanceId}
+    bind:args
+  />
+</div>
+
+<style lang="postcss">
+  .editor-panel {
+    @apply flex-1 overflow-hidden min-h-0;
+  }
+</style>
diff --git a/web-common/src/features/apis/editor/APIResponsePreview.svelte b/web-common/src/features/apis/editor/APIResponsePreview.svelte
new file mode 100644
index 000000000000..0ad3fdc52eb6
--- /dev/null
+++ b/web-common/src/features/apis/editor/APIResponsePreview.svelte
@@ -0,0 +1,150 @@
+<script lang="ts">
+  import ReconcilingSpinner from "@rilldata/web-common/features/entity-management/ReconcilingSpinner.svelte";
+  import WorkspaceError from "@rilldata/web-common/components/WorkspaceError.svelte";
+  import PreviewTable from "@rilldata/web-common/components/preview-table/PreviewTable.svelte";
+  import IconSwitcher from "@rilldata/web-common/components/forms/IconSwitcher.svelte";
+  import type { VirtualizedTableColumns } from "@rilldata/web-common/components/virtualized-table/types";
+  import { TableIcon, BracesIcon } from "lucide-svelte";
+
+  export let response: unknown[] | null;
+  export let error: string | null;
+  export let isLoading: boolean;
+  export let apiName: string;
+
+  type ViewMode = "table" | "json";
+  let viewMode: ViewMode = "table";
+
+  const viewModeOptions = [
+    { id: "table", Icon: TableIcon, tooltip: "Table view" },
+    { id: "json", Icon: BracesIcon, tooltip: "JSON view" },
+  ];
+
+  function handleViewModeChange(id: string) {
+    if (id === "table" || id === "json") {
+      viewMode = id;
+    }
+  }
+
+  $: columns = extractColumns(response);
+
+  function extractColumns(data: unknown[] | null): VirtualizedTableColumns[] {
+    if (!data || data.length === 0) return [];
+
+    const firstRow = data[0];
+    if (typeof firstRow !== "object" || firstRow === null) {
+      return [{ name: "value", type: "VARCHAR" }];
+    }
+
+    const keys = Object.keys(firstRow);
+    const sampleSize = Math.min(data.length, 10);
+
+    return keys.map((key) => ({
+      name: key,
+      type: inferTypeFromSample(data, key, sampleSize),
+    }));
+  }
+
+  function inferTypeFromSample(
+    rows: unknown[],
+    key: string,
+    sampleSize: number,
+  ): string {
+    for (let i = 0; i < sampleSize; i++) {
+      const row = rows[i];
+      if (typeof row !== "object" || row === null) continue;
+      const value = (row as Record<string, unknown>)[key];
+      if (value !== null && value !== undefined) {
+        return inferType(value);
+      }
+    }
+    return "VARCHAR";
+  }
+
+  function inferType(value: unknown): string {
+    if (value === null || value === undefined) return "VARCHAR";
+    if (typeof value === "number") {
+      return Number.isInteger(value) ? "INTEGER" : "DOUBLE";
+    }
+    if (typeof value === "boolean") return "BOOLEAN";
+    if (typeof value === "object") return "JSON";
+    return "VARCHAR";
+  }
+
+  function normalizeRows(data: unknown[] | null): Record<string, unknown>[] {
+    if (!data) return [];
+
+    return data.map((item) => {
+      if (typeof item !== "object" || item === null) {
+        return { value: item };
+      }
+      return item as Record<string, unknown>;
+    });
+  }
+
+  $: normalizedRows = normalizeRows(response);
+</script>
+
+<div class="response-preview-wrapper">
+  <div class="response-header">
+    <span class="header-label">Response Preview</span>
+    {#if response && response.length > 0}
+      <div class="flex items-center gap-x-2">
+        <span class="text-[11px] text-fg-muted"
+          >{response.length} {response.length === 1 ? "row" : "rows"}</span
+        >
+        <IconSwitcher
+          fields={viewModeOptions}
+          selected={viewMode}
+          onClick={handleViewModeChange}
+          small
+        />
+      </div>
+    {/if}
+  </div>
+  <div class="response-content">
+    {#if isLoading}
+      <ReconcilingSpinner />
+    {:else if error}
+      <WorkspaceError message={error} />
+    {:else if !response}
+      <div class="empty-state">Click "Test API" to see the response</div>
+    {:else if response.length === 0}
+      <div class="empty-state">API returned an empty response</div>
+    {:else if viewMode === "json"}
+      <pre class="json-view">{JSON.stringify(response, null, 2)}</pre>
+    {:else}
+      <PreviewTable
+        rows={normalizedRows}
+        columnNames={columns}
+        name={apiName}
+      />
+    {/if}
+  </div>
+</div>
+
+<style lang="postcss">
+  .response-preview-wrapper {
+    @apply flex flex-col h-full;
+  }
+
+  .response-header {
+    @apply flex items-center justify-between px-3 py-2 border-b bg-surface-muted;
+  }
+
+  .header-label {
+    @apply text-xs font-medium text-fg-secondary uppercase;
+  }
+
+  .response-content {
+    @apply flex-1 overflow-auto;
+  }
+
+  .empty-state {
+    @apply flex items-center justify-center h-full text-fg-muted text-sm;
+  }
+
+  .json-view {
+    @apply p-4 text-sm font-mono whitespace-pre-wrap break-words;
+    @apply bg-surface-background text-fg-primary;
+  }
+</style>
diff --git a/web-common/src/features/apis/editor/APITestPanel.svelte b/web-common/src/features/apis/editor/APITestPanel.svelte
new file mode 100644
index 000000000000..56750d9f5dbd
--- /dev/null
+++ b/web-common/src/features/apis/editor/APITestPanel.svelte
@@ -0,0 +1,260 @@
+<script lang="ts">
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
+  import Input from "@rilldata/web-common/components/forms/Input.svelte";
+  import Trash from "@rilldata/web-common/components/icons/Trash.svelte";
+  import Resizer from "@rilldata/web-common/layout/Resizer.svelte";
+  import { copyToClipboard } from "@rilldata/web-common/lib/actions/copy-to-clipboard";
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import {
+    PlusIcon,
+    PlayIcon,
+    ChevronDownIcon,
+    ChevronRightIcon,
+    CopyIcon,
+  } from "lucide-svelte";
+  import { tick } from "svelte";
+  import APIResponsePreview from "./APIResponsePreview.svelte";
+  import type { Arg } from "./types";
+
+  export let apiName: string;
+  export let hasErrors: boolean;
+  export let isReconciling: boolean;
+  export let host: string;
+  export let instanceId: string;
+  export let args: Arg[];
+
+  let apiResponse: unknown[] | null = null;
+  let responseError: string | null = null;
+  let isLoading = false;
+  let previewHeight = 500;
+  let argsOpen = false;
+
+  // Clear response and args when switching to a different API
+  $: apiName, resetState();
+  function resetState() {
+    apiResponse = null;
+    responseError = null;
+    isLoading = false;
+    args = [];
+  }
+
+  $: baseUrl = `${host}/v1/instances/${instanceId}/api/${apiName}`;
+  $: fullUrl = buildFullUrl(baseUrl, args);
+  $: isDisabled = hasErrors || isReconciling;
+
+  function buildFullUrl(base: string, params: Arg[]): string {
+    try {
+      const url = new URL(base);
+      params.forEach((arg) => {
+        if (arg.key.trim()) {
+          url.searchParams.set(arg.key, arg.value);
+        }
+      });
+      return url.toString();
+    } catch {
+      return base;
+    }
+  }
+
+  function addArg() {
+    args = [...args, { id: crypto.randomUUID(), key: "", value: "" }];
+  }
+
+  function removeArg(id: string) {
+    args = args.filter((arg) => arg.id !== id);
+  }
+
+  function handleCopyUrl() {
+    copyToClipboard(fullUrl, "Copied endpoint URL to clipboard");
+  }
+
+  function handleArgsKeydown(e: KeyboardEvent) {
+    if (e.key !== "Tab") return;
+
+    const container = (e.target as HTMLElement)?.closest(".args-container");
+    if (!container) return;
+
+    const inputs = Array.from(
+      container.querySelectorAll<HTMLInputElement>("input"),
+    );
+    const currentIndex = inputs.indexOf(e.target as HTMLInputElement);
+    if (currentIndex === -1) return;
+
+    if (e.shiftKey) {
+      // Shift+Tab: move to previous input, or let dropdown handle if at first
+      if (currentIndex > 0) {
+        e.preventDefault();
+        inputs[currentIndex - 1].focus();
+      }
+    } else {
+      // Tab: move to next input, or add a new arg row if at the last one
+      if (currentIndex < inputs.length - 1) {
+        e.preventDefault();
+        inputs[currentIndex + 1].focus();
+      } else {
+        e.preventDefault();
+        addArg();
+        // Focus the new row's key input after Svelte updates the DOM.
+        // Each arg row contributes 2 <input> elements (key + value),
+        // so length - 2 targets the new row's key input.
+        tick().then(() => {
+          const updatedInputs = Array.from(
+            container.querySelectorAll<HTMLInputElement>("input"),
+          );
+          updatedInputs[updatedInputs.length - 2]?.focus();
+        });
+      }
+    }
+  }
+
+  async function testAPI() {
+    isLoading = true;
+    responseError = null;
+    apiResponse = null;
+
+    try {
+      const response = await fetch(fullUrl);
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        try {
+          const errorJson = JSON.parse(errorText);
+          responseError = errorJson.message || errorJson.error || errorText;
+        } catch {
+          responseError = errorText;
+        }
+        return;
+      }
+
+      const data = await response.json();
+      apiResponse = Array.isArray(data) ? data : [data];
+    } catch (e) {
+      responseError = e instanceof Error ? e.message : "Unknown error occurred";
+    } finally {
+      isLoading = false;
+    }
+  }
+</script>
+
+<div
+  class="preview-panel"
+  style:height="{previewHeight}px"
+  style:min-height="100px"
+  style:max-height="80%"
+>
+  <Resizer max={500} direction="NS" side="top" bind:dimension={previewHeight} />
+
+  <div class="flex items-center gap-x-2 px-3 py-2 border-b">
+    <span class="text-xs font-medium text-fg-primary uppercase tracking-wide"
+      >URL Preview:
+    </span>
+    <span class="text-[11px] font-mono text-fg-muted truncate flex-1 min-w-0"
+      >{fullUrl}</span
+    >
+    <div class="flex items-center gap-x-2 shrink-0">
+      <Tooltip distance={8}>
+        <Button type="text" compact small onClick={handleCopyUrl}>
+          <CopyIcon size="10px" />
+        </Button>
+        <TooltipContent slot="tooltip-content">Copy URL</TooltipContent>
+      </Tooltip>
+      <Button type="text" small compact onClick={() => (argsOpen = !argsOpen)}>
+        {#if argsOpen}
+          <ChevronDownIcon size="12px" />
+        {:else}
+          <ChevronRightIcon size="12px" />
+        {/if}
+        Args
+        {#if args.length > 0}
+          <span
+            class="inline-flex items-center justify-center w-4 h-4 text-[10px] font-medium bg-primary-100 text-primary-600 rounded-full"
+          >
+            {args.length}
+          </span>
+        {/if}
+      </Button>
+      <Button
+        type="primary"
+        small
+        onClick={testAPI}
+        disabled={isDisabled}
+        loading={isLoading}
+        loadingCopy="Testing"
+      >
+        {#if isReconciling}
+          Reconciling...
+        {:else}
+          <PlayIcon size="12px" />
+          Test API
+        {/if}
+      </Button>
+    </div>
+  </div>
+
+  {#if argsOpen}
+    <div class="border-b px-3 py-2">
+      <div class="flex items-center justify-between mb-2">
+        <span
+          class="text-[10px] font-semibold text-fg-primary uppercase tracking-wide"
+          >Query Parameters</span
+        >
+        <Button type="text" compact small onClick={addArg}>
+          <PlusIcon size="12px" />
+          Add
+        </Button>
+      </div>
+      <!-- svelte-ignore a11y-no-static-element-interactions -->
+      <div
+        class="args-container flex flex-col gap-y-2"
+        onkeydown={handleArgsKeydown}
+      >
+        {#if args.length === 0}
+          <p class="text-xs text-fg-muted py-1">
+            No query parameters. Click "Add" to create one.
+          </p>
+        {:else}
+          <div class="grid grid-cols-[1fr_1fr_28px] gap-x-2 gap-y-2">
+            <span
+              class="text-[10px] font-medium text-fg-muted uppercase tracking-wide"
+              >Key</span
+            >
+            <span
+              class="text-[10px] font-medium text-fg-muted uppercase tracking-wide"
+              >Value</span
+            >
+            <span></span>
+            {#each args as arg (arg.id)}
+              <Input bind:value={arg.key} placeholder="key" size="sm" />
+              <Input bind:value={arg.value} placeholder="value" size="sm" />
+              <Button
+                type="ghost"
+                square
+                small
+                compact
+                onClick={() => removeArg(arg.id)}
+              >
+                <Trash size="12px" />
+              </Button>
+            {/each}
+          </div>
+        {/if}
+      </div>
+    </div>
+  {/if}
+
+  <div class="flex-1 overflow-auto">
+    <APIResponsePreview
+      response={apiResponse}
+      error={responseError}
+      {isLoading}
+      {apiName}
+    />
+  </div>
+</div>
+
+<style lang="postcss">
+  .preview-panel {
+    @apply relative flex flex-col bg-surface-background border rounded-[2px] overflow-hidden;
+  }
+</style>
diff --git a/web-common/src/features/apis/editor/template-utils.ts b/web-common/src/features/apis/editor/template-utils.ts
new file mode 100644
index 000000000000..7c5336d5fc17
--- /dev/null
+++ b/web-common/src/features/apis/editor/template-utils.ts
@@ -0,0 +1,98 @@
+export interface Template {
+  label: string;
+  description: string;
+  content: string;
+}
+
+const header = `# API YAML
+# Reference documentation: https://docs.rilldata.com/reference/project-files/apis
+# Test your API endpoint at http://localhost:9009/v1/instances/default/api/<filename>
+
+`;
+
+export const templates: Template[] = [
+  {
+    label: "SQL Query",
+    description:
+      "Query a model or source using SQL. Use {{ .args.param }} to accept dynamic arguments.",
+    content: `${header}type: api
+sql: |
+  SELECT * FROM model_name
+`,
+  },
+  {
+    label: "SQL Query with Limits",
+    description:
+      "Query a model with pagination controls. Pass 'limit' and 'offset' arguments to control page size and position.",
+    content: `${header}type: api
+sql: |
+  SELECT * FROM model_name
+  LIMIT {{ .args.limit }}
+  OFFSET {{ .args.offset }}
+`,
+  },
+  {
+    label: "Metrics SQL",
+    description:
+      "Query a metrics view using Metrics SQL. Reference measures and dimensions defined in your metrics view.",
+    content: `${header}type: api
+metrics_sql: |
+  SELECT measure, dimension FROM metrics_view_name
+`,
+  },
+  {
+    label: "Metrics SQL with Args",
+    description:
+      "Query a metrics view with dynamic filtering. Pass arguments to filter results at query time.",
+    content: `${header}type: api
+metrics_sql: |
+  SELECT measure, dimension FROM metrics_view_name
+  WHERE dimension = '{{ .args.filter }}'
+`,
+  },
+  {
+    label: "Metrics SQL with Pagination",
+    description:
+      "Query a metrics view with pagination controls. Pass 'limit' and 'offset' arguments to page through results.",
+    content: `${header}type: api
+metrics_sql: |
+  SELECT measure, dimension FROM metrics_view_name
+  LIMIT {{ .args.limit }}
+  OFFSET {{ .args.offset }}
+`,
+  },
+  {
+    label: "OpenAPI",
+    description:
+      "Define an API with an OpenAPI specification. Includes request and response schemas for documentation and validation.",
+    content: `${header}type: api
+metrics_sql: |
+  SELECT measure, dimension FROM metrics_view_name
+  WHERE dimension = '{{ .args.filter }}'
+openapi:
+  summary: Describe your API endpoint
+  request_schema:
+    type: object
+    properties:
+      filter:
+        type: string
+        description: Filter by dimension value
+  response_schema:
+    type: object
+    properties:
+      measure:
+        type: number
+      dimension:
+        type: string
+`,
+  },
+  {
+    label: "Resource Status",
+    description:
+      "Return the reconciliation status of resources in the project. Useful for health-check and monitoring endpoints.",
+    content: `${header}type: api
+resource_status:
+  where_error: true
+`,
+  },
+];
diff --git a/web-common/src/features/apis/editor/types.ts b/web-common/src/features/apis/editor/types.ts
new file mode 100644
index 000000000000..2f828651d3fb
--- /dev/null
+++ b/web-common/src/features/apis/editor/types.ts
@@ -0,0 +1,5 @@
+export interface Arg {
+  id: string;
+  key: string;
+  value: string;
+}
diff --git a/web-common/src/features/metrics-views/errors.ts b/web-common/src/features/metrics-views/errors.ts
index 5beac0621443..ad45ac8424d9 100644
--- a/web-common/src/features/metrics-views/errors.ts
+++ b/web-common/src/features/metrics-views/errors.ts
@@ -79,3 +79,12 @@ export function mapParseErrorToLine(
   }
   return runtimeErrorToLine(error.message, yaml);
 }
+
+export function mapParseErrorsToLines(
+  errors: V1ParseError[],
+  yaml: string,
+): LineStatus[] {
+  return errors
+    .map((e) => mapParseErrorToLine(e, yaml))
+    .filter((s): s is LineStatus => s !== undefined);
+}
diff --git a/web-common/src/features/workspaces/APIWorkspace.svelte b/web-common/src/features/workspaces/APIWorkspace.svelte
new file mode 100644
index 000000000000..198ac50520c2
--- /dev/null
+++ b/web-common/src/features/workspaces/APIWorkspace.svelte
@@ -0,0 +1,168 @@
+<script lang="ts">
+  import { goto } from "$app/navigation";
+  import {
+    AlertDialog,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+  } from "@rilldata/web-common/components/alert-dialog/index.js";
+  import Button from "@rilldata/web-common/components/button/Button.svelte";
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import Tooltip from "@rilldata/web-common/components/tooltip/Tooltip.svelte";
+  import TooltipContent from "@rilldata/web-common/components/tooltip/TooltipContent.svelte";
+  import {
+    templates,
+    type Template,
+  } from "@rilldata/web-common/features/apis/editor/template-utils";
+  import type { Arg } from "@rilldata/web-common/features/apis/editor/types";
+  import { getNameFromFile } from "@rilldata/web-common/features/entity-management/entity-mappers";
+  import type { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
+  import {
+    ResourceKind,
+    resourceIsLoading,
+  } from "@rilldata/web-common/features/entity-management/resource-selectors";
+  import { handleEntityRename } from "@rilldata/web-common/features/entity-management/ui-actions";
+  import { mapParseErrorsToLines } from "@rilldata/web-common/features/metrics-views/errors";
+  import APIEditor from "@rilldata/web-common/features/apis/editor/APIEditor.svelte";
+  import WorkspaceContainer from "@rilldata/web-common/layout/workspace/WorkspaceContainer.svelte";
+  import WorkspaceHeader from "@rilldata/web-common/layout/workspace/WorkspaceHeader.svelte";
+  import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient";
+  import { useRuntimeClient } from "@rilldata/web-common/runtime-client/v2";
+  import { ChevronDownIcon } from "lucide-svelte";
+
+  export let fileArtifact: FileArtifact;
+
+  const runtimeClient = useRuntimeClient();
+
+  $: ({
+    hasUnsavedChanges,
+    autoSave,
+    path: filePath,
+    resourceName,
+    remoteContent,
+    fileName,
+  } = fileArtifact);
+
+  $: apiName = $resourceName?.name ?? getNameFromFile(filePath);
+  $: host = runtimeClient.host || "http://localhost:9009";
+  $: instanceId = runtimeClient.instanceId;
+
+  $: allErrorsQuery = fileArtifact.getAllErrors(queryClient);
+  $: allErrors = $allErrorsQuery;
+  $: resourceQuery = fileArtifact.getResource(queryClient);
+  $: ({ data: resource } = $resourceQuery);
+  $: isReconciling = resourceIsLoading($resourceQuery.data);
+
+  async function onChangeCallback(newTitle: string) {
+    const newRoute = await handleEntityRename(
+      runtimeClient,
+      newTitle,
+      filePath,
+      fileName,
+    );
+    if (newRoute) await goto(newRoute);
+  }
+
+  $: errors = mapParseErrorsToLines(allErrors, $remoteContent ?? "");
+
+  let args: Arg[] = [];
+
+  $: ({ updateEditorContent } = fileArtifact);
+
+  // Template confirmation dialog state
+  let dialogOpen = false;
+  let pendingTemplate: Template | null = null;
+  let dropdownOpen = false;
+
+  function selectTemplate(template: Template) {
+    pendingTemplate = template;
+    dialogOpen = true;
+  }
+
+  function confirmTemplate() {
+    if (pendingTemplate) {
+      updateEditorContent(pendingTemplate.content);
+    }
+    dialogOpen = false;
+    pendingTemplate = null;
+  }
+</script>
+
+<WorkspaceContainer inspector={false}>
+  <WorkspaceHeader
+    {filePath}
+    {resource}
+    resourceKind={ResourceKind.API}
+    hasUnsavedChanges={$hasUnsavedChanges}
+    onTitleChange={onChangeCallback}
+    slot="header"
+    showInspectorToggle={false}
+    titleInput={fileName}
+  >
+    <svelte:fragment slot="workspace-controls">
+      <DropdownMenu.Root bind:open={dropdownOpen}>
+        <DropdownMenu.Trigger>
+          {#snippet child({ props })}
+            <Tooltip distance={8} suppress={dropdownOpen}>
+              <Button {...props} type="text" compact small>
+                Templates
+                <ChevronDownIcon size="12px" />
+              </Button>
+              <TooltipContent slot="tooltip-content">
+                Insert a starter API template
+              </TooltipContent>
+            </Tooltip>
+          {/snippet}
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content align="end" class="w-44">
+          {#each templates as template}
+            <DropdownMenu.Item onclick={() => selectTemplate(template)}>
+              <span class="text-xs">{template.label}</span>
+            </DropdownMenu.Item>
+          {/each}
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
+    </svelte:fragment>
+  </WorkspaceHeader>
+
+  <svelte:fragment slot="body">
+    <APIEditor
+      bind:autoSave={$autoSave}
+      {fileArtifact}
+      {errors}
+      {apiName}
+      {isReconciling}
+      {host}
+      {instanceId}
+      bind:args
+    />
+  </svelte:fragment>
+</WorkspaceContainer>
+
+<AlertDialog bind:open={dialogOpen}>
+  <AlertDialogContent>
+    <AlertDialogHeader>
+      <AlertDialogTitle>{pendingTemplate?.label ?? "Template"}</AlertDialogTitle
+      >
+      <AlertDialogDescription>
+        {pendingTemplate?.description ?? ""}
+        <br /><br />
+        Warning: this will overwrite your current file.
+      </AlertDialogDescription>
+    </AlertDialogHeader>
+    <AlertDialogFooter>
+      <Button
+        type="tertiary"
+        onClick={() => {
+          dialogOpen = false;
+          pendingTemplate = null;
+        }}
+      >
+        Cancel
+      </Button>
+      <Button type="primary" onClick={confirmTemplate}>Apply</Button>
+    </AlertDialogFooter>
+  </AlertDialogContent>
+</AlertDialog>
diff --git a/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte b/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
index b15d8869b615..0cbad168dd5a 100644
--- a/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
+++ b/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
@@ -21,7 +21,7 @@
     <div
       role="status"
       transition:slide={{ duration: LIST_SLIDE_DURATION }}
-      class="border border-destructive bg-destructive/15 dark:bg-destructive/30 text-fg-primary border-l-4 px-2 py-5 max-h-72 overflow-auto"
+      class="border border-destructive bg-destructive/15 dark:bg-destructive/30 text-fg-primary border-l-4 px-3 py-2.5 text-sm flex-shrink-0"
     >
       <div class="flex gap-x-2 items-center">
         <CancelCircle className="text-destructive" />{error}
diff --git a/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte b/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte
index e3a5f886a007..e61033c936d6 100644
--- a/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte
+++ b/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte
@@ -10,6 +10,7 @@
   import { getExtensionsForFile } from "@rilldata/web-common/features/editor/getExtensionsForFile";
   import { ResourceKind } from "@rilldata/web-common/features/entity-management/resource-selectors";
   import { directoryState } from "@rilldata/web-common/features/file-explorer/directory-store";
+  import APIWorkspace from "@rilldata/web-common/features/workspaces/APIWorkspace.svelte";
   import CanvasWorkspace from "@rilldata/web-common/features/workspaces/CanvasWorkspace.svelte";
   import ExploreWorkspace from "@rilldata/web-common/features/workspaces/ExploreWorkspace.svelte";
   import MetricsWorkspace from "@rilldata/web-common/features/workspaces/MetricsWorkspace.svelte";
@@ -26,6 +27,7 @@
     [ResourceKind.MetricsView, MetricsWorkspace],
     [ResourceKind.Explore, ExploreWorkspace],
     [ResourceKind.Canvas, CanvasWorkspace],
+    [ResourceKind.API, APIWorkspace],
     [null, null],
     [undefined, null],
   ]);