diff --git a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html
index 57e8f4d..39e744a 100644
--- a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html
+++ b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.html
@@ -6,19 +6,19 @@
     <button type="button" (click)="toggleCode()">{{ showCode() ? 'Preview' : 'Code' }}</button>
   </div>
 
-  @if (showCode()) {
-    <textarea
-      class="html-editor-code"
-      rows="10"
-      [value]="codeValue()"
-      (input)="updateCode($any($event.target).value)"
-    ></textarea>
-  } @else {
-    <div
-      #surface
-      class="html-editor-surface"
-      contenteditable="true"
-      (input)="onInput()"
-    ></div>
-  }
+  <textarea
+    class="html-editor-code"
+    rows="10"
+    [hidden]="!showCode()"
+    [value]="codeValue()"
+    (input)="updateCode($any($event.target).value)"
+  ></textarea>
+
+  <div
+    #surface
+    class="html-editor-surface"
+    [hidden]="showCode()"
+    contenteditable="true"
+    (input)="onInput()"
+  ></div>
 </div>
diff --git a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts
index c0df2f2..85b1bcf 100644
--- a/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts
+++ b/src/app/features/project-editor/components/html-editor/marketplace-html-editor.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild, signal } from '@angular/core';
+import { AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnChanges, Output, SimpleChanges, ViewChild, signal } from '@angular/core';
 
 export interface HtmlEditorToolbarCommand {
   id: string;
@@ -28,7 +28,7 @@ export const HTML_EDITOR_TOOLBAR: HtmlEditorToolbarCommand[] = [
   styleUrls: ['./marketplace-html-editor.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class MarketplaceHtmlEditorComponent implements OnChanges {
+export class MarketplaceHtmlEditorComponent implements OnChanges, AfterViewInit {
   @Input() html = '';
   @Output() htmlChange = new EventEmitter<string>();
   @ViewChild('surface', { static: true }) surface!: ElementRef<HTMLDivElement>;
@@ -38,7 +38,19 @@ export class MarketplaceHtmlEditorComponent implements OnChanges {
   readonly codeValue = signal('');
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (changes['html'] && this.surface && this.surface.nativeElement.innerHTML !== (this.html || '')) {
+    if (changes['html']) {
+      this.syncSurfaceFromInput();
+    }
+  }
+
+  ngAfterViewInit(): void {
+    // Safety net: on the very first change detection pass, ngOnChanges can run
+    // before the static ViewChild is resolved, so re-sync once the view is ready.
+    this.syncSurfaceFromInput();
+  }
+
+  private syncSurfaceFromInput(): void {
+    if (this.surface && this.surface.nativeElement.innerHTML !== (this.html || '')) {
       this.surface.nativeElement.innerHTML = this.html || '';
     }
   }