diff --git a/package-lock.json b/package-lock.json
index 9bce7a6..83b898e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,7 +15,7 @@
 				"@sealcode/add-to-head": "^1.0.0",
 				"@sealcode/file-manager": "^1.0.2",
 				"@sealcode/jdd": "^0.8.10",
-				"@sealcode/jdd-editor": "^0.2.32",
+				"@sealcode/jdd-editor": "^0.2.33",
 				"@sealcode/monaco-wrapper": "^0.0.12",
 				"@sealcode/sealgen": "^0.19.21",
 				"@sealcode/show-first-row": "^0.1.0",
@@ -1380,9 +1380,9 @@
 			}
 		},
 		"node_modules/@sealcode/jdd-editor": {
-			"version": "0.2.32",
-			"resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.2.32.tgz",
-			"integrity": "sha512-m+Dz9KfIijR/7Z0I7VIhl6u4iY8vEyeK7Ske/odt6jrbVVrCZ00Kz8Ixs67TYsBeKN0pPIiX74l7TGV/m386xw==",
+			"version": "0.2.33",
+			"resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.2.33.tgz",
+			"integrity": "sha512-CrjeBbX6SvAZ9epd4jWf279FyktMKWg9yIY6RzH9eA3MGJLnwzJCjS5QTByhmE5PpO9UQTtTAaOr0U+FE4CTjQ==",
 			"dependencies": {
 				"@koa/router": "^13.1.0",
 				"@sealcode/jdd": "^0.8.10",
@@ -16016,9 +16016,9 @@
 			}
 		},
 		"@sealcode/jdd-editor": {
-			"version": "0.2.32",
-			"resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.2.32.tgz",
-			"integrity": "sha512-m+Dz9KfIijR/7Z0I7VIhl6u4iY8vEyeK7Ske/odt6jrbVVrCZ00Kz8Ixs67TYsBeKN0pPIiX74l7TGV/m386xw==",
+			"version": "0.2.33",
+			"resolved": "https://registry.npmjs.org/@sealcode/jdd-editor/-/jdd-editor-0.2.33.tgz",
+			"integrity": "sha512-CrjeBbX6SvAZ9epd4jWf279FyktMKWg9yIY6RzH9eA3MGJLnwzJCjS5QTByhmE5PpO9UQTtTAaOr0U+FE4CTjQ==",
 			"requires": {
 				"@koa/router": "^13.1.0",
 				"@sealcode/jdd": "^0.8.10",
diff --git a/package.json b/package.json
index 1752c54..e59f347 100644
--- a/package.json
+++ b/package.json
@@ -98,7 +98,7 @@
 		"@sealcode/add-to-head": "^1.0.0",
 		"@sealcode/file-manager": "^1.0.2",
 		"@sealcode/jdd": "^0.8.10",
-		"@sealcode/jdd-editor": "^0.2.32",
+		"@sealcode/jdd-editor": "^0.2.33",
 		"@sealcode/monaco-wrapper": "^0.0.12",
 		"@sealcode/sealgen": "^0.19.21",
 		"@sealcode/show-first-row": "^0.1.0",
diff --git a/src/back/jdd-components/background-wrapper/background-wrapper.css b/src/back/jdd-components/background-wrapper/background-wrapper.css
new file mode 100644
index 0000000..f165cac
--- /dev/null
+++ b/src/back/jdd-components/background-wrapper/background-wrapper.css
@@ -0,0 +1,31 @@
+.background-wrapper {
+	grid-column: screen;
+	display: grid;
+	grid-template-columns: subgrid;
+	--vertical-padding: 16px;
+
+	padding: var(--vertical-padding) 0;
+
+	& > * {
+		grid-column: content;
+	}
+
+	&.background-wrapper--grow-height {
+		min-height: 80vh;
+		align-content: center;
+	}
+
+	&.background-wrapper--variant1 {
+		background-color: var(--color-brand-accent);
+		--color-brand-text-bg: var(--color-brand-accent);
+		color: var(--color-brand-text-on-accent);
+		--color-brand-text-fg: var(--color-brand-text-on-accent);
+	}
+
+	&.background-wrapper--variant2 {
+		background-color: var(--color-brand-accent2);
+		--color-brand-text-bg: var(--color-brand-accent2);
+		color: var(--color-brand-text-on-accent2);
+		--color-brand-text-fg: var(--color-brand-text-on-accent2);
+	}
+}
diff --git a/src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx b/src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx
new file mode 100644
index 0000000..0305352
--- /dev/null
+++ b/src/back/jdd-components/background-wrapper/background-wrapper.jdd.tsx
@@ -0,0 +1,48 @@
+import { TempstreamJSX } from "tempstream";
+import type {
+	ComponentToHTMLArgs,
+	ExtractStructuredComponentArgumentsParsed,
+	JDDContext,
+} from "@sealcode/jdd";
+import { Component, ComponentArguments } from "@sealcode/jdd";
+
+export const background_variants = ["variant1", "variant2"];
+
+const component_arguments = {
+	variant: new ComponentArguments.Enum(background_variants),
+	grow_to_screen_height: new ComponentArguments.Boolean(),
+	content: new ComponentArguments.NestedComponent(),
+} as const;
+
+export class BackgroundWrapper extends Component<typeof component_arguments> {
+	getArguments() {
+		return component_arguments;
+	}
+
+	getCSSClumps(
+		jdd_context: JDDContext,
+		args: ExtractStructuredComponentArgumentsParsed<typeof component_arguments>
+	) {
+		const result = [...(args?.content?.getCSSClumps(jdd_context) || [])];
+		return result;
+	}
+
+	async toHTML({
+		args: { variant, content, grow_to_screen_height },
+		classes,
+		jdd_context,
+	}: ComponentToHTMLArgs<typeof component_arguments>): Promise<string> {
+		return (
+			<div
+				class={[
+					"background-wrapper",
+					`background-wrapper--${variant}`,
+					{ "background-wrapper--grow-height": grow_to_screen_height },
+					...classes,
+				]}
+			>
+				{content.render(jdd_context)}
+			</div>
+		);
+	}
+}
diff --git a/src/front/controllers.ts b/src/front/controllers.ts
index 752a071..db4c405 100644
--- a/src/front/controllers.ts
+++ b/src/front/controllers.ts
@@ -19,6 +19,9 @@ application.register("horizontal-scroller", HorizontalScroller);
 import { default as AutogrowTextarea } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/autogrow-textarea.stimulus.js";
 application.register("autogrow-textarea", AutogrowTextarea);
 
+import { default as Autosubmit } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/autosubmit.stimulus.js";
+application.register("autosubmit", Autosubmit);
+
 import { default as CodeSnippet } from "./../../node_modules/@sealcode/jdd-editor/src/controllers/code-snippet.stimulus.js";
 application.register("code-snippet", CodeSnippet);