Search Docs
Loading...
Skip to content

Airtable Image Editor for Nuxt.js

CE.SDK can include assets from third-party libraries accessible via API. Search and browse images from an Airtable spreadsheet in the editor.

Airtable Image Editor starter kit showing Airtable image integration interface

10 mins
estimated time
Download
StackBlitz
GitHub

Prerequisites#

Before you begin, make sure you have the following:

New Project
Existing Project

Get Started#

Create a new Nuxt.js application with Airtable Image Editor integration.

Step 1: Create a New Project#

Terminal
npx nuxi@latest init your-project-name
cd your-project-name
npx nuxi@latest init your-project-name
cd your-project-name

Step 2: Clone the Starter Kit#

Clone the starter kit and copy the editor configuration to your project:

Terminal
git clone https://github.com/imgly/starterkit-airtable-asset-source-react-web.git
cp -r starterkit-airtable-asset-source-react-web/app/imgly ./app/imgly
rm -rf starterkit-airtable-asset-source-react-web
git clone https://github.com/imgly/starterkit-airtable-asset-source-react-web.git
cp -r starterkit-airtable-asset-source-react-web/app/imgly ./app/imgly
rm -rf starterkit-airtable-asset-source-react-web

Step 3: Install Dependencies#

Core Editor#

Terminal
npm install @cesdk/cesdk-js
npm install @cesdk/cesdk-js

Airtable Integration#

Terminal
npm install airtable
npm install airtable

Step 4: Download Assets#

Terminal
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/1.73.0/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip
curl -O https://cdn.img.ly/packages/imgly/cesdk-js/1.73.0/imgly-assets.zip
unzip imgly-assets.zip -d public/
rm imgly-assets.zip

Step 5: Create the Editor Component#

Create a client-only Vue component using the .client.vue suffix (e.g., AirtableImageEditor.client.vue):

<script setup lang="ts">
import { initAirtableImageEditor } from '~/imgly';
import CreativeEditor from '@cesdk/cesdk-js/vue';


// Get your API key from your Airtable account settings
const AIRTABLE_API_KEY = 'YOUR_AIRTABLE_API_KEY';


// Wrapper to pass API key to initialization
const initWithApiKey = (cesdk: any) => initAirtableImageEditor(cesdk, { airtableApiKey: AIRTABLE_API_KEY });
</script>


<template>
  <CreativeEditor
    :config="{ baseURL: '/assets' }"
    :init="initWithApiKey"
    width="100vw"
    height="100vh"
  />
</template>

Save this file as components/AirtableImageEditor.client.vue to ensure it only renders on the client.

Step 6: Use the Component#

Import and use the component in your page:

<template>
  <AirtableImageEditor />
</template>


<script setup lang="ts">
import AirtableImageEditor from '~/components/AirtableImageEditor.client.vue';
</script>

SSR Error#

If you encounter the error window is not defined, it means the component is being rendered on the server. CE.SDK requires browser APIs and must run client-side only.

Use either the .client.vue suffix (shown above) or wrap the component with <ClientOnly>:

<template>
  <ClientOnly>
    <AirtableImageEditor />
  </ClientOnly>
</template>

Using Airtable Images#

The editor provides access to images stored in your Airtable database:

Via Dock Panel#

  1. Click the “Airtable” button in the dock (left sidebar)
  2. Browse images or use the search bar to find specific images
  3. Click any image to add it to your design

Via Replace#

  1. Select an image block in the editor
  2. Click “Replace” in the context menu
  3. Choose an image from Airtable to replace the current image

Set Up a Scene#

CE.SDK offers multiple ways to load content into the editor. Choose the method that matches your use case:

src/index.ts
// Create a blank design canvas - starts with an empty design scene
await cesdk.actions.run('scene.create');


// Load from a template archive - restores a previously saved project
await cesdk.loadFromArchiveURL('https://example.com/template.zip');


// Load from an image URL - creates a new scene with the image
await cesdk.createFromImage('https://example.com/image.jpg');


// Load from a scene file - restores a scene from JSON
await cesdk.loadFromURL('https://example.com/scene.json');

Customize (Optional)#

Theming#

CE.SDK supports light and dark themes out of the box, plus automatic system preference detection. Switch between themes programmatically:

src/imgly/config/settings.ts
// 'light' | 'dark' | 'system' | (() => 'light' | 'dark')
cesdk.ui.setTheme('dark');

See Theming for custom color schemes, CSS variables, and advanced styling options.

Localization#

Customize UI labels and add support for multiple languages:

src/imgly/config/i18n.ts
cesdk.i18n.setTranslations({
  en: {
    'libraries.airtable.label': 'My Images',
    'actions.export.image': 'Download Design'
  }
});

See Localization for supported languages and translation key reference.

Key Capabilities#

Airtable Images

Airtable Images

Access images stored in your Airtable database. Browse and search directly within the editor.

Professional Filters

Professional Filters

Apply color grading with LUT filters, duotone effects, and customizable image adjustments.

Text & Typography

Text & Typography

Add styled text with comprehensive typography controls, fonts, and visual effects.

Privacy-First

Privacy-First

All processing happens locally in the browser. No data is sent to external servers.


Troubleshooting#

Editor doesn’t load#

  • Check the container element exists: Ensure your container element is in the DOM before calling create()
  • Verify the baseURL: Assets must be accessible from the CDN or your self-hosted location

SSR Error: “window is not defined”#

CE.SDK requires browser APIs and cannot run during server-side rendering. Use the .client.vue suffix or wrap your component with <ClientOnly>.

Airtable images don’t load#

  • Check your API key: Ensure you have set a valid Airtable API key
  • Check network requests: Open DevTools Network tab and look for failed requests

Watermark appears in production#

  • Add your license key: Set the license property in your configuration
  • Sign up for a trial: Get a free trial license at img.ly/forms/free-trial

Next Steps#