### Install and Run CE.SDK Example

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-appearance-custom-labels-browser/README.md

Commands to install dependencies, start the development server, build for production, and preview the production build of the CE.SDK example.

```bash
npm install

npm run dev

npm run build

npm run preview
```

--------------------------------

### Install and Run CE.SDK Example

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-appearance-theming-browser/README.md

Install dependencies, start the development server, build for production, and preview the production build for the CE.SDK theming example.

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview
```

--------------------------------

### Install Dependencies and Run Example

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-dynamic-content-placeholders-server-js/README.md

Install project dependencies, run the example, and execute checks.

```bash
# Install dependencies
npm install

# Run the example
npm run dev

# Run all checks (TypeScript, ESLint, Prettier)
npm run check:all
```

--------------------------------

### Install Dependencies and Start Server

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-dynamic-content-placeholders-browser/README.md

Install project dependencies and start the development server using npm commands.

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build
```

--------------------------------

### Start the Example

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-import-from-scene-file-server-js/README.md

Executes the Node.js example script.

```bash
npm start
```

--------------------------------

### Install and Run Project

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-conversion-to-base64-server-js/README.md

Install project dependencies and start the development server.

```bash
npm install
npm run dev
```

--------------------------------

### Install and Run CE.SDK Size Limits Example

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-export-save-publish-size-limits-server-js/README.md

Install dependencies and run the Node.js example to observe image size limit configurations. The output is saved to ./output/size-limits-result.png.

```bash
npm install

npm run dev
```

--------------------------------

### Install and Run Dependencies

Source: https://github.com/imgly/cesdk-web-examples/blob/main/plugins-print-ready-pdf-browser/README.md

Install project dependencies and start the development server or build for production.

```bash
# Install dependencies
npm install

# Start development server (runs with watermark)
npm run dev

# Build for production
npm run build
```

--------------------------------

### Run Development Server

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-dynamic-content-set-editing-constraints-browser/README.md

Start the development server for local testing.

```bash
npm run dev
```

--------------------------------

### Clone the Repository

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-premium-templates/README.md

Clone the demo repository to get started. Navigate into the cloned directory.

```bash
git clone https://github.com/imgly/demo-premium-templates-react-web.git
cd demo-premium-templates-react-web
```

--------------------------------

### Copy Environment File

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-rules-moderate-content-server-js/README.md

Copy the example environment file to create a new configuration file.

```bash
cp .env.example .env
```

--------------------------------

### Build and Preview Production

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-dynamic-content-text-variables-browser/README.md

Build the project for production and start a local preview server. This is used for testing the production build.

```bash
npm run build
npm run preview
```

--------------------------------

### Install Dependencies with Bun

Source: https://github.com/imgly/cesdk-web-examples/blob/main/integrate-with-bun/README.md

Use this command to install project dependencies when using Bun.

```bash
bun install
```

--------------------------------

### Run the Development Server

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-illustrator-template-import/README.md

Start the development server to view the application locally. Access the editor via the provided URL.

```bash
npm run dev
```

--------------------------------

### Install Dependencies

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-import-from-scene-file-server-js/README.md

Installs the necessary project dependencies using npm.

```bash
npm install
```

--------------------------------

### Serve Website with npx serve

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-crop-presets-browser/README.md

Use this command to serve your website locally. Ensure you have Node.js and npm installed.

```bash
npx serve
```

--------------------------------

### Configure License Key

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-open-the-editor-import-design-from-archive-browser/README.md

Copies the example environment file and prompts to edit it for adding a license key to remove watermarks.

```bash
cp .env.example .env
# Edit .env and add your license key
```

--------------------------------

### Build Project with npm

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-customization-panel-browser/README.md

Builds the project for production deployment. Ensure Node.js 22 or higher is installed.

```bash
npm run build
```

--------------------------------

### Basic HTML and CSS Setup for CE.SDK Custom Panel

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-ui-extensions-create-custom-panel-browser/index.html

Essential HTML and CSS for setting up the CE.SDK container and basic page styling. Ensure this is included in your project's main HTML file.

```html
<style>
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html, body { height: 100%; font-family: system-ui, -apple-system, sans-serif; }
  #cesdk_container { width: 100%; height: 100%; }
</style>
```

--------------------------------

### Basic CSS Reset and Container Setup

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-concepts-font-size-unit-browser/index.html

Applies a basic CSS reset to html and body elements and sets up the main container for the CE.SDK. Ensure this is included in your project's main stylesheet.

```css
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
}

#cesdk_container {
  width: 100%;
  height: 100%;
}
```

--------------------------------

### Theme API

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-appearance-theming-browser/README.md

This section details the CE.SDK UI API methods for managing themes and scales. You can set and get the current theme, set a fixed scale, or implement a dynamic scale based on viewport conditions.

```APIDOC
## Theme API

### Set theme
```typescript
cesdk.ui.setTheme('light' | 'dark' | 'system');
```

### Get current theme
```typescript
const theme = cesdk.ui.getTheme(); // Returns 'light' or 'dark'
```

### Set fixed scale
```typescript
cesdk.ui.setScale('normal' | 'large' | 'modern');
```

### Set dynamic scale with callback
```typescript
cesdk.ui.setScale(({ containerWidth, isTouch }) => {
  return containerWidth < 600 || isTouch ? 'large' : 'normal';
});
```

### Get current scale
```typescript
const scale = cesdk.ui.getScale();
```
```

--------------------------------

### Get Current CE.SDK Scale

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-appearance-theming-browser/README.md

Retrieves the current visual scale setting of the CE.SDK.

```typescript
const scale = cesdk.ui.getScale();
```

--------------------------------

### Get Current CE.SDK Theme

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-appearance-theming-browser/README.md

Retrieves the currently active theme of the CE.SDK, returning either 'light' or 'dark'.

```typescript
const theme = cesdk.ui.getTheme(); // Returns 'light' or 'dark'
```

--------------------------------

### Clone the Repository

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-illustrator-template-import/README.md

Clone the starter kit repository to begin integration. Navigate into the cloned directory.

```bash
git clone https://github.com/imgly/demo-illustrator-template-import-react-web.git
cd demo-illustrator-template-import-react-web
```

--------------------------------

### Build for Production

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-dynamic-content-set-editing-constraints-browser/README.md

Create a production build of the project.

```bash
npm run build
```

--------------------------------

### Build and Check Quality

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-dynamic-content-set-editing-constraints-server-js/README.md

Build the project and run quality checks.

```bash
npm run qa
```

--------------------------------

### Initialize CreativeEditor SDK with Vanilla JS

Source: https://github.com/imgly/cesdk-web-examples/blob/main/website-demo/index.html

This snippet shows how to import the SDK, fetch a scene, configure the SDK, and create an instance. It enables the settings panel and sets the UI theme to 'system'.

```javascript
import CreativeEditorSDK from 'https://cdn.img.ly/packages/imgly/cesdk-js/latest/index.js';

fetch( 'https://cdn.img.ly/assets/demo/v4/ly.img.templates/print/postcard_1.scene' )
  .then((response) => response.text())
  .then((scene) => {
    let config = {
      locale: 'en',
      role: 'Adopter',
      ui: {
        elements: { }
      }
    };

    CreativeEditorSDK.create('#cesdk_container', config)
      .then( async (instance) => {
        // Enable settings panel
        instance.feature.enable('ly.img.settings');
        // Set theme using the new API - 'system' adapts to OS preference
        instance.ui.setTheme('system');
        // Configure navigation bar actions using the new API
        instance.ui.insertOrderComponent({
          in: 'ly.img.navigation.bar',
          position: 'end'
        }, {
          id: 'ly.img.actions.navigationBar',
          children: [
            // Export actions (the only ones enabled in original config)
            'ly.img.exportImage.navigationBar',
            'ly.img.exportPDF.navigationBar'
          ]
        });

        await instance.loadFromString(scene);
      });
  });

```

--------------------------------

### Local Development with CE.SDK

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-export-save-publish-export-pre-export-validation-browser/README.md

Commands to run the project with a local build of CE.SDK or to build the project using a local CE.SDK.

```bash
# Use local CE.SDK build
npm run dev:local

# Build with local CE.SDK
npm run build:local
```

--------------------------------

### Configure License Key

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-export-audio-browser/README.md

Replace 'YOUR_CESDK_LICENSE_KEY' with your actual CE.SDK license key in this file.

```javascript
license: 'YOUR_CESDK_LICENSE_KEY',
```

--------------------------------

### Local Development with Local CE.SDK Build and Compile

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-export-save-publish-export-pre-export-validation-server-js/README.md

Builds the project using a local build of the CE.SDK. This command compiles the project with the local SDK.

```bash
npm run build:local
```

--------------------------------

### Configure License Key

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-rules-moderate-content-server-js/README.md

Edit the .env file to add your CE.SDK license key.

```bash
CESDK_LICENSE=your_license_key_here
```

--------------------------------

### Local Development with Local CE.SDK Build

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-export-save-publish-export-pre-export-validation-server-js/README.md

Runs the development server using a local build of the CE.SDK. This is useful for testing changes in the SDK itself.

```bash
npm run dev:local
```

--------------------------------

### Configure Soundstripe Proxy URL

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-import-media-from-remote-source-soundstripe-browser/README.md

Create a .env file in your project root and add this line to specify your Soundstripe proxy server URL.

```env
VITE_SOUNDSTRIPE_PROXY_URL=https://your-proxy-server.example.com
```

--------------------------------

### Run Application with Bun

Source: https://github.com/imgly/cesdk-web-examples/blob/main/integrate-with-bun/README.md

Execute your TypeScript application using the Bun runtime.

```bash
bun run index.ts
```

--------------------------------

### Download and Extract CE.SDK Assets

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-illustrator-template-import/README.md

Download the CE.SDK engine assets, including fonts and UI elements, and extract them into the public directory. This step is crucial for the editor to function correctly.

```bash
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/$UBQ_VERSION$/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip
```

--------------------------------

### Check Code Quality

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-dynamic-content-set-editing-constraints-browser/README.md

Verify syntax, formatting, and linting of the codebase.

```bash
npm run check:all
```

--------------------------------

### Lint Project with npm

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-customization-panel-browser/README.md

Runs the linter to check for code style and potential issues. Requires Node.js 22 or higher.

```bash
npm run check:lint
```

--------------------------------

### Capture Hero Image

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-stickers-and-shapes-create-shapes-browser/README.md

Capture a hero image for the project.

```bash
npm run capture-hero
```

--------------------------------

### Capture Hero Images

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-dynamic-content-set-editing-constraints-browser/README.md

Generate hero images for the project.

```bash
npm run capture:hero_image
```

--------------------------------

### Load Scene from Archive URL

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-import-from-scene-file-browser/README.md

Use this method to load templates packaged as ZIP archives. This is the recommended approach for distributing templates.

```typescript
await engine.scene.loadFromArchiveURL(
  'https://cdn.img.ly/assets/templates/starterkits/16-9-fashion-ad.zip'
);
```

--------------------------------

### Load Content into the Editor

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-illustrator-template-import/README.md

Demonstrates various methods for loading content into the CE.SDK editor, including creating a blank canvas, loading from a template archive, a scene file, or an image.

```typescript
// Create a blank design canvas
await cesdk.createDesignScene();
```

```typescript
// Load from a template archive
await cesdk.loadFromArchiveURL('https://example.com/template.zip');
```

```typescript
// Load from a scene file
await cesdk.loadFromURL('https://example.com/scene.json');
```

```typescript
// Load from an image
await cesdk.createFromImage('https://example.com/image.jpg');
```

--------------------------------

### Load Content into Editor

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-premium-templates/README.md

Demonstrates various methods to load content into the design editor, including creating a blank canvas, loading from archives, scene files, or images.

```typescript
await cesdk.createDesignScene();
```

```typescript
await cesdk.loadFromArchiveURL('https://example.com/template.zip');
```

```typescript
await cesdk.loadFromURL('https://example.com/scene.json');
```

```typescript
await cesdk.createFromImage('https://example.com/image.jpg');
```

--------------------------------

### Integrate with AssemblyAI for Transcription

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-export-audio-browser/README.md

Use this code to send audio for transcription to AssemblyAI. Ensure to replace 'YOUR_ASSEMBLYAI_KEY' with your actual API key.

```javascript
const transcription = await transcribeAudio(audioBlob, {
  useMockService: false,
  assemblyAIKey: 'YOUR_ASSEMBLYAI_KEY'
});
```

--------------------------------

### Type Checking with npm

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-customization-panel-browser/README.md

Performs syntax type checking on the project files. Requires Node.js 22 or higher.

```bash
npm run check:syntax
```

--------------------------------

### Load Scene from URL

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-import-from-scene-file-browser/README.md

Load a scene directly from a .scene file URL. Ensure the scene file and its referenced assets remain accessible.

```typescript
await engine.scene.loadFromURL(
  'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_postcard_1.scene'
);
```

--------------------------------

### Configure Output Profile for PDF/X Conversion

Source: https://github.com/imgly/cesdk-web-examples/blob/main/plugins-print-ready-pdf-browser/README.md

Change the output color profile for PDF/X conversion in `src/index.ts`. Available profiles include 'fogra39', 'gracol', 'srgb', and 'custom'.

```typescript
const printReadyPDF = await convertToPDFX(pdfBlob, {
  outputProfile: 'fogra39', // or 'gracol', 'srgb', 'custom'
  title: 'Print-Ready Export'
});
```

--------------------------------

### Load Custom Font from Google Fonts

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-appearance-change-ui-font-browser/README.md

Include a link in the HTML `<head>` to load a custom font, such as Roboto, from Google Fonts. Ensure preconnect is established for performance.

```html
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&display=swap"
  rel="stylesheet"
/>
```

--------------------------------

### Container Styling for CE.SDK

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-customization-panel-browser/index.html

Sets the width and height of the container element for the CE.SDK to occupy the full available space. This is essential for proper layout and rendering of the SDK interface.

```css
#cesdk_container { width: 100%; height: 100%; }
```

--------------------------------

### Basic CSS Reset and Styling

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-customization-navigation-bar-browser/index.html

Applies a basic CSS reset and sets default styles for HTML, body, and the main container. Useful for ensuring consistent rendering across browsers.

```css
CE.SDK Guide: Navigation Bar
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
#cesdk_container { width: 100%; height: 100%; }
.loading { display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 1.2rem;
  color: #666;
}
```

--------------------------------

### Conditionally Apply Transparent Styles for Demo Preview

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-premium-templates/index.html

Applies transparent background styles to the HTML document when the 'demoPreview' query parameter is set to 'true'. This is useful for integrating the editor into a preview environment.

```javascript
if ( new URLSearchParams(window.location.search).get('demoPreview') === 'true' ) { document.documentElement.classList.add('demo-preview'); }
```

```css
html.demo-preview, html.demo-preview body, html.demo-preview #root { background: transparent; background-color: transparent; }
```

```css
html, body { background: white; }
```

--------------------------------

### Fix Code Formatting and Linting

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-dynamic-content-set-editing-constraints-browser/README.md

Automatically fix formatting and linting issues in the codebase.

```bash
npm run fix:all
```

--------------------------------

### Add a Template to the Source

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-premium-templates/README.md

Add a specific template to the previously defined asset source. Include its ID, display label, group, and URIs for the archive and thumbnail.

```typescript
// Add a template to the source
engine.asset.addAssetToSource('my.templates', {
  id: 'template-1',
  label: { en: 'My Template' },
  groups: ['category/business'],
  meta: {
    uri: 'https://example.com/templates/business-card.archive',
    thumbUri: 'https://example.com/templates/business-card-thumb.png'
  }
});
```

--------------------------------

### Set Dynamic CE.SDK Scale

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-appearance-theming-browser/README.md

Configures a dynamic scale for the CE.SDK based on viewport width and touch support. The callback function determines the scale ('large' or 'normal') dynamically.

```typescript
cesdk.ui.setScale(({ containerWidth, isTouch }) => {
  return containerWidth < 600 || isTouch ? 'large' : 'normal';
});
```

--------------------------------

### Basic CSS Reset for CE.SDK Container

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-text-adjust-spacing-browser/index.html

Applies a basic CSS reset to ensure the CE.SDK container occupies the full viewport and prevents default browser margins and padding. This is essential for consistent layout across browsers.

```css
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: contain;
}

#cesdk_container {
  width: 100%;
  height: 100%;
}
```

--------------------------------

### Basic CSS Reset and Styling

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-customization-panel-browser/index.html

Applies a basic CSS reset and sets global styles for the HTML and body elements, including font family and box-sizing. Ensures consistent rendering across browsers.

```css
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; }
```

--------------------------------

### Set CE.SDK Theme

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-appearance-theming-browser/README.md

Sets the visual theme of the CE.SDK to 'light', 'dark', or 'system' preference.

```typescript
cesdk.ui.setTheme('light' | 'dark' | 'system');
```

--------------------------------

### Configure Localization

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-illustrator-template-import/README.md

Customize translations for the CE.SDK editor's UI elements. Set specific translations and then apply the desired locale.

```typescript
cesdk.i18n.setTranslations({
  de: { 'common.save': 'Speichern' }
});
cesdk.i18n.setLocale('de');
```

--------------------------------

### Custom Theme CSS Structure

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-appearance-theming-browser/README.md

Defines custom CSS properties for the CE.SDK's light theme with normal scale. This serves as a reference for theming variables.

```css
.ubq-public[data-ubq-theme='light'][data-ubq-scale='normal'] {
  /* Color properties */
  --ubq-canvas: hsl(320, 30%, 97%);
  --ubq-elevation-1: hsl(320, 25%, 95%);
  /* ... more color properties ... */

  /* Typography properties */
  --ubq-typography-headline-l-size: 16px;
  --ubq-typography-headline-l-line_height: 20px;
  /* ... more typography properties ... */
}
```

--------------------------------

### Set Editor Theme

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-illustrator-template-import/README.md

Configure the visual theme of the CE.SDK editor. Supports 'light', 'dark', or 'system' themes.

```typescript
cesdk.ui.setTheme('dark'); // 'light' | 'dark' | 'system'
```

--------------------------------

### Loading Indicator Styling

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-customization-panel-browser/index.html

Styles a loading indicator element, centering it within the viewport and applying a font size and color. This is typically used to provide feedback to the user while the SDK is initializing.

```css
.loading { display: flex; align-items: center; justify-content: center; height: 100vh; font-size: 1.2rem; color: #666; }
```

--------------------------------

### Configure Premium Templates CDN URL

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-premium-templates/README.md

Set the base URL for your premium templates CDN. This URL will be used to fetch template metadata and archives.

```typescript
// Configure your templates CDN URL
const PREMIUM_TEMPLATES_BASE_URL =
  'https://staticimgly.com/imgly/premium-templates/1.0.0';
```

--------------------------------

### Register Template in Templates Library

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-premium-templates/README.md

Update the CE.SDK's asset library to include the new template source. This makes the templates visible and selectable in the UI.

```typescript
// Register in the templates library
cesdk.ui.updateAssetLibraryEntry('ly.img.templates', {
  sourceIds: ({ currentIds }) => [...currentIds, 'my.templates']
});
```

--------------------------------

### Add Local Asset Source for Templates

Source: https://github.com/imgly/cesdk-web-examples/blob/main/demo-premium-templates/README.md

Programmatically add a local asset source for templates. This function is called when an asset is applied, loading the template archive from its URI.

```typescript
// Add a local asset source for templates
engine.asset.addLocalSource('my.templates', [], async (asset) => {
  // Load the template archive when applied
  await engine.scene.loadFromArchiveURL(asset.meta.uri);
  return undefined;
});
```

--------------------------------

### Uncomment License Line

Source: https://github.com/imgly/cesdk-web-examples/blob/main/plugins-print-ready-pdf-browser/README.md

Uncomment the license line in `src/index.ts` and add your license key to remove the CE.SDK watermark.

```typescript
const config = {
  license: 'your-license-key-here', // Add your license key here
  ui: {
    // ...
  }
};
```

--------------------------------

### Apply Template Preserving Dimensions

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-create-templates-import-from-scene-file-browser/README.md

Apply a template from a URL while maintaining the current page dimensions. Useful for adapting existing designs.

```typescript
await engine.scene.applyTemplateFromURL(
  'https://cdn.img.ly/assets/demo/v3/ly.img.template/templates/cesdk_instagram_photo_1.scene'
);
```

--------------------------------

### Set Custom UI Font Family

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-appearance-change-ui-font-browser/README.md

Apply a custom font to all CE.SDK UI elements by setting the `--ubq-typography-font_family` CSS custom property. Include fallback fonts for reliability.

```css
.ubq-public {
  --ubq-typography-font_family: 'Roboto', sans-serif;
}
```

--------------------------------

### Set Fixed CE.SDK Scale

Source: https://github.com/imgly/cesdk-web-examples/blob/main/guides-user-interface-appearance-theming-browser/README.md

Sets a fixed visual scale for the CE.SDK interface, choosing from 'normal', 'large', or 'modern'.

```typescript
cesdk.ui.setScale('normal' | 'large' | 'modern');
```