diff --git a/package-lock.json b/package-lock.json
index 2fef5d2..025904e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
 				"@hotwired/turbo": "^8.0.2",
 				"@koa/router": "^12.0.1",
 				"@playwright/test": "^1.36.1",
-				"@sealcode/jdd": "^0.2.13",
+				"@sealcode/jdd": "^0.2.14",
 				"@sealcode/sealgen": "^0.12.8",
 				"@sealcode/ts-predicates": "^0.4.3",
 				"@types/kill-port": "^2.0.0",
@@ -1276,9 +1276,9 @@
 			}
 		},
 		"node_modules/@sealcode/jdd": {
-			"version": "0.2.13",
-			"resolved": "https://registry.npmjs.org/@sealcode/jdd/-/jdd-0.2.13.tgz",
-			"integrity": "sha512-Jm5Vku5hfpImZMrq03WRsf2vh9DRJDThz9EnGgVGSrQVa9NhnibUfR4KcH26+qzxyya1JbtGCJXrhdueSmRpag==",
+			"version": "0.2.14",
+			"resolved": "https://registry.npmjs.org/@sealcode/jdd/-/jdd-0.2.14.tgz",
+			"integrity": "sha512-jpPY17WnYqmQLg2K4V1qX9vCi6ti9nLwS7YOOXEZH+6HOxTuC43qeoHun0Z8vKez33dha7Z5n5z9XwXylwKxdg==",
 			"dependencies": {
 				"@sealcode/ts-predicates": "^0.5.3",
 				"marked": "^12.0.0",
diff --git a/package.json b/package.json
index 22d3279..d06c710 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
 		"@hotwired/turbo": "^8.0.2",
 		"@koa/router": "^12.0.1",
 		"@playwright/test": "^1.36.1",
-		"@sealcode/jdd": "^0.2.13",
+		"@sealcode/jdd": "^0.2.14",
 		"@sealcode/sealgen": "^0.12.8",
 		"@sealcode/ts-predicates": "^0.4.3",
 		"@types/kill-port": "^2.0.0",
diff --git a/src/back/routes/components.css b/src/back/routes/components.css
index 26d4d13..7661363 100644
--- a/src/back/routes/components.css
+++ b/src/back/routes/components.css
@@ -34,6 +34,6 @@
 
 .component-preview {
 	* {
-		transition: all 200ms;
+		transition: all 150ms;
 	}
 }
diff --git a/src/back/routes/components.sreact.tsx b/src/back/routes/components.sreact.tsx
index 3936913..ccc01a8 100644
--- a/src/back/routes/components.sreact.tsx
+++ b/src/back/routes/components.sreact.tsx
@@ -56,6 +56,14 @@ const actions = {
 			args: component?.getExampleValues() || {},
 		};
 	},
+	randomize_args: (state: State, inputs: Record<string, string>) => {
+		const component_name = inputs.component;
+		const component = registry.get(component_name);
+		return {
+			...state,
+			args: component?.getExampleValues() || {},
+		};
+	},
 } as const;
 
 type State = {
@@ -242,7 +250,7 @@ export default new (class ComponentsPage extends StatefulPage<State, typeof acti
 							</option>
 						))}
 					</select>
-
+					{this.makeActionButton(state, "randomize_args")}
 					<fieldset class="component-preview-parameters">
 						<legend>Parameters</legend>
 						{Object.entries(component.getArguments()).map(([arg_name, arg]) =>