More from Henry Kim

RSS

Inline markdown preview using Turbo Frames

10756 views

0 comments

                  <%= form_with model: @post, url: preview_posts_path, data: { turbo_frame: 'preview' } do |f| %>
  <%= f.text_area :body, rows: 10, class: 'w-full rounded border p-2' %>
  <%= f.submit 'Preview', class: 'mt-2 rounded bg-gray-100 px-3 py-1' %>
<% end %>

<%= turbo_frame_tag 'preview' do %>
  <div class="prose text-gray-500">Preview will appear here.</div>
<% end %>

                  class PostsController < ApplicationController
  def preview
    @post = Post.new(post_params)
    render :preview
  end

  private

  def post_params
    params.require(:post).permit(:body)
  end
end

A markdown preview doesn’t need a client markdown parser. I render the preview server-side (same pipeline used in production), and load it into a Turbo Frame. The editor form includes a frame called preview, and a “Preview” button submits the form to a preview endpoint targeting that frame. The server renders sanitized HTML. This keeps your markdown rendering consistent and avoids XSS foot-guns from client-side parsing. It’s also more maintainable because the preview uses the same helper methods as the show page. In practice, I debounce the preview submission (optional Stimulus), but even without it, this is simple and effective. The key is to keep preview fast; cache expensive parsing if needed.

Henry Kim

More from Henry Kim

Inline markdown preview using Turbo Frames

0 Comments

More from Henry Kim