Quill - Email Builder

Input Script

Output

Documentation

The email builder reads a lightweight, block-based custom DSL (Domain-Specific Language) and compiles it into clean, email-compliant HTML wrapped inside the template layout.

General Syntax Rules

Global Directives: Must be written outside any blocks, typically at the very top of the document.
Block Syntax: Written as blocktype { ... } spanning multiple lines, or blocktype {} for empty/self-closing blocks.
Modifier Properties: Lines starting with a dot (e.g., .property: value) placed immediately after a block's closing brace } attach specifically to that preceding block.
Comments: Lines starting with // outside of blocks are ignored by the compiler.

Inline Text Formatting

Inline formatting applies inside text-bearing blocks such as p, list, ul, ol, and default fallback block types:

Bold: Wrap text in double asterisks: **text** → text
Italics: Wrap text in single asterisks: *text* → text
Links: Use Markdown link syntax: [Link Text](url).
- If no protocol is provided (e.g., [Site](cmit.iisertvm.ac.in)), https:// is automatically prepended.
- Links automatically render with target="_blank" to open safely in a new browser tab.
- Email schemes like mailto:user@example.com are fully preserved.

Title

Sets the main subject/title variable inside the template header:

.title: Movie Screening: Good Will Hunting

Block Types

1. Paragraph Block (`p`)

Generates an email-safe <p> element. Multiple lines inside a paragraph block are merged into a continuous flow by default.

p {
  Hey all, CMIT is celebrating Pi Week with an exciting movie screening!
}
.color: #333333
.font-size: 16px
.line-height: 1.5

2. List Block (`list`, `ul`, `ol`)

Generates an unordered <ul> list structure. You can use list, ul, or ol as the block identifier.

List item lines must start with *, -, or a number followed by a period (e.g., 1.):

list {
  * **Movie:** Good Will Hunting
  * **Date:** 22 March 2026
  * **Venue:** PSB Seminar Hall
}
.list-style: none
.padding: 0
.margin: 20px 0

Numbered lists retain their prefix ordering while supporting inline formatting:

ol {
  1. **First step:** Arrive on time at 9 PM.
  2. **Second step:** Grab your snacks.
  3. **Third step:** Enjoy the movie!
}

3. Divider Block (`div`)

Creates a horizontal dividing line or space separator. Written as a single-line empty block div {}:

div {}
.border-top: 1px dashed #0066cc
.margin: 20px 0

4. Image Block (`img`)

Renders a responsive image tag. Pass the image URL as the content body inside the braces:

img {
  https://picsum.photos/600/300
}
.width: 90%
.align: center
.alt: Event Poster

5. Button Block (`btn`, `button`)

Renders a responsive button tag. Pass the button text as the content body inside the braces:

btn {
  Register Now
}
.url: https://example.com/register
.bg-color: #0066cc
.color: #ffffff

Pass the URL without quotation marks. The button will automatically render as a clickable link.

Property Modifiers Reference

Attached directly below closing block braces } using the .key: value format.

Property	Applicable Blocks	Description & Syntax
`.align:`	All Blocks	Sets alignment (`left`, `center`, `right`, `justify`). On `img` blocks, auto-calculates margins for centering.
`.margin:`	All Blocks	Defines outer spacing (e.g., `.margin: 20px 0` or `.margin: 10px auto`).
`.padding:`	All Blocks	Defines inner spacing (e.g., `.padding: 10px`, `.padding: 0`).
`.font-size:`	`p`, `list`, fallback	Sets text size (e.g., `.font-size: 18px`, `.font-size: 1.1rem`).
`.line-height:`	`p`, `list`, fallback	Sets line height spacing (e.g., `.line-height: 1.6`, `.line-height: 24px`).
`.color:`	`p`, `list`, fallback	Sets text hex color or name (e.g., `.color: #0066cc`, `.color: #333333`).
`.pre:`	`p`	Set `.pre: true` to preserve exact original line breaks, tabs, and whitespace inside a paragraph.
`.list-style:`	`list`, `ul`, `ol`	Set to `none` to remove bullet symbols/number prefixes and remove default left padding. Supports CSS values like `disc`, `square`, `decimal`.
`.border-top:`	`div`	Sets the top border line style of a divider (e.g., `.border-top: 1px dashed #0066cc`, `.border-top: 2px solid #ccc`). Default is `2px solid #cccccc`.
`.width:`	`img`	Sets display width for images (e.g., `.width: 100%`, `.width: 300px`).
`.alt:`	`img`	Sets screen-reader alt text for blocked images (e.g., `.alt: Poster Banner`). Defaults to `Image`.