diff --git a/src/back/routes/component-preview/jdd-page.tsx b/src/back/routes/component-preview/jdd-page.tsx
index f3d8ebe..5a33db3 100644
--- a/src/back/routes/component-preview/jdd-page.tsx
+++ b/src/back/routes/component-preview/jdd-page.tsx
@@ -132,7 +132,10 @@ export default abstract class JDDPage extends StatefulPage<
 	) {
 		const jdd_context = makeJDDContext(ctx);
 		return (
-			<div class="component-preview-parameters">
+			<div
+				class="component-preview-parameters"
+				id={`component-preview-parameters--${index}`}
+			>
 				{Object.entries(component.getArguments()).map(async ([arg_name, arg]) => (
 					<ComponentInput
 						{...{
@@ -268,7 +271,7 @@ export default abstract class JDDPage extends StatefulPage<
 				style="--resizable-column-width: 50vw"
 				data-controller="component-debugger"
 			>
-				<div class="component-arguments">
+				<div class="component-arguments" id="component-arguments">
 					{this.renderPreParameterButtons(ctx, state)}
 					{this.renderParameterButtons(state)}
 					{this.renderMessages(ctx, state)}
@@ -279,8 +282,16 @@ export default abstract class JDDPage extends StatefulPage<
 						{this.serializeState(ctx, state)}
 					</code>
 				</div>
-				<div class="resize-gutter" data-component-debugger-target="gutter"></div>
-				<div class="component-preview" data-component-debugger-target="preview">
+				<div
+					id="resize-gutter"
+					class="resize-gutter"
+					data-component-debugger-target="gutter"
+				></div>
+				<div
+					id="component-preview"
+					class="component-preview"
+					data-component-debugger-target="preview"
+				>
 					<div class="component-preview__header">
 						<span>Preview</span>
 						<span data-component-debugger-target="component-width"></span>