Content for custom html #880
Conversation
✅ Deploy Preview for docs-novu ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
WalkthroughThe documentation for writing email templates in Novu has been restructured and expanded. It now details three template creation methods—Block editor, Code editor (Custom HTML), and API submission—along with dynamic data sources, editor autocomplete behavior, preview rendering, and supported block types including tutorials. Changes
Poem
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🔭 Outside diff range comments (2)
content/docs/platform/integrations/email/writing-email-template.mdx (2)
61-76: Fix typos in block descriptions
Two typos detected: "widh" → "width" and "interation" → "iteration".- **Image** - Full widh image with absolute url, image position can be customized + **Image** - Full width image with absolute URL; image position can be customized - **Repeat** - Can be used for interation on array of data + **Repeat** - Can be used for iteration on an array of data
100-103: Correct Show Block copy
Fix plural and typo in "subscriber".- Show block can be used to conditionally show content based on a condition. Use the eye icon to toggle the visibility of the content. Few components supports eye icon. Conditions could be based on subscribr properties, payload variables. + Show block can be used to conditionally display content based on a condition. Use the eye icon to toggle visibility. A few components support the eye icon. Conditions can be based on subscriber properties or payload variables.
🧹 Nitpick comments (6)
content/docs/platform/integrations/email/writing-email-template.mdx (6)
8-8: Fix subject-verb agreement
Change "each of the editor is designed" to "each editor is designed".- Novu provides two editors for authoring email templates, each of the editor is designed to meet different use cases, from quick visual composition to deeply customized HTML emails integrated with your own design system and logic. + Novu provides two editors for authoring email templates, each editor is designed to meet different use cases, from quick visual composition to deeply customized HTML emails integrated with your own design system and logic.
37-44: Correct grammar in preview section
Change "The editors also has a preview" to "The editors also have a preview".- The editors also has a preview that renders your email using available data: + The editors also have a preview that renders your email using available data:
45-45: Unify editor naming
Use "Block editor" (singular) to match earlier references, instead of "Blocks editor".- ## Blocks editor + ## Block editor
52-52: Refine grammar and prepositions
Add missing articles and correct preposition in the usage tip.- Block editor body is made of blocks. A block can be added by clicking on the plus icon on the top left corner of the editor or by adding a forward slash `/`. In both the cases, a popover will appear with the list of supported blocks. Click on the desired block to add it to the editor. Menu option besides plus (+) icon can be used to **duplicate** or **delete** the block. + The block editor body is made of blocks. A block can be added by clicking on the plus icon in the top-left corner of the editor, or by adding a forward slash (`/`). In both cases, a popover appears with the list of supported blocks; use the menu beside the plus icon to **duplicate** or **delete** a block.
78-82: Polish Repeat Block description
Use "synonymous" and uppercase for JavaScript.- `Repeat` block is synonym with the javascript language `for` loop. Use + icon or / to add a `Repeat` block. Checkout the below video on how to use `Repeat` block + The `Repeat` block is synonymous with JavaScript's `for` loop. Use the + icon or `/` to add a `Repeat` block. Check out the video below to learn how to use the `Repeat` block.
111-119: Unify "Custom HTML" capitalization
Ensure consistent casing for Custom HTML terminology.- ## Code editor (custom HTML) + ## Code editor (Custom HTML) - Novu’s custom HTML for email lets you build fully custom email templates by writing raw HTML combined with full LiquidJS support... + Novu’s Custom HTML for email lets you build fully custom email templates by writing raw HTML combined with full LiquidJS support...
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/images/channels-and-providers/email/writing-email-template/block-and-code-editor.pngis excluded by!**/*.png
📒 Files selected for processing (1)
content/docs/platform/integrations/email/writing-email-template.mdx(2 hunks)
🧰 Additional context used
🪛 LanguageTool
content/docs/platform/integrations/email/writing-email-template.mdx
[uncategorized] ~39-~39: This verb does not appear to agree with the subject. Consider using a different form.
Context: ...t> ## Editor preview The editors also has a preview that renders your email using...
(AI_EN_LECTOR_REPLACEMENT_VERB_AGREEMENT)
[uncategorized] ~51-~51: You might be missing the article “the” here.
Context: ...nt of the email. It is made of blocks. Block editor body is made of blocks. A block ...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
[grammar] ~52-~52: The usual preposition to use with “corner” is “in”, not “on”. Did you mean “in the top left corner”?
Context: ...n be added by clicking on the plus icon on the top left corner of the editor or by adding a forward sl...
(ON_IN_THE_CORNER)
[uncategorized] ~52-~52: Possible missing comma found.
Context: ...plus icon on the top left corner of the editor or by adding a forward slash /. In bo...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~52-~52: You might be missing the article “the” here.
Context: ...d it to the editor. Menu option besides plus (+) icon can be used to duplicate o...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Redirect rules - docs-novu
- GitHub Check: Header rules - docs-novu
- GitHub Check: Pages changed - docs-novu
- GitHub Check: Build and Lint
🔇 Additional comments (12)
content/docs/platform/integrations/email/writing-email-template.mdx (12)
10-11: List of editors is clear
The differentiation between Block editor and Code editor is well presented.
14-15: Image markup looks correct
Alt text and image path are appropriate.
18-18: Heading is descriptive
"Dynamic data sources" accurately introduces the section.
22-27: Table layout is clear
The table clearly outlines data sources and availability per editor.
29-29: Autocomplete heading is appropriate
"Editor autocomplete behavior" correctly names the section.
31-35: Autocomplete explanation is clear
Examples and limitations for variable suggestions are well documented.
47-50: Approve subject/body field description
Fields "Subject" and "Body" are accurately described.
54-57: Image markup is fine
The embedded GIF and alt text accurately illustrate block usage.
59-59: Block list introduction is good
The lead-in for the block list is clear.
123-135: Authoring instructions are clear
Steps for switching to Code editor are accurate and easy to follow.
136-139: Warn callout and API heading are accurate
Callout effectively highlights irreversibility; API heading is clear.
144-147: API passthrough details are correct
Explanation of server-side rendering behavior is precise.
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (9)
content/docs/platform/integrations/email/writing-email-template.mdx (9)
4-4: Unify editor naming capitalization in description.Use consistent title‐case for the editors: e.g., “Block Editor” and “Code Editor (Custom HTML)” to match the rest of the document.
10-11: Consistent editor naming and casing.Capitalize both words in editor names: “Block Editor” and “Code Editor (Custom HTML)” to maintain consistency.
14-16: Enhance alt text for image.Use title‐case and more descriptive text, e.g.:
<img src="…" alt="Novu Block and Code Editor" />
18-18: Title‐case section heading.Change:
## Dynamic data sourcesto:
## Dynamic Data Sources
22-27: Ensure consistent punctuation in table descriptions.Current descriptions omit terminal periods; choose one style (with or without) and apply it uniformly across all rows.
29-29: Title‐case section heading.Change:
## Editor autocomplete behaviorto:
## Editor Autocomplete Behavior
45-45: Title‐case and singularize section heading.Change:
## Blocks editorto:
## Block Editor
110-110: Title‐case section heading.Change:
## Code editor (custom HTML)to:
## Code Editor (Custom HTML)
113-117: Standardize list punctuation.Ensure all bullet items in this section consistently end with a period or omit it, and apply the chosen style uniformly.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
content/docs/platform/integrations/email/writing-email-template.mdx(2 hunks)
🧰 Additional context used
🪛 LanguageTool
content/docs/platform/integrations/email/writing-email-template.mdx
[uncategorized] ~39-~39: This verb does not appear to agree with the subject. Consider using a different form.
Context: ...t> ## Editor preview The editors also has a preview that renders your email using...
(AI_EN_LECTOR_REPLACEMENT_VERB_AGREEMENT)
[uncategorized] ~51-~51: You might be missing the article “the” here.
Context: ...nt of the email. It is made of blocks. Block editor body is made of blocks. A block ...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
[grammar] ~52-~52: The usual preposition to use with “corner” is “in”, not “on”. Did you mean “in the top left corner”?
Context: ...n be added by clicking on the plus icon on the top left corner of the editor or by adding a forward sl...
(ON_IN_THE_CORNER)
[uncategorized] ~52-~52: Possible missing comma found.
Context: ...plus icon on the top left corner of the editor or by adding a forward slash /. In bo...
(AI_HYDRA_LEO_MISSING_COMMA)
[uncategorized] ~52-~52: You might be missing the article “the” here.
Context: ...d it to the editor. Menu option besides plus (+) icon can be used to duplicate o...
(AI_EN_LECTOR_MISSING_DETERMINER_THE)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Redirect rules - docs-novu
- GitHub Check: Header rules - docs-novu
- GitHub Check: Build and Lint
- GitHub Check: Pages changed - docs-novu
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
…e.mdx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (5)
content/docs/platform/integrations/email/writing-email-template.mdx (5)
8-11: Consider splitting the long sentence for readability.
The intro (“Novu provides two editors… logic.”) is descriptive but could be clearer if broken into two sentences and “each editor” used instead of “each of the editors.”Novu provides two editors for authoring email templates. Each editor is designed to meet different use cases: from quick visual composition to deeply customized HTML emails integrated with your own design system and logic.
14-15: Enhance the image alt text.
Current alt text (“Novu block and code editor”) is brief. Consider a more descriptive text, e.g.:alt="Screenshot of Novu block editor and custom HTML code editor UI"
33-35: Specify callout type for consistency.
Addtype='info'(or appropriate) to the<Callout>so it matches other admonitions:-<Callout>Autocomplete suggestions are not available inside control statements…</Callout> +<Callout type='info'>Autocomplete suggestions are not available inside control statements…</Callout>
111-111: Capitalize 'Custom' in the Code editor heading.
Use the same casing as earlier ("Custom HTML"):-## Code editor (custom HTML) +## Code editor (Custom HTML)
113-113: Unify apostrophe style.
Use straight ASCII apostrophes for consistency. E.g., changeNovu’stoNovu's.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
content/docs/platform/integrations/email/writing-email-template.mdx(2 hunks)
🧰 Additional context used
🪛 LanguageTool
content/docs/platform/integrations/email/writing-email-template.mdx
[uncategorized] ~52-~52: Possible missing comma found.
Context: ... (+) icon in the top-left corner of the editor or by adding a forward slash (/). In ...
(AI_HYDRA_LEO_MISSING_COMMA)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Redirect rules - docs-novu
- GitHub Check: Header rules - docs-novu
- GitHub Check: Pages changed - docs-novu
- GitHub Check: Build and Lint
🔇 Additional comments (11)
content/docs/platform/integrations/email/writing-email-template.mdx (11)
4-4: Frontmatter description looks good.
The new description clearly states the two editor modes.
18-27: Dynamic data sources table is clear.
The added section and table accurately enumerate available data bindings.
29-29: Heading is consistent.
"## Editor autocomplete behavior" aligns with other section titles.
39-39: Preview description is clear.
The sentence about the preview feature accurately explains the behavior.
52-52: Block editor body instructions are clear.
The updated copy correctly explains how to add, duplicate, and delete blocks.
115-119: Feature list reads well.
The new bullets on advanced use cases are concise and easy to scan.
121-121: Info callout is effective.
The Pro-tier restriction is clearly highlighted.
136-136: Warning callout is clear.
The irreversible switch caveat is well articulated.
138-140: API section is well structured.
The heading and intro explain how to author via the API.
144-146: API passthrough details are accurate.
The list correctly outlines server behavior and LiquidJS implications.
148-148: Usage summary is concise.
The closing sentence succinctly states the common use case.
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (4)
content/docs/platform/integrations/email/writing-email-template.mdx (4)
44-44: Unify terminology for Custom HTML listing.
The list item uses Custom HTML code, but the section title and subsequent description refer to Custom HTML block. Rename for consistency.Apply this diff:
- - **Custom HTML code** - Insert raw HTML with variable support + - **Custom HTML block** - Insert raw HTML with variable support
91-91: Capitalize 'Custom HTML' in code editor heading.
The heading currently reads lowercase; align it with other occurrences by capitalizing:- ## Code editor (custom HTML) + ## Code editor (Custom HTML)
129-129: Add Oxford comma for consistency.
The Payload Schema row in the dynamic data sources table omits the comma before "and API", unlike the other rows. Add it for parallel style.- | **Payload Schema** | Variables defined in your workflow’s payload schema | Block editor, Code editor and API| + | **Payload Schema** | Variables defined in your workflow’s payload schema | Block editor, Code editor, and API|
136-136: Fix grammar in autocomplete description.
Update the sentence to correct subject-verb agreement and drop the extra article:- The both block and code editors provides autocomplete as you write: + Both block and code editors provide autocomplete as you write:
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/images/channels-and-providers/email/writing-email-template/code-editor.pngis excluded by!**/*.png
📒 Files selected for processing (1)
content/docs/platform/integrations/email/writing-email-template.mdx(3 hunks)
🧰 Additional context used
🪛 LanguageTool
content/docs/platform/integrations/email/writing-email-template.mdx
[uncategorized] ~21-~21: Possible missing comma found.
Context: ... (+) icon in the top-left corner of the editor or by adding a forward slash (/). In ...
(AI_HYDRA_LEO_MISSING_COMMA)
[grammar] ~135-~135: Use a predeterminer before a determiner. Did you mean “both The”? Possibly, a hyphen is missing, as in ‘an all-dance show’.
Context: ...and API only | ## Editor autocomplete The both block and code editors provides autocom...
(DT_PDT)
[uncategorized] ~136-~136: This verb does not appear to agree with the subject. Consider using a different form.
Context: ...mplete The both block and code editors provides autocomplete as you write: - **Block e...
(AI_EN_LECTOR_REPLACEMENT_VERB_AGREEMENT)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Redirect rules - docs-novu
- GitHub Check: Build and Lint
- GitHub Check: Header rules - docs-novu
- GitHub Check: Pages changed - docs-novu
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
…e.mdx Co-authored-by: DianaHackmamba <diana@hackmamba.io>
…e.mdx Co-authored-by: DianaHackmamba <diana@hackmamba.io>
…e.mdx Co-authored-by: DianaHackmamba <diana@hackmamba.io>
…e.mdx Co-authored-by: DianaHackmamba <diana@hackmamba.io>
…e.mdx Co-authored-by: DianaHackmamba <diana@hackmamba.io>
…e.mdx Co-authored-by: DianaHackmamba <diana@hackmamba.io>
…e.mdx Co-authored-by: DianaHackmamba <diana@hackmamba.io>
…e.mdx Co-authored-by: DianaHackmamba <diana@hackmamba.io>
…e.mdx Co-authored-by: DianaHackmamba <diana@hackmamba.io>
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
…e.mdx Co-authored-by: DianaHackmamba <diana@hackmamba.io>
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (4)
content/docs/platform/integrations/email/writing-email-template.mdx (4)
21-21: Consider stronger phrasing for "made of"
You might replace "made of blocks" with "made up of blocks" for more idiomatic English.
41-41: Refine Button block description Use hyphens in "call-to-action", remove trailing period, and fix list formatting.- - **Button**: Call to action button to link to a page or URL that can be customized with text, URL, color, and size and background color. + - **Button**: A call-to-action button that can be customized with text, URL, color, size, and background color
89-89: Enclose code elements in backticks
WrapTrack your orderandshowTrackingin backticks to maintain consistency with code formatting.
129-131: Add missing Oxford commas
In the "Available in" column for Payload Schema and Digest Variables, insert a comma before "and API" to maintain consistency (e.g., "Block editor, Code editor, and API").
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
content/docs/platform/integrations/email/writing-email-template.mdx(3 hunks)
🧰 Additional context used
🪛 LanguageTool
content/docs/platform/integrations/email/writing-email-template.mdx
[uncategorized] ~21-~21: Possible missing comma found.
Context: ... (+) icon in the top-left corner of the editor or by adding a forward slash (/). In ...
(AI_HYDRA_LEO_MISSING_COMMA)
[grammar] ~41-~41: It appears that two hyphens are missing.
Context: ...e in sm, lg and xl sizes) - Button: Call to action button to link to a page or URL that ca...
(CALL_TO_ACTION_HYPHEN)
[uncategorized] ~60-~60: Possible missing article found.
Context: ...c. ### Repeat block Repeat block is synonym with the JavaScript language for loop...
(AI_HYDRA_LEO_MISSING_A)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Build and Lint
- GitHub Check: Redirect rules - docs-novu
- GitHub Check: Header rules - docs-novu
- GitHub Check: Pages changed - docs-novu
🔇 Additional comments (10)
content/docs/platform/integrations/email/writing-email-template.mdx (10)
4-4: Frontmatter description looks good
The updated description accurately reflects the content and matches style conventions.
8-8: Introductory sentence clear and concise
This sentence accurately sets up the section.
10-12: Template creation methods list - looks good
The bullet list succinctly summarizes the three approaches.
48-56: Custom HTML block details - looks good
The description and use cases are clear and grammatically correct.
95-100: Advanced use cases list - looks good
The bullet points clearly convey the capabilities of the code editor.
101-106: Usage steps are clear
The numbered steps accurately guide users switching to the Code editor.
109-109: Warning callout - accurate
Clearly warns about irreversibility when switching editors.
138-139: The autocomplete feature descriptions are concise and consistent.
141-141: The callout accurately clarifies autocomplete limitations.
147-149: Preview list items - look good
The explanations of the preview behavior are clear and well-structured.
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
content/docs/platform/integrations/email/writing-email-template.mdx (1)
136-136: Fix subject-verb agreement.Change “provides” to “provide” to match the plural subject:
- Both the block and code editors provides autocomplete as you write: + Both the block and code editors provide autocomplete as you write:
🧹 Nitpick comments (12)
content/docs/platform/integrations/email/writing-email-template.mdx (12)
4-4: Improve description consistency and punctuation.Consider revising the
descriptionfrontmatter to remove “either” (since three methods are listed) and add an Oxford comma before “or API” for clarity. For example:- description: 'Learn how to build email templates in Novu using either the block editor, code editor with custom HTML or API' + description: 'Learn how to build email templates in Novu using the block editor, code editor with custom HTML, or API'
8-8: Streamline the introduction.You might adopt an imperative style and drop “You can” for conciseness:
- You can create email templates in Novu using the following methods: + Create email templates in Novu using any of these methods:
10-12: Consistent feature naming.For consistency with the rest of the docs, consider renaming “code editor (custom HTML)” to “Custom HTML editor” and standardizing terminology across the document:
- **Code editor (custom HTML)**: Full HTML and [LiquidJS](...) control... + **Custom HTML editor**: Full HTML and [LiquidJS](...) control...
16-16: Use prose styling for special terms.Drop inline code formatting for UI terms and ensure proper punctuation:
- The block editor is a `WYSIWYG` editor that allows you to create and edit email templates. It has two fields: `Subject` and `Body`. + The block editor is a WYSIWYG editor that allows you to create and edit email templates. It has two fields: Subject and Body.
50-56: Refine Custom HTML block instructions.Improve phrasing for clarity and parallelism:
- Use this block when you need inline markup control within a visual layout, but don't require full LiquidJS logic. + Use this block for inline markup control within a visual layout when full LiquidJS logic is not required.
89-89: Clarify example and format code elements.Avoid redundancy and use backticks for code references:
- In the above image example, the Track your order button is displayed only if a subscriber has the showTracking field set to true in their custom data attribute. Similarly, you can use payload variables to show content conditionally. + In the example above, the `Track your order` button is displayed only if a subscriber’s `showTracking` field is set to `true` in their custom data. You can similarly use payload variables to conditionally show content.
91-91: Consistent section naming.Consider renaming this header to match the UI term “Custom HTML editor”:
- ## Code editor (custom HTML) + ## Custom HTML editor
95-99: Make bullet list parallel.Start each advanced use case with an active verb and maintain consistent structure:
- Migrating existing HTML email templates - Implementing full design systems - Executing flow control logic directly inside email templates - Complete layout and styling freedom without editor constraints + Migrate existing HTML email templates + Implement full design systems + Execute flow control logic directly in email templates + Achieve complete layout and styling freedom without editor constraints
104-105: Ensure step punctuation consistency.Add a period to step 3 for uniformity:
- 3. Start writing your template using HTML and LiquidJS syntax + 3. Start writing your template using HTML and LiquidJS syntax.
113-113: Streamline API section.Simplify wording by removing “also” and clarifying intent:
- You can also submit custom HTML email templates via the Novu API. This method supports workflows where you render templates externally and use Novu purely for delivery. + Submit custom HTML email templates via the Novu API for workflows where you render templates externally and use Novu purely for delivery.
129-132: Add Oxford commas in table.Ensure lists in the “Available in” column use consistent comma usage:
| Payload schema | ... | Block editor, Code editor and API| | Subscriber data | ... | Block editor, Code editor, and API|should be:
| Payload schema | ... | Block editor, Code editor, and API | | Subscriber data | ... | Block editor, Code editor, and API |
138-139: Refine autocomplete descriptions.Streamline bullet points for clarity:
- **Block editor**: Automatically completes variable expressions (`{{ ... }}`) and shows available block types when typing `/`. - **Code editor**: Automatically completes HTML, LiquidJS expressions, and available variables inside `{{ ... }}`. + **Block editor**: Completes variable expressions (`{{ ... }}`) and suggests block types when typing `/`. + **Code editor**: Completes HTML, LiquidJS expressions, and variables inside `{{ ... }}`.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
content/docs/platform/integrations/email/writing-email-template.mdx(3 hunks)
🧰 Additional context used
🪛 LanguageTool
content/docs/platform/integrations/email/writing-email-template.mdx
[uncategorized] ~21-~21: Possible missing comma found.
Context: ... (+) icon in the top-left corner of the editor or by adding a forward slash (/). In ...
(AI_HYDRA_LEO_MISSING_COMMA)
[grammar] ~41-~41: It appears that two hyphens are missing.
Context: ...e in sm, lg and xl sizes) - Button: Call to action button to link to a page or URL that ca...
(CALL_TO_ACTION_HYPHEN)
[uncategorized] ~60-~60: Possible missing article found.
Context: ...c. ### Repeat block Repeat block is synonym with the JavaScript language for loop...
(AI_HYDRA_LEO_MISSING_A)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Build and Lint
🔇 Additional comments (3)
content/docs/platform/integrations/email/writing-email-template.mdx (3)
93-93: Approve content for code editor section.The description clearly explains the purpose and capabilities of the Custom HTML editor.
117-119: Approve delivery-phase details.The bullets accurately describe how Novu compiles and delivers templates server-side.
147-149: Approve preview behavior description.The preview bullet list concisely covers schema usage, fallbacks, and variable evaluation.
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (3)
content/docs/platform/integrations/email/writing-email-template.mdx (3)
30-46: Polish block list labels and descriptions.
- Use hyphens in “call-to-action.”
- Align the “Custom HTML” bullet naming with the detailed section below.
Suggested diff:
- - **Image**: Full width image with absolute URL, image position can be customized + - **Image**: Full-width image with absolute URL; image position can be customized - - **Button**: Call to action button to link to a page or URL that can be customized with text, URL, color, and size and background color. + - **Button**: Call-to-action button to link to a page or URL; customize the text, URL, color, size, and background color. - - **Custom HTML code**: Insert raw HTML with variable support + - **Custom HTML block**: Insert raw HTML with variable support
60-60: Enhance wording for Repeat block analogy.“Synonym of” is slightly awkward. Consider:
- The `Repeat` block is a synonym of the JavaScript `for` loop. + The `Repeat` block is analogous to a JavaScript `for` loop.
129-132: Add Oxford comma for consistency in table.First row lacks a comma before “and API”:
- | Payload schema | Variables defined in your workflow’s payload schema | Block editor, Code editor and API| + | Payload schema | Variables defined in your workflow’s payload schema | Block editor, Code editor, and API |
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
content/docs/platform/integrations/email/writing-email-template.mdx(3 hunks)
🧰 Additional context used
🪛 LanguageTool
content/docs/platform/integrations/email/writing-email-template.mdx
[uncategorized] ~21-~21: Possible missing comma found.
Context: ... (+) icon in the top-left corner of the editor or by adding a forward slash (/). In ...
(AI_HYDRA_LEO_MISSING_COMMA)
[grammar] ~41-~41: It appears that two hyphens are missing.
Context: ...e in sm, lg and xl sizes) - Button: Call to action button to link to a page or URL that ca...
(CALL_TO_ACTION_HYPHEN)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Redirect rules - docs-novu
- GitHub Check: Header rules - docs-novu
- GitHub Check: Pages changed - docs-novu
- GitHub Check: Build and Lint
🔇 Additional comments (9)
content/docs/platform/integrations/email/writing-email-template.mdx (9)
8-8: Intro sentence is clear.No concerns here.
10-12: Overview list items look good.Bullets are clear and consistent.
50-58: Custom HTML block section reads well.The description and bullets correctly distinguish HTML-only markup versus full LiquidJS logic in the block editor.
91-99: Code editor section content is clear and comprehensive.No changes needed.
101-104: Usage steps for the code editor are concise.No concerns here.
109-109: Warning callout accurately highlights editor limitations.Looks good.
113-119: API usage section is well explained.The flow of compilation and rendering is clear.
136-139: Autocomplete section is accurate.Descriptions match feature behavior.
141-141: Control-statement callout is clear.No changes needed.
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
content/docs/platform/integrations/email/writing-email-template.mdx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (10)
content/docs/platform/integrations/email/writing-email-template.mdx (10)
4-4: Consistent feature naming in frontmatter description
Capitalize feature names to match the rest of the doc: change “block editor” → “Block editor” and “code editor” → “Code editor” in the description.
14-21: Section header consistency
Rename the “## Blocks editor” heading to “## Block editor” to match singular naming used elsewhere (e.g., “Code editor”).
30-46: Standardize block list descriptions
- Use consistent verb forms (e.g., “Create columns…” instead of “Creates columns…”).
- Hyphenate compound adjectives (“Full-width image”, “Call-to-action button”).
- Add spaces in comma lists (“1, 2, 3”).
Consider refactoring for parallel structure across items.
48-55: Unify Custom HTML block naming
The list names it Custom HTML code, but the section heading reads “Custom HTML block.” Pick one term (e.g., “Custom HTML code block”) for consistency.
58-61: Clarify Repeat block analogy
Rephrase to improve readability and parallelism, for example:
“TheRepeatblock functions like a JavaScriptforloop: it iterates over an array and renders a block for each item. Use the + icon or/to add it.”
89-89: Wrap UI labels in backticks
Wrap the button name in backticks for clarity: change Track your order →Track your order.
91-99: Parallel structure in use-case list
The first three bullets start with gerunds; the fourth is a noun phrase. Consider rephrasing to match, e.g., “Enjoying complete layout and styling freedom without editor constraints.”
101-109: Explicit step header
Change “To use it:” to “To use the Code editor:” for clearer context.
127-132: Add Oxford comma in availability lists
In the first row, change “Block editor, Code editor and API” → “Block editor, Code editor, and API” to match the other rows.
143-149: Streamline preview description
Consider tightening the first bullet for brevity:
“If your workflow defines a payload schema, Novu uses it to generate preview data.”
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
content/docs/platform/integrations/email/writing-email-template.mdx(3 hunks)
🧰 Additional context used
🪛 LanguageTool
content/docs/platform/integrations/email/writing-email-template.mdx
[uncategorized] ~21-~21: Possible missing comma found.
Context: ... (+) icon in the top-left corner of the editor or by adding a forward slash (/). In ...
(AI_HYDRA_LEO_MISSING_COMMA)
[grammar] ~41-~41: It appears that two hyphens are missing.
Context: ...e in sm, lg and xl sizes) - Button: Call to action button to link to a page or URL that ca...
(CALL_TO_ACTION_HYPHEN)
⏰ Context from checks skipped due to timeout of 90000ms (4)
- GitHub Check: Redirect rules - docs-novu
- GitHub Check: Header rules - docs-novu
- GitHub Check: Pages changed - docs-novu
- GitHub Check: Build and Lint
🔇 Additional comments (3)
content/docs/platform/integrations/email/writing-email-template.mdx (3)
8-12: Intro list is clear and consistent
The enumeration of template creation methods uses colons and formatting consistently. No changes needed.
111-119: The “Using the API” section is well structured and clear.
135-141: The autocomplete section accurately describes behavior and formatting.
I had to rearrange the page to flow so that it accommodates the custom HTML documentation.
Summary
This PR adds comprehensive documentation for Custom HTML support (Code Editor) in the email template editor. It introduces a new section that explains how developers can use raw HTML with LiquidJS to build dynamic, fully customized email templates.
What's Included
Introductory explanation of the Custom HTML editor and its benefits.
Clarification on supported data sources and scopes:
Notes: Reorganized the email template documentation page to improve information architecture and clarify the distinction between block and code editor modes.
Summary by CodeRabbit