Personalize the editor

We designed the Editor UI in a minimalist way so that most content editors will quickly be able to edit the content of their site without too much help.

We went a little further than that. Developers can also tweak the UI to enhance the feeling that content editors are at home. It means that all the references to Maglev displayed in the UI can be replaced by custom content.

By default, here is a quick sample of the Editor UI:

the Maglev Editor UI with the default style.

During the Maglev installation, a new file was added in your Rails application at the following location config/initializers/maglev.rb.

Maglev.configure do |c|
  # Title of the Editor window
  c.title = 'Editing my site'

  # Logo of the Editor (top left corner).
  # Put your custom logo in the app/assets/images folder of your Rails application.
  c.logo = 'logo.png'

  # Favicon (window tab)
  # Put your custom favicon in the app/assets/images folder of your Rails application.
  c.favicon = 'favicon.ico'

  # Primary color of the Editor
  c.primary_color = '#FBBF24'

  # Action triggered when clicking on the very bottom left button in the Editor
  # c.back_action = 'https://www.myapp.dev' # External url
  # c.back_action = :my_account_path # name of the route in your Rails application
  # c.back_action = ->(site) { redirect_to main_app.my_account_path(site_id: site.id) }
  
  # I18n locale used in the Editor UI (by default, I18n.locale will be used)
  # config.ui_locale = 'fr' # make sure your locale has been registered in Rails.
  # config.ui_locale = :find_my_locale # name of a protected method from your Rails application controller
  # config.ui_locale = ->(site) { 'fr' }

  # Uploader engine (:active_storage is only supported for now)
  # c.uploader = :active_storage
end

By modifying the values within this file, you will be able to achieve something like this:

the Maglev Editor UI with a different logo, tab title and primary color.