{"id":39011,"date":"2024-04-02T20:15:22","date_gmt":"2024-04-02T14:45:22","guid":{"rendered":"https:\/\/email.uplers.com\/blog\/?p=39011"},"modified":"2024-04-04T18:48:35","modified_gmt":"2024-04-04T13:18:35","slug":"cannoli-vs-kombai-for-seamless-email-coding","status":"publish","type":"post","link":"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/","title":{"rendered":"Cannoli vs. Kombai \u2013 Which Is A Better Substitute for Manual Email Coding? Our Verdict"},"content":{"rendered":"\n<p>In our day-to-day email development process, manual coding takes up a lot of time and effort. We need to code and test across various email clients to ensure a consistent look. We also have to use workarounds and additional code to achieve the exact design.<\/p>\n\n\n\n<p>Other problems include delays in sending emails, limited iteration, and lost opportunity costs. The team was spending hours waiting for updates from each other.&nbsp;<\/p>\n\n\n\n<p>This \u201cconveyor belt approach\u201d just wasn\u2019t working any more. So we decided to call out the elephant in the room. The only alternative to tardy workarounds was AI.&nbsp;<\/p>\n\n\n\n<p>We explored a number of AI tools before hitting on Cannoli and Kombai. Our aim was to reduce the development time and effort by 50%. How did these tools fare? Keep reading!<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cannoli<\/strong><\/h2>\n\n\n\n<p><a href=\"https:\/\/cannoli.app\/platform\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Cannoli<\/a> is an AI tool that specializes in transforming Figma files into MJML email code. This eliminates the need for developers to code from scratch based on the Figma mockup.&nbsp;<\/p>\n\n\n\n<p>By adhering to key guidelines for Figma templates, we could transition our designs into email-ready code. Here\u2019s what the process looks like:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Name all your rows as mj-section and all columns as mj-columns. Note that mj-column must be placed inside mj-rows, and all your content should nest inside mj-rows.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"218\" height=\"92\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image3.png\" alt=\"Ensure proper nesting: mj-columns within mj-rows with Cannoli, AI tool\" class=\"wp-image-39012\"\/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Make sure that your mj-rows and mj-columns have auto layout enabled. <a href=\"https:\/\/help.figma.com\/hc\/en-us\/articles\/5731482952599-Using-auto-layout#:~:text=If%20you%20select%20objects%20that,layout%20with%20a%20frame%20selected.\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Learn more about Auto layout in Figma<\/a>.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"255\" height=\"154\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image8.png\" alt=\"Auto Enabled mj-rows and mj-columns\" class=\"wp-image-39013\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image8.png 255w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image8-232x140.png 232w\" sizes=\"auto, (max-width: 255px) 100vw, 255px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Next, add your content in your mj-column. Text, images, buttons, dividers \u2013 all these must be renamed to mj-text, mj-image, mj-buttons, and mj-divider, respectively.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"231\" height=\"251\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image9.png\" alt=\"Naming elements in your mj-column\n\" class=\"wp-image-39014\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image9.png 231w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image9-129x140.png 129w\" sizes=\"auto, (max-width: 231px) 100vw, 231px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Finally, go to cannoli.app. Click on &#8220;New File.&#8221; Enter a filename, and include the Figma link of the design that you just created. Select the correct page and frames. Then click on &#8220;Create File.&#8221; Cannoli will generate the email code for you.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image7.png\" alt=\" Generate email code with Cannoli\" class=\"wp-image-39015\" width=\"815\" height=\"501\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image7.png 815w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image7-300x184.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image7-768x472.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image7-228x140.png 228w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image7-624x384.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image7-600x369.png 600w\" sizes=\"auto, (max-width: 815px) 100vw, 815px\" \/><\/figure><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Two Ways of Using Cannoli<\/h2>\n\n\n\n<p>There are two principal ways of using Cannoli. One is by importing designs from Figma. The other is by using the Cannoli Figma plugin.&nbsp;<\/p>\n\n\n\n<p>In the first method, you take your existing Figma design file and upload it directly to the Cannoli app. That done, Cannoli translates your design into clean, <a href=\"https:\/\/email.uplers.com\/custom-email-templates-design-coding\/\" target=\"_blank\" rel=\"noreferrer noopener\">responsive email-ready code<\/a>.&nbsp;<\/p>\n\n\n\n<p>The second method involves using a plugin installed within Figma. With the plugin active, you can select design elements within the Figma file, and designate them for Cannoli conversion. You can then directly export the code, or send it to the Cannoli app for more editing.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Advantages of Cannoli<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Automatic generation of MJML and HTML code<\/strong>: Instead of writing HTML and CSS based on Figma designs, Cannoli automates the translation, without any errors.<br \/><\/li><li><strong>Ease of export<\/strong>: Cannoli allows for a smooth transition from design to development. Once it generates the code, you can easily import it to your chosen platform.<br \/><\/li><li><strong>Direct Integration with ESPs<\/strong>: Cannoli offers direct integration with ESPs like Klaviyo and Mailchimp. You can upload the code into your <a href=\"https:\/\/email.uplers.com\/blog\/tips-for-successful-email-marketing-campaign\/\" target=\"_blank\" rel=\"noreferrer noopener\">email campaign creation<\/a> process.&nbsp;<\/li><\/ul>\n\n\n<div class=\"banner_wrapper\" style=\"\"><div class=\"banner  banner-25198 bottom vert custom-banners-theme-default_style\" style=\"\"><a class=\"custom_banners_big_link\"  target=\"_blank\"  href=\"https:\/\/email.uplers.com\/custom-email-templates-design-coding\/\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"200\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2021\/03\/5.jpg\" class=\"attachment-full size-full\" alt=\"Need help with the design and coding of your emails?\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2021\/03\/5.jpg 800w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2021\/03\/5-300x75.jpg 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2021\/03\/5-768x192.jpg 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2021\/03\/5-624x156.jpg 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Limitations of Cannoli<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Cannoli does not support background images. During code generation, the app converts background images into banners.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"543\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image14-1024x543.png\" alt=\" Limitations of Cannoli\n\" class=\"wp-image-39016\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image14-1024x543.png 1024w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image14-300x159.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image14-768x408.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image14-264x140.png 264w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image14-624x331.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image14-600x318.png 600w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image14.png 1125w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Cannoli tends to segregate elements into separate sections, potentially leading to increased code length. For example, we wanted to generate the code for this section of an email.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"424\" height=\"252\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image13.png\" alt=\"Limitations of Cannoli\" class=\"wp-image-39017\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image13.png 424w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image13-300x178.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image13-236x140.png 236w\" sizes=\"auto, (max-width: 424px) 100vw, 424px\" \/><\/figure><\/div>\n\n\n\n<p>This is how the generated code looks like.<\/p>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"859\" height=\"616\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image4.png\" alt=\"Generated code\" class=\"wp-image-39018\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image4.png 859w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image4-300x215.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image4-768x551.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image4-195x140.png 195w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image4-624x447.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image4-600x430.png 600w\" sizes=\"auto, (max-width: 859px) 100vw, 859px\" \/><\/figure><\/div>\n\n\n\n<p>As we can see, the plugin has created three separate mj-sections where only one mj-section was needed. We could have placed the header text and paragraph text in a single section and utilized mj-table to code for two CTAs.<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Cannoli does not provide inherent left and right padding for content, relying on column width adjustments. So, placing multiple body components within a single section may be limited. Take a look at the following code.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"871\" height=\"522\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image5.png\" alt=\"How to Generate code\n\" class=\"wp-image-39019\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image5.png 871w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image5-300x180.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image5-768x460.png 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image5-234x140.png 234w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image5-624x374.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image5-600x360.png 600w\" sizes=\"auto, (max-width: 871px) 100vw, 871px\" \/><\/figure><\/div>\n\n\n\n<p>The plugin often provides padding in the mj-section and mj-column to adjust the content. This makes it difficult to place multiple components in the same section as they might not be displayed correctly.&nbsp;<\/p>\n\n\n\n<p>Conversely, by setting the padding of both the mj-section and mj-column to 0px and applying padding directly to the content elements such as images, text, buttons, etc., we can effectively place multiple contents in a single section.<\/p>\n\n\n\n<p><strong>N.B.<\/strong> There might be occasions when translating a Figma design element into MJML might not be feasible.&nbsp;<\/p>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"742\" height=\"245\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image6.png\" alt=\"Figma design element\" class=\"wp-image-39020\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image6.png 742w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image6-300x99.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image6-624x206.png 624w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image6-600x198.png 600w\" sizes=\"auto, (max-width: 742px) 100vw, 742px\" \/><\/figure><\/div>\n\n\n\n<p>Coding the above section using MJML may be challenging and might not yield the desired output. Instead, we can code the section using HTML table elements such as <strong>&lt;tr&gt; <\/strong>and <strong>&lt;td&gt;<\/strong>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Our Verdict on Cannoli<\/h2>\n\n\n\n<p>Manually coding a design template using the MJML framework takes around 3-4 hours. This includes the time needed to resolve rendering issues, along with ensuring email responsiveness. The time frame may also depend on your familiarity with MJML.&nbsp;<\/p>\n\n\n\n<p>But with the help of the Cannoli plugin, the same template can be completed in 2 to 3 hours. This includes the final adjustments required in the exported code.&nbsp;<\/p>\n\n\n\n<p>This duration will also depend on one&#8217;s proficiency with Figma&#8217;s Auto layout feature. Using Cannoli, we could save up to one hour in the overall email development time.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Kombai<\/strong><\/h2>\n\n\n\n<p>Kombai, a generative AI tool, simplifies the process of <a href=\"https:\/\/email.uplers.com\/blog\/create-html-email\/\" target=\"_blank\" rel=\"noreferrer noopener\">generating HTML emails <\/a>and web code from design templates. Employing deep learning and heuristic models, Kombai generates HTML emails for designs in a single click.&nbsp;<\/p>\n\n\n\n<p>Kombai makes use of logical <strong>&lt;div&gt;<\/strong> structures and class and component names. So instead of writing <strong>&lt;div&gt; <\/strong>for a navigation bar, you might use <strong>&lt;nav&gt;<\/strong>. Similarly, you might replace a class named <strong>button1<\/strong> with <strong>primary-button<\/strong> or <strong>cart-button<\/strong>.&nbsp;<\/p>\n\n\n\n<p>The tool can also automatically generate CSS code using Flexbox. Without Kombai, you\u2019d have to write manual CSS codes to achieve proper alignment and spacing. Here\u2019s how the process looks like:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Log in to Kombai.<br \/><\/li><li>Navigate to the Figma tool, and activate the Kombai plugin.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"455\" height=\"351\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image1.png\" alt=\"Activate the Kombai plugin\n\" class=\"wp-image-39021\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image1.png 455w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image1-300x231.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image1-181x140.png 181w\" sizes=\"auto, (max-width: 455px) 100vw, 455px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>You should then see the following popup. Select the desired frame within Figma.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"597\" height=\"799\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image10.png\" alt=\"frame in Figma\" class=\"wp-image-39022\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image10.png 597w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image10-224x300.png 224w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image10-105x140.png 105w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image10-448x600.png 448w\" sizes=\"auto, (max-width: 597px) 100vw, 597px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Choose the design you wish to convert into HTML code.<br \/><\/li><li>Customize settings within Kombai as per your requirements. These include adding a title, setting the preview text, providing the Alt-text, etc.&nbsp;<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"588\" height=\"792\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image2.png\" alt=\"KOMBAI SETTINGS\n\" class=\"wp-image-39023\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image2.png 588w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image2-223x300.png 223w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image2-104x140.png 104w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image2-445x600.png 445w\" sizes=\"auto, (max-width: 588px) 100vw, 588px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"582\" height=\"392\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image11.png\" alt=\"KOMBAI SETTINGS\n\" class=\"wp-image-39024\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image11.png 582w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image11-300x202.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image11-208x140.png 208w\" sizes=\"auto, (max-width: 582px) 100vw, 582px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"569\" height=\"390\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image17.png\" alt=\"KOMBAI SETTINGS\n\" class=\"wp-image-39025\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image17.png 569w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image17-300x206.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image17-204x140.png 204w\" sizes=\"auto, (max-width: 569px) 100vw, 569px\" \/><\/figure><\/div>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"557\" height=\"357\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image12.png\" alt=\"KOMBAI SETTINGS\n\" class=\"wp-image-39026\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image12.png 557w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image12-300x192.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image12-218x140.png 218w\" sizes=\"auto, (max-width: 557px) 100vw, 557px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>Save your settings.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"602\" height=\"63\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image16.png\" alt=\"Save your Settings in KOMBAI \" class=\"wp-image-39027\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image16.png 602w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image16-300x31.png 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image16-600x63.png 600w\" sizes=\"auto, (max-width: 602px) 100vw, 602px\" \/><\/figure><\/div>\n\n\n\n<ul class=\"wp-block-list\"><li>You can now directly proceed to download the generated file.<\/li><\/ul>\n\n\n\n<div class=\"wp-block-image border1-black\"><figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"589\" height=\"655\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image15.png\" alt=\"KOMBAI HTML CODE FROM ANY DESIGN IN A CLICK\n\" class=\"wp-image-39028\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image15.png 589w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image15-270x300.png 270w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image15-126x140.png 126w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image15-540x600.png 540w\" sizes=\"auto, (max-width: 589px) 100vw, 589px\" \/><\/figure><\/div>\n\n\n\n<p><strong>N.B.<\/strong> Any additional modifications, such as layout adjustments for mobile view or code enhancements, will need to be done manually outside of the Kombai tool.&nbsp;<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Advantages of Kombai<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li>Kombai generates HTML emails in a single click, using a table structure and CSS widely supported across major email clients.<br \/><\/li><li>The tool does not require design constraints or specific components, allowing flexibility in design creation.<br \/><\/li><li>The auto-generated code works on major ESPs and email clients, including Outlook.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Limitations of Kombai<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Dark Mode Compatibility<\/strong>: Manual addition of dark-mode media queries may be required.<br \/><\/li><li><strong>Responsiveness<\/strong>: Additional effort may be needed to make templates responsive.<br \/><\/li><li><strong>Limited Element Support<\/strong>: Certain elements may not be fully supported, necessitating manual coding.<br \/><\/li><li><strong>Background Images<\/strong>: MSO issues may occur with text or CTA over images, causing rendering differences in Outlook.<br \/><\/li><li><strong>Not browser-agnostic<\/strong>: Kombai requires Chromium-based browsers.<br \/><\/li><\/ul>\n\n\n\n<p><strong>For desktop use only<\/strong>: Currently, Kombai does not work on mobile.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Our Verdict on Kombai<\/h2>\n\n\n\n<p>While Kombai simplifies HTML email generation with its AI-driven approach, challenges remain in ensuring responsiveness and resolving rendering issues.&nbsp;<\/p>\n\n\n\n<p>Manual coding for HTML takes anywhere from 3 to 5 hours based on the design complexity and experience level of HTML developers. Our experiment revealed that with Kombai, it took the same amount of time, more or less, to complete the same template.<\/p>\n\n\n<div class=\"banner_wrapper\" style=\"\"><div class=\"banner  banner-17407 bottom vert custom-banners-theme-default_style\" style=\"\"><a class=\"custom_banners_big_link\"  target=\"_blank\"  href=\"https:\/\/email.uplers.com\/custom-email-templates-design-coding\/\"><img loading=\"lazy\" decoding=\"async\" width=\"800\" height=\"200\" src=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/04\/custom-email-design-coding.jpg\" class=\"attachment-full size-full\" alt=\"\" srcset=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/04\/custom-email-design-coding.jpg 800w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/04\/custom-email-design-coding-300x75.jpg 300w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/04\/custom-email-design-coding-768x192.jpg 768w, https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2018\/04\/custom-email-design-coding-624x156.jpg 624w\" sizes=\"auto, (max-width: 800px) 100vw, 800px\" \/><\/a><\/div><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Which One Should You Go with?<\/h2>\n\n\n\n<p>Using Cannoli requires a certain amount of familiarity with Figma. This is because the process involves naming email components according to the MJML structure. One also needs to configure the auto-layout feature in the design. This is in fact what enables Cannoli to generate mobile-responsive email code.&nbsp;<\/p>\n\n\n\n<p>Depending on your familiarity with Figma, as well as the complexity of design, setting auto-layout and naming sections in Figma in alignment with MJML takes around 15-45 minutes.&nbsp;<\/p>\n\n\n\n<p>Kombai, on the other hand, doesn\u2019t require any familiarity with Figma. This makes it an excellent choice for email marketers targeting desktop users. The main drawback of Kombai is it generates non-responsive code. So you\u2019d have to create the mobile layout entirely from scratch.<\/p>\n\n\n\n<p>So which one is better? We\u2019d go for Cannoli. But ultimately, it depends on your workflow, needs, and preferences. If you are familiar with Figma, feel free to try Kombai. Otherwise, go for Cannoli.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Wrapping Up!<\/h2>\n\n\n\n<p>Using AI does not make manual intervention redundant. These tools can generate responsive code in much less time than their human counterparts; but where there are limitations, your development team must intervene.&nbsp;<\/p>\n\n\n\n<p>However, this remains true: you can save a lot of time using these AI tools. You no longer need to code from scratch, which is a great time-saver in itself. Plus, you don\u2019t need many brains and conflicting schedules to get your work done.&nbsp;<\/p>\n\n\n\n<p>Want to learn more about AI tools? Take a look at how we\u2019re <a href=\"https:\/\/email.uplers.com\/blog\/optimize-email-template-coding-with-marka\/\" target=\"_blank\" rel=\"noreferrer noopener\">optimizing the email template coding process using Marka<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Gmail\u2019s latest spam updates needn\u2019t freak you out. Dive into this exhaustive article to know how your organization can adapt like a chameleon. <\/p>\n","protected":false},"author":86,"featured_media":39029,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[382],"tags":[],"class_list":["post-39011","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-email-coding"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Optimizing Workflow: Cannoli vs. Kombai for Email Coding<\/title>\n<meta name=\"description\" content=\"Dive into AI-powered email development with Cannoli and Kombai. Discover their features, and advantages, and find the perfect fit for your email coding needs.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Optimizing Workflow: Cannoli vs. Kombai for Email Coding\" \/>\n<meta property=\"og:description\" content=\"Dive into AI-powered email development with Cannoli and Kombai. Discover their features, and advantages, and find the perfect fit for your email coding needs.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/\" \/>\n<meta property=\"og:site_name\" content=\"Email Uplers\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/email.uplers\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-04-02T14:45:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-04T13:18:35+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/Blog-feature-image-Cannoli-Kombai-tool-comparison-Dhrupal-1-540x282.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"540\" \/>\n\t<meta property=\"og:image:height\" content=\"282\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Dhrupalsinh Barad\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:site\" content=\"@email_uplers\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Dhrupalsinh Barad\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/\",\"name\":\"Optimizing Workflow: Cannoli vs. Kombai for Email Coding\",\"isPartOf\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/Blog-feature-image-Cannoli-Kombai-tool-comparison-Dhrupal-1.jpg\",\"author\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/ca2c04d9c00e6e256697e5a14c429f39\"},\"description\":\"Dive into AI-powered email development with Cannoli and Kombai. Discover their features, and advantages, and find the perfect fit for your email coding needs.\",\"breadcrumb\":{\"@id\":\"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/#primaryimage\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/Blog-feature-image-Cannoli-Kombai-tool-comparison-Dhrupal-1.jpg\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/Blog-feature-image-Cannoli-Kombai-tool-comparison-Dhrupal-1.jpg\",\"width\":1170,\"height\":470,\"caption\":\"Cannoli vs. Kombai for Email Coding\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/email.uplers.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Cannoli vs. Kombai \u2013 Which Is A Better Substitute for Manual Email Coding? Our Verdict\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#website\",\"url\":\"https:\/\/email.uplers.com\/blog\/\",\"name\":\"Email Uplers\",\"description\":\"Email Marketing Blog\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/email.uplers.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/ca2c04d9c00e6e256697e5a14c429f39\",\"name\":\"Dhrupalsinh Barad\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image11-1-96x96.png\",\"contentUrl\":\"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image11-1-96x96.png\",\"caption\":\"Dhrupalsinh Barad\"},\"description\":\"As a seasoned project manager at Mavlers, I bring over nine years of expertise in Project Management, Email Marketing and automation, and Client Servicing. My enthusiasm lies in exploring emerging technologies, which I believe hold immense potential to transform our world positively. When I'm not busy solving problems for our clients, managing teams, or managing projects, you can find me lost in a good book or grooving to dance tracks. Helping others thrive and adding value wherever I can is what keeps me going.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/in\/dhrupalsinhbarad\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Optimizing Workflow: Cannoli vs. Kombai for Email Coding","description":"Dive into AI-powered email development with Cannoli and Kombai. Discover their features, and advantages, and find the perfect fit for your email coding needs.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/","og_locale":"en_US","og_type":"article","og_title":"Optimizing Workflow: Cannoli vs. Kombai for Email Coding","og_description":"Dive into AI-powered email development with Cannoli and Kombai. Discover their features, and advantages, and find the perfect fit for your email coding needs.","og_url":"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/","og_site_name":"Email Uplers","article_publisher":"https:\/\/www.facebook.com\/email.uplers\/","article_published_time":"2024-04-02T14:45:22+00:00","article_modified_time":"2024-04-04T13:18:35+00:00","og_image":[{"width":540,"height":282,"url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/Blog-feature-image-Cannoli-Kombai-tool-comparison-Dhrupal-1-540x282.jpg","type":"image\/jpeg"}],"author":"Dhrupalsinh Barad","twitter_card":"summary_large_image","twitter_creator":"@email_uplers","twitter_site":"@email_uplers","twitter_misc":{"Written by":"Dhrupalsinh Barad","Est. reading time":"10 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/","url":"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/","name":"Optimizing Workflow: Cannoli vs. Kombai for Email Coding","isPartOf":{"@id":"https:\/\/email.uplers.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/#primaryimage"},"image":{"@id":"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/#primaryimage"},"thumbnailUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/Blog-feature-image-Cannoli-Kombai-tool-comparison-Dhrupal-1.jpg","author":{"@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/ca2c04d9c00e6e256697e5a14c429f39"},"description":"Dive into AI-powered email development with Cannoli and Kombai. Discover their features, and advantages, and find the perfect fit for your email coding needs.","breadcrumb":{"@id":"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/#primaryimage","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/Blog-feature-image-Cannoli-Kombai-tool-comparison-Dhrupal-1.jpg","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/Blog-feature-image-Cannoli-Kombai-tool-comparison-Dhrupal-1.jpg","width":1170,"height":470,"caption":"Cannoli vs. Kombai for Email Coding"},{"@type":"BreadcrumbList","@id":"https:\/\/email.uplers.com\/blog\/cannoli-vs-kombai-for-seamless-email-coding\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/email.uplers.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Cannoli vs. Kombai \u2013 Which Is A Better Substitute for Manual Email Coding? Our Verdict"}]},{"@type":"WebSite","@id":"https:\/\/email.uplers.com\/blog\/#website","url":"https:\/\/email.uplers.com\/blog\/","name":"Email Uplers","description":"Email Marketing Blog","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/email.uplers.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/ca2c04d9c00e6e256697e5a14c429f39","name":"Dhrupalsinh Barad","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/email.uplers.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image11-1-96x96.png","contentUrl":"https:\/\/email.uplers.com\/blog\/wp-content\/uploads\/2024\/04\/image11-1-96x96.png","caption":"Dhrupalsinh Barad"},"description":"As a seasoned project manager at Mavlers, I bring over nine years of expertise in Project Management, Email Marketing and automation, and Client Servicing. My enthusiasm lies in exploring emerging technologies, which I believe hold immense potential to transform our world positively. When I'm not busy solving problems for our clients, managing teams, or managing projects, you can find me lost in a good book or grooving to dance tracks. Helping others thrive and adding value wherever I can is what keeps me going.","sameAs":["https:\/\/www.linkedin.com\/in\/dhrupalsinhbarad\/"]}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/39011","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/users\/86"}],"replies":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/comments?post=39011"}],"version-history":[{"count":7,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/39011\/revisions"}],"predecessor-version":[{"id":39097,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/posts\/39011\/revisions\/39097"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media\/39029"}],"wp:attachment":[{"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/media?parent=39011"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/categories?post=39011"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/email.uplers.com\/blog\/wp-json\/wp\/v2\/tags?post=39011"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}