Skip to content


Meet Fred, the friendly editor. Fred helps designers, developers and content creators to collaborate on MODX projects through a powerful and flexible drag-and-drop visual website builder. Designers create the specifications of how a site should look and work. Developers create a reusalble design libraries for sites. And site owners can then use that work to create compelling content quickly using intuitive, visual drag and drop tools straight from the front end of a website.

Sinces there are zero restrictions on markup, techniques or templates, designers can realize their creative vision with pixel-perfect precision. Complete control over what can and cannot be edited means developers can create a library of design elements based on designers’ work without worrying that end-users will break things. And end-users are empowered to quickly create amazing web content without the need to get designers and developers involved (or fear of retribution if they break things).

How Fred Works

To create content with Fred, users drag design elements (“Elements”) from a sidebar, drop them where desired on a page, and edit the settings and content inline without ever having to visit a back-end admin tool. Fred has a variety of features that in combination make it a powerful visual content builder:

  • transform static Design Pattern Libraries into dynamic building blocks that accelerate the time needed to create content that adheres to brand standards
  • developers can use standard HTML markup with data-fred- attributes in Elements to create virtually any type of standard design library pattern
  • optional Twig templating logic
  • unlimited categories for Elements
  • a variety of controls including toggles, text inputs, date pickers, select inputs, radio inputs (TODO), sliders, Resource pickers and color pickers for end-users to configure Elements as they create new content
  • support for Snippets in Elements with real-time Ajax-based rendering when settings are updated
  • visual Font Awesome 5 icon picker (other icon choosers can be created)
  • simple content formatting with a currated default TinyMCE rich text editor (others RTEs can be used)
  • drag-and-drop to rearrange existing Elements on a page to new locations any time
  • nested Elements to enable Atomic Web Design workflows
  • ships with a complete set of production-ready Bootstrap 4 Elements (TODO)
  • end-user content is completely processed and cached for blazing fast page load times