Building a HEEx visual editor

ElixirConf · May 1, 2025, 1:00pm

ElixirConf US 2024 - Leandro Pereira

Welcome to ElixirConf

In the last ElixirConf, I briefly demoed the HEEx visual editor that we’ve been building in Beacon CMS, and a common question since then has been “How does it work?” This talk will answer that question.

In any CMS, content creation is one of the most critical and used features. In Beacon, we provide two views to manage the same content: a code editor to give you access to the raw HEEx template and a visual editor to facilitate editing such templates without programming knowledge.

Then we had this wild idea: what if we built a visual editor that understands HEEx and allows you to drag and drop Phoenix components into the template? HTML editors are not a new thing, but a HEEx editor with integrated Tailwind supporting custom config, with live preview of the page including the surrounding layouts and Elixir expressions? That would be a bit more challenging.

In this talk, we’ll explore the parsing and manipulation of HEEx templates, building and rendering the preview page, Phoenix components, Tailwind integration in the browser environment, a bit of Svelte, and a live demo using the DockYard website.

Comments welcome! View the elixirconf tag for more ElixirConf talks!