diff --git a/playground/Playground.tsx b/playground/Playground.tsx
index 76d3cef..df9fa90 100644
--- a/playground/Playground.tsx
+++ b/playground/Playground.tsx
@@ -24,8 +24,10 @@ import {useEffect, useRef, useState} from "react";
 interface Settings {
   apiKey: string;
   templateId: string | null;
+  embedType?: "templateDetails" | "templateEditor";
   permissions: string[];
   features: Required<badge.TemplateEmbedFeatures>;
+  editorFeatures?: badge.TemplateEditorFeatures;
   sdkPath: string;
   googleFont: string;
   primaryColor: string;
@@ -41,9 +43,21 @@ export function Playground() {
     key: "state",
     defaultValue: DEFAULT_SETTINGS,
     serialize: JSON.stringify,
-    deserialize: JSON.parse as (
-      value: string | undefined,
-    ) => typeof DEFAULT_SETTINGS,
+    deserialize: (value: string | undefined): Settings => {
+      if (!value) {
+        return DEFAULT_SETTINGS;
+      }
+
+      const parsed = JSON.parse(value) as Partial<Settings>;
+
+      return {
+        ...DEFAULT_SETTINGS,
+        ...parsed,
+        embedType: parsed.embedType ?? "templateDetails",
+        editorFeatures:
+          parsed.editorFeatures ?? badge.TEMPLATE_EDITOR_FEATURES_DEFAULT,
+      };
+    },
     getInitialValueInEffect: false,
   });
 
@@ -54,7 +68,10 @@ export function Playground() {
 
   const [sdkCall, setSdkCall] = useState<{
     sdkOptions: badge.SdkOptions;
-    embedTemplatePageOptions: badge.EmbedTemplatePageOptions;
+    options:
+      | badge.EmbedTemplatePageOptions
+      | badge.EmbedTemplateEditorPageOptions;
+    functionName: string;
   }>();
 
   function launchEmbed() {
@@ -95,31 +112,57 @@ export function Playground() {
         const primaryColor = settings.primaryColor || undefined;
         const neutralColor = settings.neutralColor || undefined;
 
-        const embedTemplatePageOptions: badge.EmbedTemplatePageOptions = {
-          templateId,
-          features: settings.features,
-          fonts: googleFont
-            ? [
-                {
-                  cssSrc: `https://fonts.googleapis.com/css2?family=${googleFont.replace(/ /g, "+")}&display=swap`,
-                },
-              ]
-            : undefined,
-          appearance: {
-            fontFamily: googleFont,
-            colors: {
-              primary: primaryColor,
-              neutral: neutralColor,
-            },
+        const fonts = googleFont
+          ? [
+              {
+                cssSrc: `https://fonts.googleapis.com/css2?family=${googleFont.replace(/ /g, "+")}&display=swap`,
+              },
+            ]
+          : undefined;
+
+        const appearance = {
+          fontFamily: googleFont,
+          colors: {
+            primary: primaryColor,
+            neutral: neutralColor,
           },
         };
 
-        badge.embedTemplatePage(sdk, element, embedTemplatePageOptions);
-
-        setSdkCall({
-          sdkOptions,
-          embedTemplatePageOptions,
-        });
+        const embedType = settings.embedType ?? "templateDetails";
+        switch (embedType) {
+          case "templateEditor": {
+            const options: badge.EmbedTemplateEditorPageOptions = {
+              templateId,
+              features:
+                settings.editorFeatures ??
+                badge.TEMPLATE_EDITOR_FEATURES_DEFAULT,
+              fonts,
+              appearance,
+            };
+            badge.embedTemplateEditorPage(sdk, element, options);
+            setSdkCall({
+              sdkOptions,
+              options,
+              functionName: "embedTemplateEditorPage",
+            });
+            return;
+          }
+          case "templateDetails": {
+            const options: badge.EmbedTemplatePageOptions = {
+              templateId,
+              features: settings.features,
+              fonts,
+              appearance,
+            };
+            badge.embedTemplatePage(sdk, element, options);
+            setSdkCall({
+              sdkOptions,
+              options,
+              functionName: "embedTemplatePage",
+            });
+            return;
+          }
+        }
       })
       .catch(alert);
   }
@@ -160,6 +203,7 @@ export function Playground() {
     handleApiKeyChange(settings.apiKey);
   }, [handleApiKeyChange, settings.apiKey]);
 
+  const embedType = settings.embedType ?? "templateDetails";
   return (
     <AppShell
       header={{height: 60}}
@@ -193,6 +237,18 @@ export function Playground() {
               settingChanged("templateId", value);
             }}
           />
+          <Select
+            label="Embed Type"
+            defaultValue={embedType}
+            data={[
+              {value: "templateDetails", label: "Template Details"},
+              {value: "templateEditor", label: "Template Editor"},
+            ]}
+            value={embedType}
+            onChange={(value) => {
+              settingChanged("embedType", value as Settings["embedType"]);
+            }}
+          />
           <MultiSelect
             label="Permissions"
             data={ALL_PERMISSIONS}
@@ -201,19 +257,38 @@ export function Playground() {
               settingChanged("permissions", value);
             }}
           />
-          <MultiSelect
-            label="Features"
-            data={Object.keys(ALL_FEATURES_DISABLED)}
-            value={Object.entries(settings.features)
-              .filter(([_, value]) => value)
-              .map(([key]) => key)}
-            onChange={(value) => {
-              settingChanged("features", {
-                ...ALL_FEATURES_DISABLED,
-                ...Object.fromEntries(value.map((flag) => [flag, true])),
-              });
-            }}
-          />
+          {embedType === "templateDetails" && (
+            <MultiSelect
+              label="Features"
+              data={Object.keys(ALL_FEATURES_DISABLED)}
+              value={Object.entries(settings.features)
+                .filter(([_, value]) => value)
+                .map(([key]) => key)}
+              onChange={(value) => {
+                settingChanged("features", {
+                  ...ALL_FEATURES_DISABLED,
+                  ...Object.fromEntries(value.map((flag) => [flag, true])),
+                });
+              }}
+            />
+          )}
+          {embedType === "templateEditor" && (
+            <MultiSelect
+              label="Editor Features"
+              data={Object.keys(badge.TEMPLATE_EDITOR_FEATURES_DEFAULT)}
+              value={Object.entries(
+                settings.editorFeatures ??
+                  badge.TEMPLATE_EDITOR_FEATURES_DEFAULT,
+              )
+                .filter(([_, value]) => value)
+                .map(([key]) => key)}
+              onChange={(value) => {
+                const editorFeatures: badge.TemplateEditorFeatures =
+                  Object.fromEntries(value.map((flag) => [flag, true]));
+                settingChanged("editorFeatures", editorFeatures);
+              }}
+            />
+          )}
           <Switch
             label="Show Appearance Settings"
             checked={appearanceVisible}
@@ -277,7 +352,7 @@ export function Playground() {
               <Code block>{`
 const sdk = badge.makeSdk(${JSON.stringify(sdkCall.sdkOptions, null, 2)});
 
-badge.embedTemplatePage(sdk, element, ${JSON.stringify(sdkCall.embedTemplatePageOptions, null, 2)});`}</Code>
+badge.${sdkCall.functionName}(sdk, element, ${JSON.stringify(sdkCall.options, null, 2)});`}</Code>
             </>
           )}
         </Stack>
@@ -295,6 +370,7 @@ badge.embedTemplatePage(sdk, element, ${JSON.stringify(sdkCall.embedTemplatePage
 const DEFAULT_SETTINGS: Settings = {
   apiKey: "",
   templateId: null,
+  embedType: "templateDetails",
   permissions: [
     "workspace:read",
     "user:write",
@@ -307,6 +383,7 @@ const DEFAULT_SETTINGS: Settings = {
     campaigns: true,
     campaignEditor: true,
   },
+  editorFeatures: badge.TEMPLATE_EDITOR_FEATURES_DEFAULT,
   sdkPath: "",
   googleFont: "",
   primaryColor: "",
diff --git a/src/calls/embedTemplateEditorPage.ts b/src/calls/embedTemplateEditorPage.ts
new file mode 100644
index 0000000..d334f53
--- /dev/null
+++ b/src/calls/embedTemplateEditorPage.ts
@@ -0,0 +1,93 @@
+import type {BadgeSdk} from "../sdk.ts";
+import type {AppearanceConfig, FontSource} from "../helpers/appearance.ts";
+import {createEmbedIframe} from "../helpers/iframe.ts";
+import {validatePermissions} from "../helpers/permissions.ts";
+import {parseTokenPayload} from "../helpers/token.ts";
+import {type SdkPermission} from "../helpers/permissions.ts";
+import {
+  type TemplateEditorFeature,
+  type TemplateEditorFeatures,
+} from "../helpers/embedFeatures.ts";
+
+export interface EmbedTemplateEditorPageOptions {
+  /**
+   * id of the template to show
+   */
+  templateId: string;
+  features?: TemplateEditorFeatures | undefined;
+  fonts?: FontSource[] | undefined;
+  appearance?: AppearanceConfig | undefined;
+}
+
+/**
+ * requires template:write
+ */
+export function embedTemplateEditorPage(
+  sdk: BadgeSdk,
+  element: HTMLElement,
+  {templateId, features, fonts, appearance}: EmbedTemplateEditorPageOptions,
+): void {
+  const {workspaceHandle, permissions} = parseTokenPayload(sdk.token);
+
+  validatePermissions(permissions, REQUIRED_PERMISSIONS);
+
+  const iframe = createEmbedIframe({
+    token: sdk.token,
+    path: sdk.path,
+    pathHash: `/${workspaceHandle}/templates/${templateId}/edit`,
+    navigation: "bottom",
+    config: {
+      features: {
+        templateEditor:
+          Object.keys(features ?? {}).length > 0
+            ? {...TEMPLATE_EDITOR_FEATURES_NONE, ...features}
+            : TEMPLATE_EDITOR_FEATURES_DEFAULT,
+      },
+      fonts,
+      appearance,
+    },
+  });
+
+  element.replaceChildren(iframe);
+}
+
+const REQUIRED_PERMISSIONS: SdkPermission[][] = [
+  ["workspace:read", "workspace:write"],
+  ["user:read", "user:write"],
+  ["template:write", "template:read"],
+];
+
+export const TEMPLATE_EDITOR_FEATURES_DEFAULT = {
+  logo: true,
+  icon: true,
+  heading: true,
+  colors: true,
+  coverImage: true,
+  headerField: true,
+  secondaryFields: true,
+  barcodeType: false,
+  barcodeData: false,
+  barcodeText: false,
+  description: false,
+  backFields: true,
+  locationMessages: true,
+  appLinks: true,
+  expiry: false,
+} satisfies Required<TemplateEditorFeatures>;
+
+export const TEMPLATE_EDITOR_FEATURES_NONE = Object.fromEntries(
+  Object.keys(TEMPLATE_EDITOR_FEATURES_DEFAULT).map((key) => [key, false]),
+) as Record<TemplateEditorFeature, false>;
+
+export const TEMPLATE_EDITOR_FEATURES_ALL = Object.fromEntries(
+  Object.keys(TEMPLATE_EDITOR_FEATURES_DEFAULT).map((key) => [key, true]),
+) as Record<TemplateEditorFeature, true>;
+
+export const TEMPLATE_EDITOR_FEATURES_ENABLE_BARCODE = {
+  barcodeType: true,
+  barcodeData: true,
+  barcodeText: true,
+} satisfies Pick<
+  Record<TemplateEditorFeature, true>,
+  "barcodeType" | "barcodeData" | "barcodeText"
+>;
diff --git a/src/calls/embedTemplatePage.ts b/src/calls/embedTemplatePage.ts
index 7c307ec..70b5443 100644
--- a/src/calls/embedTemplatePage.ts
+++ b/src/calls/embedTemplatePage.ts
@@ -1,5 +1,13 @@
-import * as z from "@zod/mini";
 import type {BadgeSdk} from "../sdk.ts";
+import type {FontSource, AppearanceConfig} from "../helpers/appearance.ts";
+import {createEmbedIframe} from "../helpers/iframe.ts";
+import {parseTokenPayload} from "../helpers/token.ts";
+import {
+  hasPermission,
+  validatePermissions,
+  type SdkPermission,
+} from "../helpers/permissions.ts";
+import type {TemplateEmbedFeatures} from "../helpers/embedFeatures.ts";
 
 export interface EmbedTemplatePageOptions {
   /**
@@ -17,130 +25,28 @@ export interface EmbedTemplatePageOptions {
 export function embedTemplatePage(
   sdk: BadgeSdk,
   element: HTMLElement,
-  options: EmbedTemplatePageOptions,
+  {templateId, features, fonts, appearance}: EmbedTemplatePageOptions,
 ): void {
-  const {templateId, features, fonts, appearance} = options;
   const {workspaceHandle, permissions} = parseTokenPayload(sdk.token);
 
-  validatePermissions(permissions, features ?? {});
+  validatePermissions(permissions, REQUIRED_PERMISSIONS);
+  validatePermissionsByFeatures(permissions, features ?? {});
 
   const iframe = createEmbedIframe({
     token: sdk.token,
     path: sdk.path,
-    workspaceHandle,
-    templateId,
-    config: {
-      features,
-      fonts,
-      appearance,
-    },
+    pathHash: `/${workspaceHandle}/templates/${templateId}/overview`,
+    navigation: "top",
+    config: {features, fonts, appearance},
   });
 
   element.replaceChildren(iframe);
 }
 
-interface CreateIframeOptions {
-  token: string;
-  path: string;
-  workspaceHandle: string;
-  templateId: string;
-  config: TemplateEmbedConfig;
-}
-
-interface TemplateEmbedConfig {
-  features?: TemplateEmbedFeatures | undefined;
-  fonts?: FontSource[] | undefined;
-  appearance?: AppearanceConfig | undefined;
-}
-
-export type FontSource = CssFontSource | CustomFontSource;
-
-export interface CssFontSource {
-  cssSrc: string;
-}
-
-export interface CustomFontSource {
-  family: string;
-  src: string;
-  weight?:
-    | "100"
-    | "200"
-    | "300"
-    | "400"
-    | "500"
-    | "600"
-    | "700"
-    | "800"
-    | "900";
-  style?: "normal" | "italic" | "oblique";
-  unicodeRange?: string;
-}
-
-export interface AppearanceConfig {
-  fontFamily?: string | undefined;
-  colors?: {
-    primary?: string | undefined;
-    neutral?: string | undefined;
-  };
-}
-
-export interface TemplateEmbedFeatures {
-  passList?: boolean;
-  templateEditor?: boolean;
-  campaigns?: boolean;
-  campaignEditor?: boolean;
-}
-
-function createEmbedIframe(options: CreateIframeOptions): HTMLIFrameElement {
-  const {path, token, workspaceHandle, templateId, config} = options;
-
-  const iframe = document.createElement("iframe");
-
-  iframe.style.width = "100%";
-  iframe.style.height = "100%";
-  iframe.style.border = "none";
-
-  const iframeUrl = new URL(path);
-
-  iframeUrl.searchParams.set("token", token);
-  iframeUrl.searchParams.set("config", JSON.stringify(config));
-
-  iframeUrl.hash = `/${workspaceHandle}/templates/${templateId}/overview`;
-
-  iframe.src = iframeUrl.toString();
-
-  return iframe;
-}
-
-function parseTokenPayload(token: string): SdkTokenPayload {
-  const tokenPayloadResult = sdkTokenPayloadSchema.safeParse(
-    JSON.parse(atob(token.split(".")[1] ?? "")),
-  );
-
-  if (!tokenPayloadResult.success) {
-    throw new Error("Invalid token payload");
-  }
-
-  return tokenPayloadResult.data;
-}
-
-function validatePermissions(
+function validatePermissionsByFeatures(
   permissions: SdkPermission[],
   features: TemplateEmbedFeatures,
 ): void {
-  const hasPermission = (validPermissionSets: SdkPermission[][]) => {
-    return validPermissionSets.every((permissionSet) =>
-      permissionSet.some((permission) => permissions.includes(permission)),
-    );
-  };
-
-  if (!hasPermission(REQUIRED_PERMISSIONS)) {
-    throw new Error(
-      REQUIRED_PERMISSIONS.map((set) => set.join(" or ")).join(", ") +
-        " permissions are required",
-    );
-  }
-
   const failedPermissions = Object.entries(features)
     .filter(([_, enabled]) => enabled)
     .map(([feature]) => ({
@@ -149,7 +55,10 @@ function validatePermissions(
         REQUIRED_PERMISSIONS_BY_FEATURE[feature as keyof TemplateEmbedFeatures],
     }))
     .filter(({permissions}) => permissions !== undefined)
-    .filter(({permissions}) => !hasPermission(permissions));
+    .filter(
+      ({permissions: featurePermissions}) =>
+        !hasPermission(permissions, featurePermissions),
+    );
 
   if (failedPermissions.length > 0) {
     throw new Error(
@@ -163,26 +72,6 @@ function validatePermissions(
   }
 }
 
-type SdkPermission = z.infer<typeof sdkPermissionSchema>;
-const sdkPermissionSchema = z.enum([
-  "workspace:read",
-  "workspace:write",
-  "template:read",
-  "template:write",
-  "pass:read",
-  "pass:write",
-  "campaign:read",
-  "campaign:write",
-  "user:read",
-  "user:write",
-]);
-
-type SdkTokenPayload = z.infer<typeof sdkTokenPayloadSchema>;
-const sdkTokenPayloadSchema = z.object({
-  workspaceHandle: z.string(),
-  permissions: z.array(sdkPermissionSchema),
-});
-
 const REQUIRED_PERMISSIONS: SdkPermission[][] = [
   ["workspace:read", "workspace:write"],
   ["user:read", "user:write"],
diff --git a/src/helpers/appearance.ts b/src/helpers/appearance.ts
new file mode 100644
index 0000000..1b34782
--- /dev/null
+++ b/src/helpers/appearance.ts
@@ -0,0 +1,30 @@
+export interface AppearanceConfig {
+  fontFamily?: string | undefined;
+  colors?: {
+    primary?: string | undefined;
+    neutral?: string | undefined;
+  };
+}
+
+export type FontSource = CssFontSource | CustomFontSource;
+
+export interface CssFontSource {
+  cssSrc: string;
+}
+
+export interface CustomFontSource {
+  family: string;
+  src: string;
+  weight?:
+    | "100"
+    | "200"
+    | "300"
+    | "400"
+    | "500"
+    | "600"
+    | "700"
+    | "800"
+    | "900";
+  style?: "normal" | "italic" | "oblique";
+  unicodeRange?: string;
+}
diff --git a/src/helpers/embedFeatures.ts b/src/helpers/embedFeatures.ts
new file mode 100644
index 0000000..7d9f618
--- /dev/null
+++ b/src/helpers/embedFeatures.ts
@@ -0,0 +1,28 @@
+export type Navigation = "top" | "bottom";
+
+export interface TemplateEmbedFeatures {
+  passList?: boolean;
+  templateEditor?: boolean | TemplateEditorFeatures;
+  campaigns?: boolean;
+  campaignEditor?: boolean;
+}
+
+export type TemplateEditorFeature = keyof TemplateEditorFeatures;
+
+export interface TemplateEditorFeatures {
+  logo?: boolean;
+  icon?: boolean;
+  heading?: boolean;
+  colors?: boolean;
+  coverImage?: boolean;
+  headerField?: boolean;
+  secondaryFields?: boolean;
+  barcodeType?: boolean;
+  barcodeData?: boolean;
+  barcodeText?: boolean;
+  description?: boolean;
+  backFields?: boolean;
+  locationMessages?: boolean;
+  appLinks?: boolean;
+  expiry?: boolean;
+}
diff --git a/src/helpers/iframe.ts b/src/helpers/iframe.ts
new file mode 100644
index 0000000..7ef4473
--- /dev/null
+++ b/src/helpers/iframe.ts
@@ -0,0 +1,38 @@
+import type {Navigation, TemplateEmbedFeatures} from "./embedFeatures.ts";
+import type {FontSource, AppearanceConfig} from "./appearance.ts";
+
+export interface CreateIframeOptions {
+  token: string;
+  path: string;
+  pathHash: string;
+  navigation: Navigation;
+  config: {
+    features?: TemplateEmbedFeatures | undefined;
+    fonts?: FontSource[] | undefined;
+    appearance?: AppearanceConfig | undefined;
+  };
+}
+
+export function createEmbedIframe(
+  options: CreateIframeOptions,
+): HTMLIFrameElement {
+  const {path, token, pathHash, navigation, config} = options;
+
+  const iframe = document.createElement("iframe");
+
+  iframe.style.width = "100%";
+  iframe.style.height = "100%";
+  iframe.style.border = "none";
+
+  const iframeUrl = new URL(path);
+
+  iframeUrl.searchParams.set("token", token);
+  iframeUrl.searchParams.set("navigation", navigation);
+  iframeUrl.searchParams.set("config", JSON.stringify(config));
+
+  iframeUrl.hash = pathHash;
+
+  iframe.src = iframeUrl.toString();
+
+  return iframe;
+}
diff --git a/src/helpers/permissions.ts b/src/helpers/permissions.ts
new file mode 100644
index 0000000..4bbe972
--- /dev/null
+++ b/src/helpers/permissions.ts
@@ -0,0 +1,36 @@
+import {z} from "@zod/mini";
+
+export function hasPermission(
+  permissions: SdkPermission[],
+  validPermissionSets: SdkPermission[][],
+): boolean {
+  return validPermissionSets.every((permissionSet) =>
+    permissionSet.some((permission) => permissions.includes(permission)),
+  );
+}
+
+export function validatePermissions(
+  permissions: SdkPermission[],
+  validPermissionSets: SdkPermission[][],
+): void {
+  if (!hasPermission(permissions, validPermissionSets)) {
+    throw new Error(
+      validPermissionSets.map((set) => set.join(" or ")).join(", ") +
+        " permissions are required",
+    );
+  }
+}
+
+export type SdkPermission = z.infer<typeof sdkPermissionSchema>;
+export const sdkPermissionSchema = z.enum([
+  "workspace:read",
+  "workspace:write",
+  "template:read",
+  "template:write",
+  "pass:read",
+  "pass:write",
+  "campaign:read",
+  "campaign:write",
+  "user:read",
+  "user:write",
+]);
diff --git a/src/helpers/token.ts b/src/helpers/token.ts
new file mode 100644
index 0000000..c0f0fee
--- /dev/null
+++ b/src/helpers/token.ts
@@ -0,0 +1,20 @@
+import {z} from "@zod/mini";
+import {sdkPermissionSchema} from "./permissions.ts";
+
+export function parseTokenPayload(token: string): SdkTokenPayload {
+  const tokenPayloadResult = sdkTokenPayloadSchema.safeParse(
+    JSON.parse(atob(token.split(".")[1] ?? "")),
+  );
+
+  if (!tokenPayloadResult.success) {
+    throw new Error("Invalid token payload");
+  }
+
+  return tokenPayloadResult.data;
+}
+
+export type SdkTokenPayload = z.infer<typeof sdkTokenPayloadSchema>;
+export const sdkTokenPayloadSchema = z.object({
+  workspaceHandle: z.string(),
+  permissions: z.array(sdkPermissionSchema),
+});
diff --git a/src/index.ts b/src/index.ts
index 1841cca..df7bc7c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,6 +3,24 @@ export type {BadgeSdk} from "./sdk.ts";
 export {
   embedTemplatePage,
   type EmbedTemplatePageOptions,
-  type TemplateEmbedFeatures,
 } from "./calls/embedTemplatePage.ts";
+export {
+  embedTemplateEditorPage,
+  type EmbedTemplateEditorPageOptions,
+  TEMPLATE_EDITOR_FEATURES_DEFAULT,
+  TEMPLATE_EDITOR_FEATURES_ALL,
+  TEMPLATE_EDITOR_FEATURES_NONE,
+  TEMPLATE_EDITOR_FEATURES_ENABLE_BARCODE,
+} from "./calls/embedTemplateEditorPage.ts";
 export {makeSdk, type SdkOptions} from "./calls/makeSdk.ts";
+export {
+  type TemplateEmbedFeatures,
+  type TemplateEditorFeatures,
+} from "./helpers/embedFeatures.ts";
+export {
+  type AppearanceConfig,
+  type FontSource,
+  type CssFontSource,
+  type CustomFontSource,
+} from "./helpers/appearance.ts";
+export {type SdkTokenPayload} from "./helpers/token.ts";