Skip to main content
Maizzle includes a dev server for local email development. It can watch your Templates and other files, and immediately update them in the browser as you make changes.

​
hmr

​
hmr
boolean
default:"true"
Enable Hot Markup Replacement™ for the dev server.When true, changes you make to Templates, Components, config files etc. will be instantly reflected in the browser without a full page reload.You may disable HMR and force a page reload by setting this to false:
config.js
export default {
  server: {
    hmr: false,
  }
}

​
watch

​
watch
array
default:"[]"
An array of paths (which can be globs) to watch for changes. When a file in one of these paths changes, the dev server will update the preview in the browser.By default, Maizzle watches these paths:
  • all Template, Component, and Layout paths
  • config*.js
  • maizzle.config*.js
  • tailwind*.config.js
  • **/*.css
You may add more paths to watch:
config.js
export default {
  server: {
    watch: ['./marketing/**/*'],
  }
}

​
port

​
port
number
default:"3000"
Port number for the dev server.
config.js
export default {
  server: {
    port: 8080,
  }
}
The server will now be available at http://localhost:8080.

​
maxRetries

​
maxRetries
number
default:"10"
Number of times to retry starting the dev server if the port is already in use.
config.js
export default {
  server: {
    maxRetries: 5,
  }
}

​
scrollSync

​
scrollSync
boolean
default:"false"
Scrolling in one browser tab will be synchronized across all other browser tabs that are viewing the same Template. This works across devices too.Enable synchronized scrolling:
config.js
export default {
  server: {
    scrollSync: true,
  }
}
You can now open the same Template on both your laptop and your phone, and scrolling on one will be mirrored on the other.

​
reportFileSize

​
reportFileSize
boolean
default:"false"
When enabled, the dev server will report the size of the compiled HTML file in the console. This number will be color-coded based on how close the file size is to the 102KB limit for Gmail.Enable it by setting this to true:
config.js
export default {
  server: {
    reportFileSize: true,
  }
}

​
spinner

​
spinner
string | object
default:"circleHalves"
Customize the spinner shown in the console when compiling a Template.
config.js
export default {
  server: {
    spinner: 'dots'
  }
}
See the ora spinners list for available options.

Build docs developers (and LLMs) love

Get started for freeTalk to us