diff --git a/app/assets/stylesheets/exports.scss b/app/assets/stylesheets/exports.scss
new file mode 100644
index 000000000..ff734fea2
--- /dev/null
+++ b/app/assets/stylesheets/exports.scss
@@ -0,0 +1,71 @@
+@import "constants";
+
+.export-template-preview {
+  // From https://codepen.io/myramoki/pen/xZJjrr
+  .tree {
+    margin-left: 0;
+  }
+
+  .tree,
+  .tree ul {
+    padding: 0;
+    list-style: none;
+    position: relative;
+  }
+
+  .tree ul {
+    margin: 0 0 0 0.5em; // (indentation/2)
+  }
+
+  .tree:before,
+  .tree ul:before {
+    content: "";
+    display: block;
+    width: 0;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 4px;
+    border-left: 1px dashed;
+  }
+
+  ul.tree:before {
+    border-left: none;
+  }
+
+  .tree li {
+    margin: 0;
+    padding: 0 1.5em; // indentation + .5em
+    line-height: 2em; // default list item's `line-height`
+    position: relative;
+  }
+
+  .tree > li {
+    padding-left: 0; // Don't indent first level
+  }
+
+  .tree li:before {
+    content: "";
+    display: block;
+    width: 10px; // same with indentation
+    height: 0;
+    border-top: 1px dashed;
+    margin-top: -1px; // border top width
+    position: absolute;
+    top: 1em; // (line-height/2)
+    left: 4px;
+  }
+
+  ul.tree > li:before {
+    border-top: none;
+  }
+
+  .tree li:last-child:before {
+    background: var(
+      --background-alt-blue-france
+    ); // same with body background
+    height: auto;
+    top: 1em; // (line-height/2)
+    bottom: 0;
+  }
+}
diff --git a/app/controllers/instructeurs/export_templates_controller.rb b/app/controllers/instructeurs/export_templates_controller.rb
index 4b12a848b..e04cf8152 100644
--- a/app/controllers/instructeurs/export_templates_controller.rb
+++ b/app/controllers/instructeurs/export_templates_controller.rb
@@ -37,6 +37,14 @@ module Instructeurs
       end
     end
 
+    def preview
+      param = params.require(:export_template).keys.first
+      @preview_param = param.delete_prefix("tiptap_")
+      hash = JSON.parse(params[:export_template][param]).deep_symbolize_keys
+      export_template = ExportTemplate.new(kind: 'zip', groupe_instructeur: @groupe_instructeurs.first)
+      @preview_value = export_template.render_attributes_for(hash, @procedure.dossier_for_preview(current_instructeur))
+    end
+
     private
 
     def export_template_params
diff --git a/app/views/instructeurs/export_templates/_form.html.haml b/app/views/instructeurs/export_templates/_form.html.haml
index 1257f7f0d..4ae51c1d5 100644
--- a/app/views/instructeurs/export_templates/_form.html.haml
+++ b/app/views/instructeurs/export_templates/_form.html.haml
@@ -21,7 +21,7 @@
       .fr-input-group{ data: { controller: 'tiptap' } }
         = f.label :tiptap_default_dossier_directory, class: "fr-label"
         .editor.mt-2{ data: { tiptap_target: 'editor' } }
-          = f.hidden_field :tiptap_default_dossier_directory, data: { tiptap_target: 'input' }
+        = f.hidden_field :tiptap_default_dossier_directory, data: { tiptap_target: 'input', controller: 'turbo-input', turbo_input_url_value: preview_instructeur_export_templates_path }
         %ul.mt-2.flex.wrap.flex-gap-1
           - @export_template.specific_tags.each do |tag|
             %li.fr-badge.fr-badge--sm{ role: 'button', title: tag[:description], data: { action: 'click->tiptap#insertTag', tiptap_target: 'tag', tag_id: tag[:id], tag_label: tag[:libelle] } }
@@ -30,7 +30,7 @@
       .fr-input-group{ data: { controller: 'tiptap' } }
         = f.label :tiptap_pdf_name, class: "fr-label"
         .editor.mt-2{ data: { tiptap_target: 'editor' } }
-          = f.hidden_field :tiptap_pdf_name, data: { tiptap_target: 'input' }
+        = f.hidden_field :tiptap_pdf_name, data: { tiptap_target: 'input', controller: 'turbo-input', turbo_input_url_value: preview_instructeur_export_templates_path }
         %ul.mt-2.flex.wrap.flex-gap-1
           - @export_template.specific_tags.each do |tag|
             %li.fr-badge.fr-badge--sm{ role: 'button', title: tag[:description], data: { action: 'click->tiptap#insertTag', tiptap_target: 'tag', tag_id: tag[:id], tag_label: tag[:libelle] } }
@@ -43,7 +43,7 @@
           .fr-input-group{ data: { controller: 'tiptap' } }
             = label_tag pj.libelle, nil, name: field_name(:export_template, "tiptap_pj_#{pj.stable_id}"), class: "fr-label"
             .editor.mt-2{ data: { tiptap_target: 'editor' } }
-              = hidden_field_tag field_name(:export_template, "tiptap_pj_#{pj.stable_id}"), "#{@export_template.content_for_pj(pj)}" , data: { tiptap_target: 'input' }
+              = hidden_field_tag field_name(:export_template, "tiptap_pj_#{pj.stable_id}"), "#{@export_template.content_for_pj(pj)}" , data: { tiptap_target: 'input', controller: 'turbo-input', turbo_input_url_value: preview_instructeur_export_templates_path }
             %ul.mt-2.flex.wrap.flex-gap-1
               - @export_template.specific_tags.each do |tag|
                 %li.fr-badge.fr-badge--sm{ role: 'button', title: tag[:description], data: { action: 'click->tiptap#insertTag', tiptap_target: 'tag', tag_id: tag[:id], tag_label: tag[:libelle] } }
@@ -57,3 +57,17 @@
               = f.submit "Enregistrer", class: "fr-btn"
             %li
               = link_to "Annuler", instructeur_procedure_path(@procedure), class: "fr-btn fr-btn--secondary"
+  - if @export_template.sample_dossier
+    .fr-col-12.fr-col-md-4.fr-background-alt--blue-france
+      .export-template-preview.fr-p-2w.sticky--top
+        %h2.fr-h4 Aperçu
+        %ul.tree.fr-text--sm
+          %li= DownloadableFileService::EXPORT_DIRNAME
+          %li
+            %ul
+              %li
+                %span#preview_default_dossier_directory= @export_template.tiptap_convert(sample_dossier, "default_dossier_directory")
+                %ul
+                  %li#preview_pdf_name= @export_template.tiptap_convert(sample_dossier, "pdf_name")
+                  - @procedure.pieces_jointes_exportables_list.each do |pj|
+                    %li{id: "preview_pj_#{pj.stable_id}"}= @export_template.tiptap_convert_pj(sample_dossier, pj.stable_id)
diff --git a/app/views/instructeurs/export_templates/preview.turbo_stream.haml b/app/views/instructeurs/export_templates/preview.turbo_stream.haml
new file mode 100644
index 000000000..f6c1e5468
--- /dev/null
+++ b/app/views/instructeurs/export_templates/preview.turbo_stream.haml
@@ -0,0 +1,2 @@
+= turbo_stream.update "preview_#{@preview_param}" do
+  = @preview_value
diff --git a/config/routes.rb b/config/routes.rb
index a9af9ac9e..461575d5b 100644
--- a/config/routes.rb
+++ b/config/routes.rb
@@ -450,7 +450,11 @@ Rails.application.routes.draw do
     resources :procedures, only: [:index, :show], param: :procedure_id do
       member do
         resources :archives, only: [:index, :create]
-        resources :export_templates, only: [:new, :create, :edit, :update]
+        resources :export_templates, only: [:new, :create, :edit, :update] do
+          collection do
+            get 'preview'
+          end
+        end
 
         resources :groupes, only: [:index, :show], controller: 'groupe_instructeurs' do
           resource :contact_information