WYSIWIG HTML editors for Phoenix LiveView?

niccolox

Does anyone have good suggestions for HTML editors which integrate nicely into Phoenix Liveview?

I am especially interested in the inline editing of forms.

Think Wordpress Gutenburg type UX

14 comments

/phoenix #liveview #liveview-form

5 6624 14

2025-08-03 12:05:40 UTC

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)

Sebb

maybe this Dev Community - DevDojo

Never used.

Post #1

wmnnd

I’m currently working on adding Editor.js to Keila (see e.g. here). The concept is similar to the Gutenberg editor, although the UI is not quite as smooth yet. It is, however, very easy to work with.

If you really like Gutenberg, you might actually be able to use it in your Phoenix project. Check out the work of the Drupal Gutenberg project, g-editor, and this other standalone version which use Gutenberg without Wordpress.

Post #2

romenigld

I don’t watched but it has this conference talking about the editors in PHX LiveView:

In home I will watch.

Post #3

outlog

repo here: GitHub - begedin/philtre: A block-based content editor in elixir · GitHub

Post #4

niccolox

thank you gentlemen, I’ll check out these (I’ve looked at editor.js and I love the experience, but I don’t want to parse JSON or diffs) and want to use Elixir Phoenix Live View primitives as much as possible

Post #5

shamanime

We’ve been using https://trix-editor.org with a Hook without issues so far.

Post #6

romenigld

Could you show how was the installation with hook using Trix?

Post #7

shamanime

The hook:

import Trix from "trix";

export default {
  mounted() {
    const element = document.querySelector("trix-editor");
    element.editor.element.addEventListener("trix-change", (e) => {
      this.el.dispatchEvent(new Event("change", { bubbles: true }));
    });
    element.editor.element.addEventListener("trix-initialize", () => {
      element.editor.element.focus();
      var length = element.editor.getDocument().toString().length;
      window.setTimeout(() => {
        element.editor.setSelectedRange(length, length);
      }, 1);
    });
    this.handleEvent("updateContent", (data) => {
      element.editor.loadHTML(data.content || "");
    });
  },
};

(the hook can be simplified, I use the setTimeout because in one of my forms there’s an auto-save feature that sends an event to the LV after a given period of time and if the user is typing on the editor while the auto-save event fires the cursor was being reset to the beginning of the text, this works around it)

The HTML:

      <div>
        <%= label(f, :body, gettext("Body")) %>
        <%= hidden_input(f, :body, phx_hook: "TrixEditor") %>
        <div id="richtext" phx-update="ignore">
          <trix-editor input={input_id(f, :body)} class="trix-content">
          </trix-editor>
        </div>
        <%= error_tag(f, :body) %>
      </div>

Post #8

romenigld

thank you for share @shamanime.
And another question.
For the upload of the image files you do something?
You preferred to use the installation by npm or including it from an npm CDN in the <head> of your page?

Post #9

shamanime

We installed from npm and the only configuration we have is in our app.css:

@import "../node_modules/trix/dist/trix.css";

Post #10

Load more posts (4 remaining)

Where Next?

View thread on forum (has 14 replies!)

phoenix

liveview

liveview-form

Home Chat & Discussions>Discussions

40 6442 14

Last post

REPLY VIEW THREAD WITH 14 POSTS

WYSIWIG HTML editors for Phoenix LiveView?

niccolox

Showing Posts 1 to 10 Show Best PostsShow All (oldest first)Show All (newest first)

Sebb

wmnnd

romenigld

outlog

niccolox

shamanime

romenigld

shamanime

romenigld

shamanime

Where Next?

Trending in Discussions

What Elixir related stuff are you doing?

My thoughts on Ash

Cure - a new language compiled to BEAM

Can the ideas from DeepSeek Harness be transferred to Elixir eco?

Companies that hire candidates without prior Elixir experience

Building an AI agent runtime moving from TypeScript to Elixir/OTP - can you help/compare notes?

Biocomputing and Elixir/the BEAM?

Other Trending Topics

Gust - A task orchestration system built in Elixir

Beam Bots - Resilient Robotics on the BEAM

Xamal - Deploy Elixir releases to bare metal servers via SSH

Emerge & Solve - a GUI framework for Elixir

Corex - Accessible and unstyled UI Phoenix components

Aludel - LLM prompt evaluation workbench

Latest Phoenix Threads

Chat & Discussions>Discussions

Latest on Elixir Forum

Sponsor Spotlight

Our Sponsors

Categories:

Sub Categories:

Forums

Popular Tags

Our Sponsors

We're in Beta

Options

Thread Display Mode

Thread Preview

Showing Posts 1 to 10

Show Best Posts
Show All (oldest first)
Show All (newest first)