diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/repository/stylesheet.repository.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/repository/stylesheet.repository.ts
index 82835cadca..5e625766aa 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/repository/stylesheet.repository.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/repository/stylesheet.repository.ts
@@ -64,7 +64,7 @@ export class UmbStylesheetRepository
 	//#region FOLDER:
 
 	createFolderScaffold(
-		parentId: string | null
+		parentId: string | null,
 	): Promise<{ data?: FolderResponseModel | undefined; error?: ProblemDetails | undefined }> {
 		const data: FolderResponseModel = {
 			name: '',
@@ -74,7 +74,7 @@ export class UmbStylesheetRepository
 	}
 
 	async createFolder(
-		folderRequest: CreateFolderRequestModel
+		folderRequest: CreateFolderRequestModel,
 	): Promise<{ data?: string | undefined; error?: ProblemDetails | undefined }> {
 		await this.#init;
 		const req = {
@@ -87,14 +87,14 @@ export class UmbStylesheetRepository
 		return promise;
 	}
 	async requestFolder(
-		unique: string
+		unique: string,
 	): Promise<{ data?: StylesheetGetFolderResponse | undefined; error?: ProblemDetails | undefined }> {
 		await this.#init;
 		return this.#folderDataSource.get(unique);
 	}
 	updateFolder(
 		unique: string,
-		folder: FolderModelBaseModel
+		folder: FolderModelBaseModel,
 	): Promise<{ data?: FolderModelBaseModel | undefined; error?: ProblemDetails | undefined }> {
 		throw new Error('Method not implemented.');
 	}
@@ -113,7 +113,7 @@ export class UmbStylesheetRepository
 
 	createScaffold(
 		parentId: string | null,
-		preset?: Partial<CreateTextFileViewModelBaseModel> | undefined
+		preset?: Partial<CreateTextFileViewModelBaseModel> | undefined,
 	): Promise<DataSourceResponse<CreateTextFileViewModelBaseModel>> {
 		throw new Error('Method not implemented.');
 	}
@@ -144,19 +144,31 @@ export class UmbStylesheetRepository
 	}
 
 	getStylesheetRules(
-		path: string
+		path: string,
 	): Promise<DataSourceResponse<RichTextStylesheetRulesResponseModel | ExtractRichTextStylesheetRulesResponseModel>> {
 		return this.#dataSource.getStylesheetRichTextRules(path);
 	}
-
+	/**
+	 * Existing content + array of rules => new content string
+	 *
+	 * @param {InterpolateRichTextStylesheetRequestModel} data
+	 * @return {*}  {Promise<DataSourceResponse<InterpolateRichTextStylesheetResponseModel>>}
+	 * @memberof UmbStylesheetRepository
+	 */
 	interpolateStylesheetRules(
-		data: InterpolateRichTextStylesheetRequestModel
+		data: InterpolateRichTextStylesheetRequestModel,
 	): Promise<DataSourceResponse<InterpolateRichTextStylesheetResponseModel>> {
 		return this.#dataSource.postStylesheetRichTextInterpolateRules(data);
 	}
-
+	/**
+	 * content string => array of rules
+	 *
+	 * @param {ExtractRichTextStylesheetRulesRequestModel} data
+	 * @return {*}  {Promise<DataSourceResponse<ExtractRichTextStylesheetRulesResponseModel>>}
+	 * @memberof UmbStylesheetRepository
+	 */
 	extractStylesheetRules(
-		data: ExtractRichTextStylesheetRulesRequestModel
+		data: ExtractRichTextStylesheetRulesRequestModel,
 	): Promise<DataSourceResponse<ExtractRichTextStylesheetRulesResponseModel>> {
 		return this.#dataSource.postStylesheetRichTextExtractRules(data);
 	}
@@ -204,7 +216,7 @@ export class UmbStylesheetRepository
 		return { data, error, asObservable: () => this.#treeStore!.childrenOf(path) };
 	}
 
-	async requestItemsLegacy(paths: Array<string>) {
+	async requestItems(paths: Array<string>) {
 		if (!paths) throw new Error('Paths are missing');
 		await this.#init;
 		const { data, error } = await this.#treeDataSource.getItems(paths);
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts
index 08ef653320..19913a4d19 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/stylesheet-workspace.context.ts
@@ -48,6 +48,10 @@ export class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext<UmbStyles
 		return this.#rules.getValue();
 	}
 
+	setRules(rules: RichTextRuleModel[]) {
+		this.#rules.next(rules);
+	}
+
 	setName(value: string) {
 		this.#data.next({ ...this.#data.value, name: value });
 	}
@@ -72,6 +76,24 @@ export class UmbStylesheetWorkspaceContext extends UmbWorkspaceContext<UmbStyles
 		}
 	}
 
+	async sendRulesGetContent() {
+		const requestBody = {
+			content: this.getData()?.content,
+			rules: this.getRules(),
+		};
+
+		const { data } = await this.repository.interpolateStylesheetRules(requestBody);
+		this.setContent(data?.content ?? '');
+	}
+
+	async sendContentGetRules() {
+		const requestBody = {
+			content: this.getData()?.content,
+		};
+
+		const { data } = await this.repository.extractStylesheetRules(requestBody);
+	}
+
 	public async save() {
 		const stylesheet = this.getData();
 
diff --git a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
index 120cdd7228..56af258ad7 100644
--- a/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
+++ b/src/Umbraco.Web.UI.Client/src/packages/templating/stylesheets/workspace/views/rich-text-editor/stylesheet-workspace-view-rich-text-editor.element.ts
@@ -65,7 +65,6 @@ export class UmbStylesheetWorkspaceViewRichTextEditorElement extends UmbLitEleme
 			});
 
 			this.observe(this.#stylesheetWorkspaceContext.rules, (rules) => {
-				debugger;
 				this._rules = rules;
 			});
 		});