The Designs API offers the ability to manage assets stored in the Twilio SendGrid Design Library.
The Design Library is a feature-rich email layout tool and media repository. You can build designs for all your email needs, including Single Sends, Automations, and Dynamic Templates.
You can also duplicate and then modify one of the pre-built designs provided by Twilio SendGrid to get you started.
The Designs API provides a RESTful interface for creating new designs, retrieving a list of existing designs, duplicating or updating a design, and deleting a design.
This endpoint allows you to duplicate one of the pre-built Twilio SendGrid designs.
Like duplicating one of your existing designs, you are not required to pass any data in the body of a request to this endpoint. If you choose to leave the name
field blank, your duplicate will be assigned the name of the design it was copied from with the text "Duplicate: " prepended to it. This name change is only a convenience, as the duplicate design will be assigned a unique ID that differentiates it from your other designs. You can retrieve the IDs for Twilio SendGrid pre-built designs using the "List SendGrid Pre-built Designs" endpoint.
You can modify your duplicate’s name at the time of creation by passing an updated value to the name
field when making the initial request.
More on retrieving design IDs can be found above.
Bearer <<YOUR_API_KEY_HERE>>
The ID of the pre-built Design you want to duplicate.
The name of the new design.
Duplicate: <original design name>
The editor used in the UI.
code
design
{
"name": "Ahoy, Cake or Pie Cafe!",
"editor": "design"
}
The name of the new design.
Duplicate: <original design name>
The editor used in the UI.
code
design
The HTML content of the Design.
1048576
Plain text content of the Design.
1048576
Default: <generated from html_content if left empty>
{
"id": "abe0877f-a224-21e2-b62e-c789d326cda5",
"name": "Ahoy, Pre-built Design!",
"html_content": "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">\n<html data-editor-version=\"2\" class=\"sg-campaigns\" xmlns=\"http://www.w3.org/1999/xhtml\">\n <head>\n <meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1\">\n <!--[if !mso]><!-->\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=Edge\">\n <!--<![endif]-->\n <!--[if (gte mso 9)|(IE)]>\n <xml>\n <o:OfficeDocumentSettings>\n <o:AllowPNG/>\n <o:PixelsPerInch>96</o:PixelsPerInch>\n </o:OfficeDocumentSettings>\n </xml>\n <![endif]-->\n <!--[if (gte mso 9)|(IE)]>\n <style type=\"text/css\">\n body {width: 600px;margin: 0 auto;}\n table {border-collapse: collapse;}\n table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;}\n img {-ms-interpolation-mode: bicubic;}\n </style>\n<![endif]-->\n <style type=\"text/css\">\n body, p, div {\n font-family: courier, monospace;\n font-size: 16px;\n }\n body {\n color: #FFFFFF;\n }\n body a {\n color: #fe5d61;\n text-decoration: none;\n }\n p { margin: 0; padding: 0; }\n table.wrapper {\n width:100% !important;\n table-layout: fixed;\n -webkit-font-smoothing: antialiased;\n -webkit-text-size-adjust: 100%;\n -moz-text-size-adjust: 100%;\n -ms-text-size-adjust: 100%;\n }\n img.max-width {\n max-width: 100% !important;\n }\n .column.of-2 {\n width: 50%;\n }\n .column.of-3 {\n width: 33.333%;\n }\n .column.of-4 {\n width: 25%;\n }\n @media screen and (max-width:480px) {\n .preheader .rightColumnContent,\n .footer .rightColumnContent {\n text-align: left !important;\n }\n .preheader .rightColumnContent div,\n .preheader .rightColumnContent span,\n .footer .rightColumnContent div,\n .footer .rightColumnContent span {\n text-align: left !important;\n }\n .preheader .rightColumnContent,\n .preheader .leftColumnContent {\n font-size: 80% !important;\n padding: 5px 0;\n }\n table.wrapper-mobile {\n width: 100% !important;\n table-layout: fixed;\n }\n img.max-width {\n height: auto !important;\n max-width: 100% !important;\n }\n a.bulletproof-button {\n display: block !important;\n width: auto !important;\n font-size: 80%;\n padding-left: 0 !important;\n padding-right: 0 !important;\n }\n .columns {\n width: 100% !important;\n }\n .column {\n display: block !important;\n width: 100% !important;\n padding-left: 0 !important;\n padding-right: 0 !important;\n margin-left: 0 !important;\n margin-right: 0 !important;\n }\n .social-icon-column {\n display: inline-block !important;\n }\n }\n </style>\n <!--user entered Head Start-->\n\n <!--End Head user entered-->\n </head>\n <body>\n <center class=\"wrapper\" data-link-color=\"#fe5d61\" data-body-style=\"font-size:16px; font-family:courier, monospace; color:#FFFFFF; background-color:#f2f4fb;\">\n <div class=\"webkit\">\n <table cellpadding=\"0\" cellspacing=\"0\" border=\"0\" width=\"100%\" class=\"wrapper\" bgcolor=\"#f2f4fb\">\n <tr>\n <td valign=\"top\" bgcolor=\"#f2f4fb\" width=\"100%\">\n <table width=\"100%\" role=\"content-container\" class=\"outer\" align=\"center\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n <tr>\n <td width=\"100%\">\n <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\">\n <tr>\n <td>\n <!--[if mso]>\n <center>\n <table><tr><td width=\"600\">\n <![endif]-->\n <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" border=\"0\" style=\"width:100%; max-width:600px;\" align=\"center\">\n <tr>\n <td role=\"modules-container\" style=\"padding:0px 0px 0px 0px; color:#FFFFFF; text-align:left;\" bgcolor=\"#f2f4fb\" width=\"100%\" align=\"left\"><table class=\"module preheader preheader-hide\" role=\"module\" data-type=\"preheader\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"display: none !important; mso-hide: all; visibility: hidden; opacity: 0; color: transparent; height: 0; width: 0;\">\n <tr>\n <td role=\"module-content\">\n <p>You've found the secret!</p>\n </td>\n </tr>\n </table><table class=\"wrapper\" role=\"module\" data-type=\"image\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"table-layout: fixed;\" data-muid=\"98ndJyAY9BSGjoVqrr6FYx\">\n <tbody><tr>\n <td style=\"font-size:6px; line-height:10px; padding:30px 0px 30px 0px;\" valign=\"top\" align=\"left\"><img class=\"max-width\" border=\"0\" style=\"display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:40% !important; width:40%; height:auto !important;\" src=\"https://mc.sendgrid.com/assets/uploads/9d9c1f3d8009c42bbe60c0355f1ed23e86c3f5619173e83a9328b9214e42e1c1d5e009ed5cc4c8f3efedfc33d46bba2f4577b143607025a29add6e89ab4662ad.png\" alt=\"Off Grid Adventures\" width=\"240\" data-responsive=\"true\" data-proportionally-constrained=\"false\"></td>\n </tr>\n </tbody></table><table class=\"wrapper\" role=\"module\" data-type=\"image\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"table-layout: fixed;\" data-muid=\"3Ypdby9Xfsf2rN27zTDEfN\">\n <tbody><tr>\n <td style=\"font-size:6px; line-height:10px; padding:0px 0px 0px 0px;\" valign=\"top\" align=\"center\"><img class=\"max-width\" border=\"0\" style=\"display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;\" src=\"https://mc.sendgrid.com/assets/uploads/e324b295c47223f1a936198fbd4e5d4b239ff86c6d6c89d4d0eb8d7c61028921abfc4901ba607f6dcb7acc7067bb0c6df4313726b14b8274e0b2c98cdf8b58d2.png\" alt=\"\" width=\"600\" data-responsive=\"true\" data-proportionally-constrained=\"false\"></td>\n </tr>\n </tbody></table><table class=\"module\" role=\"module\" data-type=\"text\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"table-layout: fixed;\" data-muid=\"7pyDCmyDaGcm5WsBBSaEgv\" data-mc-module-version=\"2019-10-22\">\n <tbody><tr>\n <td style=\"background-color:#FE5D61; padding:50px 0px 30px 0px; line-height:22px; text-align:inherit;\" height=\"100%\" valign=\"top\" bgcolor=\"#FE5D61\"><div><div style=\"font-family: inherit; text-align: center\"><span style=\"font-size: 24px\">Welcome to the family!</span></div><div></div></div></td>\n </tr>\n </tbody></table><table class=\"module\" role=\"module\" data-type=\"text\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"table-layout: fixed;\" data-muid=\"nSVYnVzPLnGZ4wUdynLiKo\" data-mc-module-version=\"2019-10-22\">\n <tbody><tr>\n <td style=\"background-color:#fe5d61; padding:30px 50px 30px 50px; line-height:22px; text-align:inherit;\" height=\"100%\" valign=\"top\" bgcolor=\"#fe5d61\"><div><div style=\"font-family: inherit; text-align: center\">You've found a community of travelers that are just like you.</div>\n<div style=\"font-family: inherit; text-align: center\"> </div>\n<div style=\"font-family: inherit; text-align: center\">We don't want to be stuck in tourist traps that isolate us from vibrant, local experiences. We want to discover the hidden gems and less-traveled roads of our next destination.</div>\n<div style=\"font-family: inherit; text-align: center\"> </div>\n<div style=\"font-family: inherit; text-align: center\">Ready for your next authentic travel experience?</div><div></div></div></td>\n </tr>\n </tbody></table><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"module\" data-role=\"module-button\" data-type=\"button\" role=\"module\" style=\"table-layout:fixed\" width=\"100%\" data-muid=\"4ywPd9vJ6WFyV1Si75h9vh\"><tbody><tr><td align=\"center\" bgcolor=\"#fe5d61\" class=\"outer-td\" style=\"padding:10px 10px 60px 10px; background-color:#fe5d61;\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" class=\"button-css__deep-table___2OZyb wrapper-mobile\" style=\"text-align:center\"><tbody><tr><td align=\"center\" bgcolor=\"#ffffff\" class=\"inner-td\" style=\"border-radius:6px; font-size:16px; text-align:center; background-color:inherit;\"><a style=\"background-color:#ffffff; border:1px solid #ffffff; border-color:#ffffff; border-radius:3px; border-width:1px; color:#fe5d61; display:inline-block; font-size:16px; font-weight:700; letter-spacing:1px; line-height:40px; padding:12px 20px 12px 20px; text-align:center; text-decoration:none; border-style:solid;\" href=\"\" target=\"_blank\">Browse Gallery</a></td></tr></tbody></table></td></tr></tbody></table><table class=\"wrapper\" role=\"module\" data-type=\"image\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"table-layout: fixed;\" data-muid=\"6jxKSRk9dKQ1Tvi1wtnu8q\">\n <tbody><tr>\n <td style=\"font-size:6px; line-height:10px; padding:0px 0px 0px 0px;\" valign=\"top\" align=\"center\"><img class=\"max-width\" border=\"0\" style=\"display:block; color:#000000; text-decoration:none; font-family:Helvetica, arial, sans-serif; font-size:16px; max-width:100% !important; width:100%; height:auto !important;\" src=\"https://mc.sendgrid.com/assets/uploads/0accac77b1e34c614730ab732317a493478835c96bd549fb2df7a921ec1177fdb30d6d33e1d0a33d8c6c579344890ae408ce13aaed0e478f1fd6d2219d308365.png\" alt=\"\" width=\"600\" data-responsive=\"true\" data-proportionally-constrained=\"false\"></td>\n </tr>\n </tbody></table><table class=\"module\" role=\"module\" data-type=\"spacer\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"table-layout: fixed;\" data-muid=\"iYySZ4rAB78PLoW7vU13Bb\">\n <tbody><tr>\n <td style=\"padding:0px 0px 30px 0px;\" role=\"module-content\" bgcolor=\"\">\n </td>\n </tr>\n </tbody></table><table class=\"module\" role=\"module\" data-type=\"divider\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"table-layout: fixed;\" data-muid=\"mVyZz43HETwfwb72TGh4iy\">\n <tbody><tr>\n <td style=\"padding:0px 0px 0px 0px;\" role=\"module-content\" height=\"100%\" valign=\"top\" bgcolor=\"\">\n <table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" align=\"center\" width=\"100%\" height=\"3px\" style=\"line-height:3px; font-size:3px;\">\n <tbody><tr>\n <td style=\"padding:0px 0px 3px 0px;\" bgcolor=\"#ffffff\"></td>\n </tr>\n </tbody></table>\n </td>\n </tr>\n </tbody></table><table class=\"module\" role=\"module\" data-type=\"spacer\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"table-layout: fixed;\" data-muid=\"sfek66tVLi5d2iy5jmSawj\">\n <tbody><tr>\n <td style=\"padding:0px 0px 30px 0px;\" role=\"module-content\" bgcolor=\"\">\n </td>\n </tr>\n </tbody></table><table class=\"module\" role=\"module\" data-type=\"social\" align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" width=\"100%\" style=\"table-layout: fixed;\" data-muid=\"87277ffe-54ed-4792-94f3-0a973b71c268\">\n <tbody>\n <tr>\n <td valign=\"top\" style=\"padding:0px 0px 0px 0px; font-size:6px; line-height:10px;\" align=\"center\">\n <table align=\"center\" style=\"-webkit-margin-start:auto;-webkit-margin-end:auto;\">\n <tbody><tr align=\"center\"><td style=\"padding: 0px 5px;\" class=\"social-icon-column\">\n <a role=\"social-icon-link\" href=\"https://www.facebook.com/sendgrid/\" target=\"_blank\" alt=\"Facebook\" title=\"Facebook\" style=\"display:inline-block; background-color:#FE5D61; height:30px; width:30px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px;\">\n <img role=\"social-icon\" alt=\"Facebook\" title=\"Facebook\" src=\"https://mc.sendgrid.com/assets/social/white/facebook.png\" style=\"height:30px; width:30px;\" height=\"30\" width=\"30\">\n </a>\n </td><td style=\"padding: 0px 5px;\" class=\"social-icon-column\">\n <a role=\"social-icon-link\" href=\"https://twitter.com/sendgrid?ref_src=twsrc%5egoogle%7ctwcamp%5eserp%7ctwgr%5eauthor\" target=\"_blank\" alt=\"Twitter\" title=\"Twitter\" style=\"display:inline-block; background-color:#FE5D61; height:30px; width:30px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px;\">\n <img role=\"social-icon\" alt=\"Twitter\" title=\"Twitter\" src=\"https://mc.sendgrid.com/assets/social/white/twitter.png\" style=\"height:30px; width:30px;\" height=\"30\" width=\"30\">\n </a>\n </td><td style=\"padding: 0px 5px;\" class=\"social-icon-column\">\n <a role=\"social-icon-link\" href=\"https://www.instagram.com/sendgrid/?hl=en\" target=\"_blank\" alt=\"Instagram\" title=\"Instagram\" style=\"display:inline-block; background-color:#FE5D61; height:30px; width:30px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px;\">\n <img role=\"social-icon\" alt=\"Instagram\" title=\"Instagram\" src=\"https://mc.sendgrid.com/assets/social/white/instagram.png\" style=\"height:30px; width:30px;\" height=\"30\" width=\"30\">\n </a>\n </td><td style=\"padding: 0px 5px;\" class=\"social-icon-column\">\n <a role=\"social-icon-link\" href=\"https://www.pinterest.com/sendgrid/\" target=\"_blank\" alt=\"Pinterest\" title=\"Pinterest\" style=\"display:inline-block; background-color:#FE5D61; height:30px; width:30px; border-radius:2px; -webkit-border-radius:2px; -moz-border-radius:2px;\">\n <img role=\"social-icon\" alt=\"Pinterest\" title=\"Pinterest\" src=\"https://mc.sendgrid.com/assets/social/white/pinterest.png\" style=\"height:30px; width:30px;\" height=\"30\" width=\"30\">\n </a>\n </td></tr></tbody>\n </table>\n </td>\n </tr>\n </tbody>\n </table><div data-role=\"module-unsubscribe\" class=\"module unsubscribe-css__unsubscribe___2CDlR\" role=\"module\" data-type=\"unsubscribe\" style=\"color:#FFFFFF; font-size:12px; line-height:20px; padding:16px 16px 16px 16px; text-align:center;\" data-muid=\"txBUUpmixSjuZ5Ad69p1sX\"><div class=\"Unsubscribe--addressLine\"><p class=\"Unsubscribe--senderName\" style=\"font-family:arial,helvetica,sans-serif; font-size:12px; line-height:20px;\">{{Sender_Name}}</p><p style=\"font-family:arial,helvetica,sans-serif; font-size:12px; line-height:20px;\"><span class=\"Unsubscribe--senderAddress\">{{Sender_Address}}</span>, <span class=\"Unsubscribe--senderCity\">{{Sender_City}}</span>, <span class=\"Unsubscribe--senderState\">{{Sender_State}}</span> <span class=\"Unsubscribe--senderZip\">{{Sender_Zip}}</span></p></div><p style=\"font-family:arial,helvetica,sans-serif; font-size:12px; line-height:20px;\"><a class=\"Unsubscribe--unsubscribeLink\" href=\"{{{unsubscribe}}}\" style=\"\">Unsubscribe</a> - <a href=\"{{{unsubscribe_preferences}}}\" target=\"_blank\" class=\"Unsubscribe--unsubscribePreferences\" style=\"\">Unsubscribe Preferences</a></p></div></td>\n </tr>\n </table>\n <!--[if mso]>\n </td>\n </tr>\n </table>\n </center>\n <![endif]-->\n </td>\n </tr>\n </table>\n </td>\n </tr>\n </table>\n </td>\n </tr>\n </table>\n </div>\n </center>\n </body>\n </html>",
"plain_content": "You've found the secret!\n\nWelcome to the family!\n\nYou've found a community of travelers that are just like you.\n\nWe don't want to be stuck in tourist traps that isolate us from vibrant, local experiences. We want to discover the hidden gems and less-traveled roads of our next destination.\n\nReady for your next authentic travel experience?\n\nBrowse Gallery\n\n( https://www.facebook.com/sendgrid/ ) ( https://twitter.com/sendgrid?ref_src=twsrc%5egoogle%7ctwcamp%5eserp%7ctwgr%5eauthor ) ( https://www.instagram.com/sendgrid/?hl=en ) ( https://www.pinterest.com/sendgrid/ )\n\n{{Sender_Name}}\n\n{{Sender_Address}} , {{Sender_City}} , {{Sender_State}} {{Sender_Zip}}\n\nUnsubscribe ( {{{unsubscribe}}} ) - Unsubscribe Preferences ( {{{unsubscribe_preferences}}} )",
"generate_plain_content": true,
"thumbnail_url": "//us-east-2-production-thumbnail-bucket.s3.amazonaws.com/a85b4b202ff28094828f11ff472360caecf67ead2d186b69b45c904b9251aa0b.png",
"subject": "Welcome to the family!",
"created_at": "2021-04-30T19:15:28Z",
"updated_at": "2021-04-30T19:15:28Z",
"editor": "design",
"categories": []
}
_23const client = require('@sendgrid/client');_23client.setApiKey(process.env.SENDGRID_API_KEY);_23_23const id = "f15982c1-a82c-4e87-a6b2-a4a63b4b7644";_23const data = {_23 "name": "Ahoy, Cake or Pie Cafe!",_23 "editor": "design"_23};_23_23const request = {_23 url: `/v3/designs/pre-builts/${id}`,_23 method: 'POST',_23 body: data_23}_23_23client.request(request)_23 .then(([response, body]) => {_23 console.log(response.statusCode);_23 console.log(response.body);_23 })_23 .catch(error => {_23 console.error(error);_23 });