Comment by rolae

Nice. I did something similar recently with an iFrame where you have a form for configuring customer sites and it displays the preview in an iFrame.

I had to throw in some debouncing and special handling for hidden inputs, as changes to hidden inputs do not trigger a change event on the form.

In the end the markup was very simple and is very reusable (StimulusJS v1):

        <div data-controller="iframe-preview" data-iframe-preview-url="<%= preview_path(@letter) %>">
          <form data-target="iframe-preview.form">
             <textarea name="body">My letter</textarea>
         </form>
         <iframe data-target="iframe-preview.iframe">
        </div>

This is when StimulusJS becomes really nice, when you can compose behavior in your markup with some simple data attributes. I did not think at first that I would need this controller in other places, but a couple of weeks later, I actually needed it, and was able to reuse the controller without modification for another use case.