loopwind 0.16.0 → 0.18.0

package/dist/sdk/template.d.ts

@@ -1,4 +1,6 @@
 import type { TemplateProps, TemplateMeta } from '../types/template.js';
+import type { DesignConfig } from '../types/config.js';
+export type StyleConfig = DesignConfig;
 export interface TemplateDefinition<TProps = any> {
     name: string;
     type?: 'image' | 'video';
@@ -10,6 +12,7 @@ export interface TemplateDefinition<TProps = any> {
         fps: number;
         duration: number;
     };
+    config?: StyleConfig;
     render: (props: TProps & TemplateProps) => JSX.Element;
 }
 /**
@@ -36,4 +39,137 @@ export declare function defineTemplate<TProps = any>(definition: TemplateDefinit
  * @internal
  */
 export declare function templateToMeta(template: TemplateDefinition): TemplateMeta;
+/**
+ * Define a template from an imported template file
+ *
+ * Allows reusing file-based templates from _loopwind/templates/ in the SDK
+ *
+ * @example
+ * ```typescript
+ * import * as videoIntro from './_loopwind/templates/video-intro/template';
+ *
+ * const template = defineTemplateFromFile(videoIntro, {
+ *   config: {
+ *     colors: { primary: '#ff0000' }
+ *   }
+ * });
+ *
+ * const mp4 = await renderVideo(template, { version: '2.0.0' });
+ * ```
+ */
+export declare function defineTemplateFromFile<TProps = any>(templateModule: {
+    meta: TemplateMeta;
+    default: (props: TProps & TemplateProps) => JSX.Element;
+}, options?: {
+    config?: StyleConfig;
+}): TemplateDefinition<TProps>;
+/**
+ * Define a template from a source code string
+ *
+ * **WARNING:** This function evaluates code strings using `new Function()`.
+ * Only use with **trusted** template sources. Never use with user input from
+ * untrusted sources as it can execute arbitrary code.
+ *
+ * Perfect for:
+ * - Templates stored in a database (admin-created only)
+ * - Templates from a trusted CMS
+ * - Code editor features where templates are validated
+ *
+ * @example
+ * ```typescript
+ * const templateSource = `
+ * export const meta = {
+ *   name: 'user-template',
+ *   type: 'image',
+ *   size: { width: 1200, height: 630 }
+ * };
+ *
+ * export default ({ tw, title }) => {
+ *   const h = React.createElement;
+ *   return h('div', { style: tw('flex w-full h-full bg-blue-500 p-12') },
+ *     h('h1', { style: tw('text-6xl font-bold text-white') }, title)
+ *   );
+ * };
+ * `;
+ *
+ * const template = defineTemplateFromSource(templateSource, {
+ *   config: { colors: { primary: '#3b82f6' } }
+ * });
+ *
+ * const png = await renderImage(template, { title: 'Hello' });
+ * ```
+ */
+export declare function defineTemplateFromSource<TProps = any>(sourceCode: string, options?: {
+    config?: StyleConfig;
+}): TemplateDefinition<TProps>;
+/**
+ * Schema element definition for visual template builders
+ */
+export interface SchemaElement {
+    type: 'div' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'img';
+    className?: string;
+    content?: string;
+    src?: string;
+    style?: Record<string, any>;
+    children?: SchemaElement[];
+}
+/**
+ * Template schema for visual builders
+ */
+export interface TemplateSchema {
+    name: string;
+    type?: 'image' | 'video';
+    size: {
+        width: number;
+        height: number;
+    };
+    video?: {
+        fps: number;
+        duration: number;
+    };
+    config?: StyleConfig;
+    elements: SchemaElement[];
+}
+/**
+ * Define a template from a JSON schema
+ *
+ * Perfect for visual template builders where users drag and drop elements.
+ * Converts a declarative JSON schema into a working template.
+ *
+ * @example
+ * ```typescript
+ * const schema: TemplateSchema = {
+ *   name: 'card',
+ *   size: { width: 1200, height: 630 },
+ *   config: {
+ *     colors: { primary: '#3b82f6', background: '#ffffff' }
+ *   },
+ *   elements: [
+ *     {
+ *       type: 'div',
+ *       className: 'flex flex-col w-full h-full bg-background p-12',
+ *       children: [
+ *         {
+ *           type: 'h1',
+ *           className: 'text-6xl font-bold text-primary',
+ *           content: '{{title}}'
+ *         },
+ *         {
+ *           type: 'p',
+ *           className: 'text-2xl text-gray-600',
+ *           content: '{{description}}'
+ *         }
+ *       ]
+ *     }
+ *   ]
+ * };
+ *
+ * const template = defineTemplateFromSchema(schema);
+ * const png = await renderImage(template, {
+ *   title: 'Hello World',
+ *   description: 'Created with visual builder'
+ * });
+ * ```
+ */
+export declare function defineTemplateFromSchema<TProps = any>(schema: TemplateSchema): TemplateDefinition<TProps>;
 //# sourceMappingURL=template.d.ts.map

package/dist/sdk/template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/sdk/template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAExE,MAAM,WAAW,kBAAkB,CAAC,MAAM,GAAG,GAAG;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,GAAG,CAAC,OAAO,CAAC;CACxD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,MAAM,GAAG,GAAG,EACzC,UAAU,EAAE,kBAAkB,CAAC,MAAM,CAAC,GACrC,kBAAkB,CAAC,MAAM,CAAC,CAyB5B;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,kBAAkB,GAAG,YAAY,CASzE"}
+{"version":3,"file":"template.d.ts","sourceRoot":"","sources":["../../src/sdk/template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAIvD,MAAM,MAAM,WAAW,GAAG,YAAY,CAAC;AAEvC,MAAM,WAAW,kBAAkB,CAAC,MAAM,GAAG,GAAG;IAC9C,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,GAAG,CAAC,OAAO,CAAC;CACxD;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,cAAc,CAAC,MAAM,GAAG,GAAG,EACzC,UAAU,EAAE,kBAAkB,CAAC,MAAM,CAAC,GACrC,kBAAkB,CAAC,MAAM,CAAC,CAyB5B;AAED;;;GAGG;AACH,wBAAgB,cAAc,CAAC,QAAQ,EAAE,kBAAkB,GAAG,YAAY,CASzE;AAED;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,sBAAsB,CAAC,MAAM,GAAG,GAAG,EACjD,cAAc,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,aAAa,KAAK,GAAG,CAAC,OAAO,CAAA;CAAE,EAC/F,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,WAAW,CAAA;CAAO,GACrC,kBAAkB,CAAC,MAAM,CAAC,CAW5B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAmCG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,GAAG,GAAG,EACnD,UAAU,EAAE,MAAM,EAClB,OAAO,GAAE;IAAE,MAAM,CAAC,EAAE,WAAW,CAAA;CAAO,GACrC,kBAAkB,CAAC,MAAM,CAAC,CAiC5B;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,KAAK,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,GAAG,GAAG,KAAK,CAAC;IAC7E,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC5B,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B;AAED;;GAEG;AACH,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,IAAI,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IACxC,KAAK,CAAC,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC1C,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,QAAQ,EAAE,aAAa,EAAE,CAAC;CAC3B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,wBAAgB,wBAAwB,CAAC,MAAM,GAAG,GAAG,EACnD,MAAM,EAAE,cAAc,GACrB,kBAAkB,CAAC,MAAM,CAAC,CA+D5B"}

package/dist/sdk/template.js

@@ -1,3 +1,4 @@
+import React from 'react';
 /**
  * Define a template programmatically for use in serverless environments
  *
@@ -51,4 +52,201 @@ export function templateToMeta(template) {
         props: {}, // SDK templates don't need props metadata
     };
 }
+/**
+ * Define a template from an imported template file
+ *
+ * Allows reusing file-based templates from _loopwind/templates/ in the SDK
+ *
+ * @example
+ * ```typescript
+ * import * as videoIntro from './_loopwind/templates/video-intro/template';
+ *
+ * const template = defineTemplateFromFile(videoIntro, {
+ *   config: {
+ *     colors: { primary: '#ff0000' }
+ *   }
+ * });
+ *
+ * const mp4 = await renderVideo(template, { version: '2.0.0' });
+ * ```
+ */
+export function defineTemplateFromFile(templateModule, options = {}) {
+    const { meta, default: render } = templateModule;
+    return defineTemplate({
+        name: meta.name,
+        type: meta.type,
+        size: meta.size,
+        video: meta.video,
+        config: options.config,
+        render,
+    });
+}
+/**
+ * Define a template from a source code string
+ *
+ * **WARNING:** This function evaluates code strings using `new Function()`.
+ * Only use with **trusted** template sources. Never use with user input from
+ * untrusted sources as it can execute arbitrary code.
+ *
+ * Perfect for:
+ * - Templates stored in a database (admin-created only)
+ * - Templates from a trusted CMS
+ * - Code editor features where templates are validated
+ *
+ * @example
+ * ```typescript
+ * const templateSource = `
+ * export const meta = {
+ *   name: 'user-template',
+ *   type: 'image',
+ *   size: { width: 1200, height: 630 }
+ * };
+ *
+ * export default ({ tw, title }) => {
+ *   const h = React.createElement;
+ *   return h('div', { style: tw('flex w-full h-full bg-blue-500 p-12') },
+ *     h('h1', { style: tw('text-6xl font-bold text-white') }, title)
+ *   );
+ * };
+ * `;
+ *
+ * const template = defineTemplateFromSource(templateSource, {
+ *   config: { colors: { primary: '#3b82f6' } }
+ * });
+ *
+ * const png = await renderImage(template, { title: 'Hello' });
+ * ```
+ */
+export function defineTemplateFromSource(sourceCode, options = {}) {
+    try {
+        // Strip export keywords to make it work in function context
+        // Convert "export const meta = ..." to "const meta = ..."
+        // Convert "export default ..." to "const defaultExport = ..."
+        let processedSource = sourceCode
+            .replace(/export\s+const\s+meta\s*=/g, 'const meta =')
+            .replace(/export\s+default\s+/g, 'const defaultExport = ');
+        // Create a module evaluation function
+        // This executes the source code and returns the exports
+        const moduleFactory = new Function('React', `
+      'use strict';
+      const h = React.createElement;
+      ${processedSource}
+      return { meta, default: defaultExport };
+    `);
+        // Execute to get meta and render function
+        const templateModule = moduleFactory(React);
+        if (!templateModule.meta) {
+            throw new Error('Template source must export a "meta" object');
+        }
+        if (!templateModule.default || typeof templateModule.default !== 'function') {
+            throw new Error('Template source must have a default export function');
+        }
+        return defineTemplateFromFile(templateModule, options);
+    }
+    catch (error) {
+        throw new Error(`Failed to parse template source: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}
+/**
+ * Define a template from a JSON schema
+ *
+ * Perfect for visual template builders where users drag and drop elements.
+ * Converts a declarative JSON schema into a working template.
+ *
+ * @example
+ * ```typescript
+ * const schema: TemplateSchema = {
+ *   name: 'card',
+ *   size: { width: 1200, height: 630 },
+ *   config: {
+ *     colors: { primary: '#3b82f6', background: '#ffffff' }
+ *   },
+ *   elements: [
+ *     {
+ *       type: 'div',
+ *       className: 'flex flex-col w-full h-full bg-background p-12',
+ *       children: [
+ *         {
+ *           type: 'h1',
+ *           className: 'text-6xl font-bold text-primary',
+ *           content: '{{title}}'
+ *         },
+ *         {
+ *           type: 'p',
+ *           className: 'text-2xl text-gray-600',
+ *           content: '{{description}}'
+ *         }
+ *       ]
+ *     }
+ *   ]
+ * };
+ *
+ * const template = defineTemplateFromSchema(schema);
+ * const png = await renderImage(template, {
+ *   title: 'Hello World',
+ *   description: 'Created with visual builder'
+ * });
+ * ```
+ */
+export function defineTemplateFromSchema(schema) {
+    if (schema.elements.length === 0) {
+        throw new Error('Schema must have at least one element');
+    }
+    // Embed schema directly in the function body as a JSON literal
+    // This way the function is completely self-contained and survives serialization
+    const elementsJSON = JSON.stringify(schema.elements);
+    // Create a completely self-contained render function
+    // The function body contains the entire schema and all helper functions
+    // React must be available globally or passed in
+    const render = new Function('React', `
+    return function(props) {
+      const h = React.createElement;
+      const elements = ${elementsJSON};
+
+      const interpolate = (str) => {
+        return str.replace(/\\{\\{(\\w+)\\}\\}/g, (_, key) => {
+          return props[key] !== undefined ? String(props[key]) : '';
+        });
+      };
+
+      const buildElement = (element, key) => {
+        const { type, className, content, src, style, children } = element;
+        const elementProps = { key };
+
+        if (className && props.tw) {
+          elementProps.style = props.tw(className);
+        } else if (style) {
+          elementProps.style = style;
+        }
+
+        if (type === 'img' && src) {
+          elementProps.src = interpolate(src);
+        }
+
+        let elementChildren = null;
+        if (content) {
+          elementChildren = interpolate(content);
+        } else if (children && children.length > 0) {
+          elementChildren = children.map((child, i) => buildElement(child, i));
+        }
+
+        return h(type, elementProps, elementChildren);
+      };
+
+      if (elements.length === 1) {
+        return buildElement(elements[0]);
+      }
+
+      return h(React.Fragment, null, elements.map((el, i) => buildElement(el, i)));
+    }
+  `)(React);
+    return defineTemplate({
+        name: schema.name,
+        type: schema.type,
+        size: schema.size,
+        video: schema.video,
+        config: schema.config,
+        render,
+    });
+}
 //# sourceMappingURL=template.js.map

package/dist/sdk/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../src/sdk/template.ts"],"names":[],"mappings":"AAUA;;;;;;;;;;;;;;;;;GAiBG;AACH,MAAM,UAAU,cAAc,CAC5B,UAAsC;IAEtC,sBAAsB;IACtB,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;QACrB,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;IAC1D,CAAC;IAED,IAAI,CAAC,UAAU,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;QAC1E,MAAM,IAAI,KAAK,CAAC,4DAA4D,CAAC,CAAC;IAChF,CAAC;IAED,IAAI,CAAC,UAAU,CAAC,MAAM,IAAI,OAAO,UAAU,CAAC,MAAM,KAAK,UAAU,EAAE,CAAC;QAClE,MAAM,IAAI,KAAK,CAAC,iDAAiD,CAAC,CAAC;IACrE,CAAC;IAED,eAAe;IACf,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,IAAI,OAAO,CAAC;IAExC,IAAI,IAAI,KAAK,OAAO,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,CAAC;QAC1C,MAAM,IAAI,KAAK,CAAC,0DAA0D,CAAC,CAAC;IAC9E,CAAC;IAED,OAAO;QACL,GAAG,UAAU;QACb,IAAI;KACL,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,UAAU,cAAc,CAAC,QAA4B;IACzD,OAAO;QACL,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,WAAW,EAAE,QAAQ,CAAC,IAAI,EAAE,4CAA4C;QACxE,IAAI,EAAE,QAAQ,CAAC,IAAI,IAAI,OAAO;QAC9B,IAAI,EAAE,QAAQ,CAAC,IAAI;QACnB,KAAK,EAAE,QAAQ,CAAC,KAAK;QACrB,KAAK,EAAE,EAAE,EAAE,0CAA0C;KACtD,CAAC;AACJ,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../src/sdk/template.ts"],"names":[],"mappings":"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"}

package/examples/code-editor-templates.ts

@@ -0,0 +1,173 @@
+/**
+ * Example: Code Editor - User-created templates from source strings
+ *
+ * Use case: Building a code editor where users write template code
+ * directly as strings (e.g., Monaco Editor, CodeMirror).
+ *
+ * ⚠️ SECURITY WARNING:
+ * Only use defineTemplateFromSource() with TRUSTED sources!
+ * It evaluates code using new Function() which can execute arbitrary code.
+ * Never pass untrusted user input directly.
+ */
+
+import { defineTemplateFromSource, renderImage, renderVideo } from 'loopwind/sdk';
+import fs from 'fs/promises';
+
+// Example 1: Simple image template from string
+const imageTemplateSource = `
+export const meta = {
+  name: 'user-card',
+  type: 'image',
+  size: { width: 1200, height: 630 }
+};
+
+export default ({ tw, title, description }) => {
+  const h = React.createElement;
+  return h('div', {
+    style: tw('flex flex-col w-full h-full bg-gradient-to-br from-blue-600 to-purple-700 p-12 justify-between')
+  },
+    h('div', { style: tw('flex items-center gap-4') },
+      h('div', { style: tw('w-16 h-16 rounded-full bg-white/20') })
+    ),
+    h('div', null,
+      h('h1', { style: tw('text-6xl font-bold text-white mb-4') }, title),
+      h('p', { style: tw('text-2xl text-white/80') }, description)
+    )
+  );
+};
+`;
+
+async function renderUserTemplate() {
+  // Create template from source string
+  const template = defineTemplateFromSource(imageTemplateSource, {
+    config: {
+      colors: {
+        primary: '#3b82f6',
+        background: '#ffffff',
+      },
+    },
+  });
+
+  // Render with user props
+  const png = await renderImage(template, {
+    title: 'User Created Template',
+    description: 'Built with code editor',
+  });
+
+  await fs.writeFile('user-card.png', png);
+  console.log('✓ Rendered user-card.png');
+}
+
+// Example 2: Video template from string
+const videoTemplateSource = `
+export const meta = {
+  name: 'intro-animation',
+  type: 'video',
+  size: { width: 1920, height: 1080 },
+  video: { fps: 30, duration: 3 }
+};
+
+export default ({ tw, progress, title }) => {
+  const h = React.createElement;
+
+  // Fade in animation
+  const opacity = progress < 0.5 ? progress / 0.5 : 1;
+  const scale = 0.8 + (opacity * 0.2);
+
+  return h('div', {
+    style: tw('flex items-center justify-center w-full h-full bg-black')
+  },
+    h('h1', {
+      style: {
+        ...tw('text-8xl font-bold text-white'),
+        opacity,
+        transform: \`scale(\${scale})\`
+      }
+    }, title)
+  );
+};
+`;
+
+async function renderVideoTemplate() {
+  const template = defineTemplateFromSource(videoTemplateSource);
+
+  const mp4 = await renderVideo(template, {
+    title: 'Hello World',
+  });
+
+  await fs.writeFile('intro-animation.mp4', mp4);
+  console.log('✓ Rendered intro-animation.mp4');
+}
+
+// Example 3: Database-stored template
+// This simulates loading templates from a database
+interface StoredTemplate {
+  id: string;
+  name: string;
+  source: string;
+  config?: any;
+}
+
+const templatesDB: StoredTemplate[] = [
+  {
+    id: 'og-1',
+    name: 'Blog OG Image',
+    source: `
+export const meta = {
+  name: 'blog-og',
+  type: 'image',
+  size: { width: 1200, height: 630 }
+};
+
+export default ({ tw, title, author }) => {
+  const h = React.createElement;
+  return h('div', {
+    style: tw('flex flex-col w-full h-full bg-white p-12 justify-center')
+  },
+    h('h1', { style: tw('text-6xl font-bold text-gray-900 mb-4') }, title),
+    h('p', { style: tw('text-2xl text-gray-600') }, 'By ' + author)
+  );
+};
+    `,
+    config: {
+      colors: {
+        primary: '#1f2937',
+        background: '#ffffff',
+      },
+    },
+  },
+];
+
+async function renderFromDatabase(templateId: string, props: any) {
+  // Fetch template from "database"
+  const stored = templatesDB.find((t) => t.id === templateId);
+  if (!stored) {
+    throw new Error('Template not found');
+  }
+
+  // Create template from stored source
+  const template = defineTemplateFromSource(stored.source, {
+    config: stored.config,
+  });
+
+  // Render
+  const png = await renderImage(template, props);
+  await fs.writeFile(`${stored.id}.png`, png);
+  console.log(`✓ Rendered ${stored.id}.png`);
+}
+
+// Run examples
+async function main() {
+  console.log('Code Editor Examples\n');
+
+  await renderUserTemplate();
+  await renderVideoTemplate();
+  await renderFromDatabase('og-1', {
+    title: 'Building a Template Editor',
+    author: 'John Doe',
+  });
+
+  console.log('\n✅ All code editor examples completed!');
+}
+
+main().catch(console.error);

package/examples/nextjs-template-import.ts

@@ -0,0 +1,58 @@
+/**
+ * Example: Importing template files in Next.js API routes
+ *
+ * This demonstrates how to reuse _loopwind/templates/ files
+ * in your SDK code with Next.js (or any other bundler)
+ */
+
+import type { NextApiRequest, NextApiResponse } from 'next';
+import { defineTemplateFromFile, renderVideo } from 'loopwind/sdk';
+
+// Import your template file (Next.js/bundler handles TSX automatically)
+import * as videoIntroTemplate from '../../_loopwind/templates/video-intro/template';
+
+// Create SDK template from file with custom config
+const template = defineTemplateFromFile(videoIntroTemplate, {
+  config: {
+    colors: {
+      primary: '#ff0000',        // Override gradient colors
+      'indigo-900': '#1a0033',
+    },
+  },
+});
+
+export default async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse
+) {
+  const { version = '1.0.0', changes } = req.query;
+
+  // Parse changes from query param (comma-separated)
+  const changeList = typeof changes === 'string'
+    ? changes.split(',').map(c => c.trim())
+    : undefined;
+
+  // Render video using imported template
+  const mp4 = await renderVideo(template, {
+    version: String(version),
+    changes: changeList,
+  });
+
+  res.setHeader('Content-Type', 'video/mp4');
+  res.setHeader('Cache-Control', 's-maxage=3600, stale-while-revalidate');
+  res.send(mp4);
+}
+
+/**
+ * Usage:
+ *
+ * GET /api/release-video?version=2.0.0&changes=New%20feature,Bug%20fix,Performance
+ *
+ * Returns: MP4 video with version 2.0.0 and custom changes list
+ *
+ * Benefits:
+ * - Reuse CLI templates in API
+ * - Override config for custom branding
+ * - Type-safe with TypeScript
+ * - No duplicate template code
+ */