Facilitating the Spread of Knowledge and Innovation in Professional Software Development

Write for InfoQ


Choose your language

InfoQ Homepage News Principled API Design at the Heart of Canva’s Apps SDK

Principled API Design at the Heart of Canva’s Apps SDK

Canva created a new plugin framework to allow developers to create apps implementing custom functionality within its product. The team used iterative development and strongly emphasized API design principles to ensure the SDK supporting plugin development was developer-friendly, safe, and evolvable.

Canva launched its App Store in late 2019, enabling developers to create custom extensions using the first-generation plugin framework. Since then, hundreds of custom extensions have been developed, with many becoming quite popular. Following this success, the company wanted to offer app developers even more flexibility.

Martin Cronjé, group engineering lead at Canva, describes the company’s goals that led to the creation of the Apps SDK:

We needed to build a simple yet powerful platform that gives developers the tools to build rich apps. Success with the SDK would mean that we needed to give developers maximum control over the app's user interface while providing access to interoperable APIs that can be mixed and matched within the app.

The vision for the new approach included allowing developers to build complete custom apps rather than simple plugins that can do just one thing (insert, edit, publish). The scope of the new initiative included the integrated app runtime environment and other capabilities for signing HTTP requests, runtime package injection, hot-module reloading, and the new UI kit.

The core of the new plugin architecture is the app runtime environment, which supports custom apps running safely as part of the Canva product. The app, a JavaScript bundle, is loaded into a sandboxed IFrame to prevent it from crashing or corrupting the Canva editor or gaining access to sensitive data rendered in the browser. The app uses the platform's SDK and other dependencies to communicate with the Canva product. Internally, a message bus delivers API request/response payloads between the app and the Canva product. The App Controller then integrates with the message bus and serves as an adapter between App SDK APIs and internal product APIs that evolve over time.

App Runtime Environment (Source: Canva Engineering Blog)

The team opted for an incremental approach toward delivering the new plugin architecture and focused on rapid and feedback-driven development. They initially used AWS S3 buckets to host apps for driving experimentation with internal hackathons and preview releases. At the same time, the company supported active collaboration between sales, partnerships, and support teams and the SDK API team to start drafting initial API specifications, influenced by developer interviews and data insights.

Over time, the team shifted from experimentation to making the new solution production-ready. With that in mind, they wanted to ensure that SDK API design followed the principles of simplicity, safety, evolvability, and consistency. The company also established an API Design Working Group, responsible for devising and socializing API design guidelines and working practices regarding security, observability, analytics, documentation, and developer engagement.

About the Author

Rate this Article