PolyLingo Express

PolyLingo Express is a seamless Adobe Express Add-on that empowers creators to instantly translate and localize their text content into multiple languages — directly on the canvas.

Comment

🧠 Inspiration

Design knows no boundaries — but language often does. Many creators, marketers, and educators design content in English but want to reach global audiences. Manually translating and adjusting layouts for multilingual designs is time-consuming and error-prone.

We wanted to solve that by enabling 1-click translation and localization right inside Adobe Express, preserving text styles, directionality (LTR/RTL), and design layout — without switching tools.

💡 What it does

PolyLingo Express is an AI-powered Adobe Express Add-on that allows users to:

Translate selected or typed text into 200+ languages

Automatically adjust font size, alignment, and text direction (e.g., for Arabic or Hindi)

Instantly insert the translated text as a styled text layer on the canvas

Maintain design aesthetics with zero layout breaking

Languages supported include French, Spanish, Arabic, Hindi, German, and more — powered by Xenova’s NLLB-200 AI model running right in the browser.

🏗️ How we built it

We used the latest Adobe Express Add-ons SDK with:

🧩 manifest.json to define the add-on’s structure and permissions

🖼️ index.html + index.js to build the UI for text input, language selection, and translation trigger

🧠 @xenova/transformers running NLLB-200-distilled-600M for multilingual translation

✍️ code.js using express-document-sdk to create and style translated text layers on the canvas

🧪 Extensive testing with RTL (Right-to-Left) language support for Arabic and Hebrew

The entire solution runs client-side, with no backend or external API dependencies, ensuring fast and private translation.

🚧 Challenges we ran into

Font style inconsistencies: Some text layers didn’t expose textStyle, causing style application errors

Text directionality issues: Handling RTL alignment correctly on the canvas required custom logic

Model loading time: Hugging Face translation models take a few seconds to load in-browser — we had to gracefully handle UI loading states

SDK quirks: Integrating with the sandbox and panel APIs while maintaining compatibility with manifest v2

🏆 Accomplishments that we're proud of

Successfully translated and inserted styled text in multiple scripts and directions

Handled both LTR and RTL text rendering automatically

Used Hugging Face Transformers fully in-browser, no backend!

Built a beautiful UI and functional Add-on within the constraints of Adobe’s SDK

📚 What we learned

Deep understanding of the Adobe Express Add-on SDK, sandbox runtime, and document APIs

How to load and use Hugging Face Transformer models client-side without breaking UX

The importance of accounting for different language directionality and scripts in UI/UX

How to debug and solve text layer rendering issues using editor.createText()

🔮 What's next for PolyLingo Express

🌍 Add auto language detection using AI to remove the need for manual source language input

📝 Allow translation of existing selected text layers, not just manual input

🎨 Add support for font substitution based on language/script (e.g., use Noto fonts for Hindi/Arabic)

🧵 Enable multi-line translations that respect line breaks and wrapping

☁️ Option to export translations to .srt or .csv for use outside Adobe Express

🧩 Submit as a published Add-on on Adobe Express marketplace for global creators!

Built With

Share this project:

Updates