Skip to content

Bubble plugin · Email

The Bubble Email for Canvas plugin in Next.js

Server-side email sending through SendGrid or Postmark.

Partly converts · 2 of 9 parts

By The deBub teamUpdated

On this page

01What it becomes

Server-side email sending through SendGrid or Postmark. Email for Canvas sends emails from your workflows. Its two sending actions become server code that sends through the provider configured in the plugin (SendGrid or Postmark), with the key in an environment variable.

No extra npm package: the generated code uses React, Next.js and browser APIs only.

02What converts

  • Send email (custom HTML) with recipients, sender, reply-to and attachments
  • Send basic email — Airdev’s template is approximated with a plain layout (logo, header, body, button, signature), noted in your report

03Not converted yet

  • SendGrid sender verification and mail-settings actions
  • The legacy and “multiple basic emails” sending actions

Where your app uses one of these, the generated code keeps a marked placeholder in the right place and your report lists it, so it can be finished with the assistant or by any developer. The rest of the plugin works as described above.

04What you set up

  • Add your SendGrid or Postmark key to your hosting’s environment variables.
  • Emails sent from page workflows are flagged in your report: Bubble computed recipients and texts on its server, so review who may trigger them.

05About this plugin

Email for Canvas is made by Airdev (server actions). Bubble’s plugin marketplace counts 120,495 installs (a cumulative counter). See its page on the Bubble marketplace.

Questions

Does the Email for Canvas plugin work outside Bubble?
Not as it is: Bubble plugins only run inside Bubble. In a Next.js app it is replaced by generated code — Server-side email sending through SendGrid or Postmark.
Will my Email for Canvas settings carry over?
Mostly. deBub converts 2 of the plugin’s 9 parts from your .bubble export; anything else is marked in the code and listed in your report. Secret keys are added as environment variables.

The deBub team

We build the Bubble → Next.js compiler behind deBub. Spotted something out of date? Write to hello@debub.io.

All 45 plugins

SendGrid

Copilot / withcopilot.com

Server-side calls to the SendGrid API

Converts

Typed server-side functions in src/server/api-connector.ts

Converts

Toolbox

Not Quite Unicorns

Components and browser helpers; your own JavaScript runs in the browser as before

Partly converts · 9 of 10 parts

Leave Bubble.
Keep building.

The scan is free and shows your exact price. No card needed until you choose to generate.

Start with a free scan