Building a Calligraphy Plugin for Adobe Express

Adobe Express is growing rapidly as a web-based design tool, and its add-on ecosystem offers opportunities for specialized functionality. This guide walks through building a calligraphy generation add-on using the Studio99 API.

Why Build for Adobe Express?

• Growing user base — Adobe Express is Adobe's answer to Canva, with millions of users
• Add-on marketplace — Listed add-ons get organic discovery
• Simple SDK — Adobe's add-on SDK is well-documented and React-based
• Revenue potential — Monetize through your own subscription or Studio99 API tiers

Architecture Overview

Your add-on will:

1. Render a UI panel inside Adobe Express
2. Accept text input from the user
3. Call the Studio99 API to generate calligraphy
4. Display results in the panel
5. Add the selected result to the user's canvas

Getting Started

Prerequisites

• Node.js 18+
• Adobe Express developer account
• Studio99 API key (get one here)
• Basic React knowledge

Project Setup

Adobe Express add-ons use a specific project structure:

my-calligraphy-addon/
  src/
    index.tsx        # Entry point
    App.tsx          # Main component
    api.ts           # Studio99 API client
  manifest.json      # Add-on configuration

API Integration

Calling the Studio99 API

const API_URL = 'https://studio99.app/api/v1';

export async function generateCalligraphy(
  text: string,
  language: string,
  apiKey: string
) {
  const response = await fetch(`${API_URL}/generate`, {
    method: 'POST',
    headers: {
      'X-API-Key': apiKey,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      text,
      language,
      count: 6,
      format: 'svg',
    }),
  });

  return response.json();
}

Adding Results to Canvas

Use Adobe Express's Document API to add the generated calligraphy:

import { editor } from 'express-document-sdk';

async function addToCanvas(svgData: string) {
  // Convert SVG to blob
  const blob = new Blob([svgData], { type: 'image/svg+xml' });

  // Add to the current page
  const page = editor.context.currentPage;
  // Use Adobe's image import API
  // Implementation depends on SDK version
}

UI Design Patterns

Input Panel

Keep the UI simple and focused:

1. Text input — Single text field with language selector
2. Generate button — Clear call to action
3. Results grid — Show 4-6 results in a scrollable grid
4. Click to add — Single click adds calligraphy to canvas

Best Practices

• Show a loading state during API calls
• Cache results to avoid redundant API calls
• Handle errors gracefully (network issues, API limits)
• Provide clear feedback when calligraphy is added to canvas

Studio99's Own Adobe Express Add-on

Studio99 has already built a production add-on for Adobe Express: CalliGen for Adobe Express. You can:

• Use it as a reference implementation
• Study its UX patterns
• Build complementary functionality on top of the same API

Conclusion

Building a calligraphy add-on for Adobe Express is straightforward with the Studio99 API. The combination of Adobe's React-based SDK and Studio99's REST API makes it possible to go from idea to published add-on quickly.

View API Documentation →

Try CalliGen for Adobe Express →