diff --git a/.ai/plans/2026-05-28-structured-intrinsic-mdx-elements.md b/.ai/plans/2026-05-28-structured-intrinsic-mdx-elements.md
new file mode 100644
index 00000000..2196220c
--- /dev/null
+++ b/.ai/plans/2026-05-28-structured-intrinsic-mdx-elements.md
@@ -0,0 +1,257 @@
+# Structured Intrinsic MDX Elements Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Parse lowercase intrinsic MDX/HTML as structured Studio blocks so native wrappers do not hide registered child components.
+
+**Architecture:** Add a `mdxIntrinsicElement` TipTap node beside `mdxComponent` and keep `mdxRawJsx` only as the unsupported fallback. The MDX AST parser will convert lowercase elements into intrinsic nodes when attributes are representable, the runtime editor will render them with block chrome, and the Markdown serializer will emit lowercase HTML tags.
+
+**Tech Stack:** Bun, TypeScript, TipTap 3, MDX mdast parser, React node views.
+
+---
+
+### Task 1: Parser Contract Tests
+
+**Files:**
+- Modify: `packages/studio/src/lib/markdown-pipeline.test.ts`
+
+- [ ] **Step 1: Add a failing test for lowercase wrappers containing components**
+
+Add a test that parses:
+
+```mdx
+<div style={{display: "flex", gap: "2rem"}}>
+  <Hero headlineLead="AI-native CMS for" />
+  <FeatureGrid headingLead="Built for teams that" />
+</div>
+```
+
+Expected JSON shape:
+
+```ts
+assert.equal(parsed.content?.[0]?.type, "mdxIntrinsicElement");
+assert.equal(parsed.content?.[0]?.attrs?.tagName, "div");
+assert.equal(parsed.content?.[0]?.content?.[0]?.type, "mdxComponent");
+assert.equal(parsed.content?.[0]?.content?.[0]?.attrs?.componentName, "Hero");
+assert.equal(parsed.content?.[0]?.content?.[1]?.type, "mdxComponent");
+assert.equal(
+  parsed.content?.[0]?.content?.[1]?.attrs?.componentName,
+  "FeatureGrid",
+);
+```
+
+- [ ] **Step 2: Add round-trip coverage for native form elements**
+
+Add a test that round-trips:
+
+```mdx
+<form name="contact">
+<label>
+Name
+<input type="text" name="name" required />
+</label>
+<button type="submit">Send</button>
+</form>
+```
+
+Expected: `roundTripMarkdown(source).markdown` contains `<form`, `<label>`, `<input`, and `<button`, and does not contain `mdxRawJsx`.
+
+- [ ] **Step 3: Run the focused tests and verify failure**
+
+Run:
+
+```bash
+bun test packages/studio/src/lib/markdown-pipeline.test.ts
+```
+
+Expected: the new intrinsic-element tests fail because lowercase elements still parse as `mdxRawJsx`.
+
+### Task 2: Intrinsic Node Extension
+
+**Files:**
+- Create: `packages/studio/src/lib/mdx-intrinsic-element-extension.ts`
+- Modify: `packages/studio/src/lib/editor-extensions.ts`
+
+- [ ] **Step 1: Implement `MdxIntrinsicElementExtension`**
+
+Create a TipTap node named `mdxIntrinsicElement` with:
+
+```ts
+group: "block";
+content: "block*";
+isolating: true;
+selectable: true;
+draggable: true;
+```
+
+Attributes:
+
+```ts
+tagName: { default: "" };
+props: { default: {} };
+isVoid: { default: false };
+```
+
+Markdown rendering should serialize:
+
+```mdx
+<tagName prop="value" />
+```
+
+for void nodes and:
+
+```mdx
+<tagName prop="value">
+children
+</tagName>
+```
+
+for wrapper nodes, using the existing `serializeMdxJsxAttributes` helper.
+
+- [ ] **Step 2: Register the extension**
+
+Update `createEditorExtensions` so it includes `MdxIntrinsicElementExtension` before `MdxRawJsxExtension` and exposes an override slot like the existing `mdxComponent` and `mdxRawJsx` slots.
+
+- [ ] **Step 3: Run the focused tests**
+
+Run:
+
+```bash
+bun test packages/studio/src/lib/markdown-pipeline.test.ts
+```
+
+Expected: tests still fail until the parser converts lowercase AST nodes to the new node type.
+
+### Task 3: Parser Conversion
+
+**Files:**
+- Modify: `packages/studio/src/lib/mdx-markdown-parser.ts`
+
+- [ ] **Step 1: Convert lowercase MDX AST elements to intrinsic nodes**
+
+Change the non-uppercase branch in `convertMdxJsxElementNode` so lowercase element names with parseable attributes return:
+
+```ts
+{
+  type: "mdxIntrinsicElement",
+  attrs: {
+    tagName: name,
+    props,
+    isVoid,
+  },
+  content,
+}
+```
+
+Continue returning `mdxRawJsx` when attribute parsing fails or the name is neither uppercase nor lowercase intrinsic syntax.
+
+- [ ] **Step 2: Preserve void semantics**
+
+Treat MDX self-closing syntax and known HTML void elements as void. Void intrinsic nodes must not carry parsed children.
+
+- [ ] **Step 3: Run the focused tests**
+
+Run:
+
+```bash
+bun test packages/studio/src/lib/markdown-pipeline.test.ts
+```
+
+Expected: parser and round-trip tests pass.
+
+### Task 4: Runtime Editor Rendering
+
+**Files:**
+- Create: `packages/studio/src/lib/runtime-ui/components/editor/mdx-intrinsic-element-node-view.tsx`
+- Modify: `packages/studio/src/lib/runtime-ui/components/editor/tiptap-editor.tsx`
+- Modify: `packages/studio/src/lib/runtime-ui/components/editor/mdx-component-node-view.tsx`
+
+- [ ] **Step 1: Add an intrinsic node view**
+
+Render intrinsic nodes with the existing `MdxComponentNodeFrame`, using the label `tagName`, the same collapse/duplicate/delete chrome, and `NodeViewContent` for non-void children.
+
+- [ ] **Step 2: Render parseable intrinsic HTML as inert native preview**
+
+For non-void intrinsic elements, wrap the editable content in `createElement(tagName, safeProps, editableSlot)` when safe to do so. For void elements, render `createElement(tagName, safeProps)` inside a `contentEditable={false}` preview surface.
+
+- [ ] **Step 3: Register the node view**
+
+Update `TipTapEditor` so `mdxIntrinsicElement` uses `ReactNodeViewRenderer(MdxIntrinsicElementNodeView)`.
+
+- [ ] **Step 4: Run runtime UI tests affected by component node views**
+
+Run:
+
+```bash
+bun test packages/studio/src/lib/runtime-ui/components/editor/mdx-component-collapse.test.tsx packages/studio/src/lib/runtime-ui/components/editor/mdx-component-selection.test.ts packages/studio/src/lib/markdown-pipeline.test.ts
+```
+
+Expected: tests pass.
+
+### Task 5: Selection and Props Panel
+
+**Files:**
+- Modify: `packages/studio/src/lib/runtime-ui/components/editor/mdx-component-selection.ts`
+- Modify: `packages/studio/src/lib/runtime-ui/components/editor/mdx-props-panel.tsx`
+- Modify: `packages/studio/src/lib/runtime-ui/components/editor/visual-composition-commands.ts`
+
+- [ ] **Step 1: Generalize selected block metadata**
+
+Allow `getSelectedMdxComponent` and `updateSelectedMdxComponentProps` to work with `mdxIntrinsicElement` nodes by returning a selection with `kind: "component" | "intrinsic"`.
+
+- [ ] **Step 2: Show intrinsic props in the side panel**
+
+Update `MdxPropsPanel` so intrinsic selections show the lowercase tag name and a `VisualStyleInspector`-compatible style editor when the `style` prop exists or can be added. Avoid the unregistered component warning for intrinsic nodes.
+
+- [ ] **Step 3: Keep existing component commands scoped**
+
+Only `mdxComponent` nodes should use catalog-only operations such as wrap-in-Box and host component validation. Intrinsic nodes may support duplicate/delete/collapse, but not catalog validation.
+
+- [ ] **Step 4: Run targeted selection and panel tests**
+
+Run:
+
+```bash
+bun test packages/studio/src/lib/runtime-ui/components/editor/mdx-component-selection.test.ts packages/studio/src/lib/runtime-ui/components/editor/visual-style-inspector.test.ts packages/studio/src/lib/runtime-ui/pages/content-document-page.test.tsx
+```
+
+Expected: tests pass after updating expectations for intrinsic selections.
+
+### Task 6: Changeset, Quality, Commit, Push
+
+**Files:**
+- Create via CLI: `.changeset/*.md`
+
+- [ ] **Step 1: Create a changeset**
+
+Run:
+
+```bash
+bun run changeset
+```
+
+Select `@mdcms/studio`, patch release, and describe the Studio intrinsic HTML editor support.
+
+- [ ] **Step 2: Run validation**
+
+Run:
+
+```bash
+bun run format:check
+bun run check
+bun test packages/studio/src/lib/markdown-pipeline.test.ts
+```
+
+Expected: all commands pass.
+
+- [ ] **Step 3: Commit and push**
+
+Run:
+
+```bash
+git add docs/specs/SPEC-007-editor-mdx-and-collaboration.md docs/specs/SPEC-014-ai-assisted-studio-editing.md .ai/research/2026-05-28-structured-intrinsic-mdx-elements-design.md .ai/plans/2026-05-28-structured-intrinsic-mdx-elements.md packages/studio/src .changeset
+git commit -m "feat(studio): structure intrinsic mdx elements"
+git push -u origin codex/structured-intrinsic-mdx-elements
+```
+
+Expected: branch is pushed with the spec, implementation, tests, and changeset.
diff --git a/.ai/research/2026-05-28-structured-intrinsic-mdx-elements-design.md b/.ai/research/2026-05-28-structured-intrinsic-mdx-elements-design.md
new file mode 100644
index 00000000..8974c9d7
--- /dev/null
+++ b/.ai/research/2026-05-28-structured-intrinsic-mdx-elements-design.md
@@ -0,0 +1,63 @@
+# Structured Intrinsic MDX Elements Design
+
+## Decision
+
+Studio will treat parseable lowercase intrinsic MDX/HTML elements as structured
+visual blocks instead of raw JSX preview islands. Tags such as `div`, `section`,
+`form`, `label`, `input`, and `button` remain valid MDX, but the editor surface
+represents them as block nodes with a tag name, props, void status, and editable
+children.
+
+Raw JSX preservation remains only for syntax Studio cannot safely represent as
+structured data. The fallback must be explicit unsupported content, not a
+sanitized partial HTML preview that hides the wrapper tag while showing escaped
+children.
+
+## Rationale
+
+The current raw JSX island behavior preserves valid MDX but creates a confusing
+editing model. A lowercase wrapper like `<div>` can swallow nested registered
+components, causing the wrapper to render as invisible HTML while nested
+PascalCase components appear as escaped text. Editors should see all document
+structure as blocks when it is parseable, including native HTML elements.
+
+## Editor Contract
+
+- Uppercase MDX elements continue to parse as `mdxComponent` nodes.
+- Parseable lowercase MDX/HTML elements parse as `mdxIntrinsicElement` nodes.
+- Intrinsic nodes store `tagName`, `props`, and `isVoid`.
+- Intrinsic nodes can contain parsed Markdown, registered components, built-ins,
+  and other intrinsic nodes when the source element is not void.
+- Intrinsic nodes serialize back to lowercase MDX/HTML tags.
+- Intrinsic nodes are not inserted from the default component palette in this
+  pass.
+- Intrinsic nodes do not use catalog validation because their contract is native
+  HTML syntax, not host component metadata.
+- Unparseable JSX remains preserved as unsupported raw content.
+
+## Implementation Shape
+
+The parser should use the MDX AST that already exposes lowercase elements and
+their children. Instead of returning `mdxRawJsx` for every non-uppercase element,
+it should parse attributes and return `mdxIntrinsicElement` for lowercase tag
+names when attributes are representable. The existing raw JSX extension stays as
+the fallback for cases that cannot be represented.
+
+The new node extension should mirror the block affordances of `mdxComponent`
+where practical: block group, selectable, isolating, optional content for
+non-void elements, Markdown parse/render hooks, and an editor node view that
+shows the tag label and nested content. The side panel can initially reuse the
+existing prop editing path by exposing the selected node's props and tag name.
+
+## Validation
+
+Targeted tests should prove that:
+
+- `<div><Hero /></div>` parses into an intrinsic `div` node containing an
+  `mdxComponent` `Hero` child.
+- Nested intrinsic elements round-trip through Markdown without becoming raw
+  preview text.
+- Native form syntax still round-trips, including void controls such as
+  `<input />`.
+- Existing raw fallback tests continue to pass for unsupported/unparseable
+  syntax.
diff --git a/.changeset/silly-months-kneel.md b/.changeset/silly-months-kneel.md
new file mode 100644
index 00000000..468a72ba
--- /dev/null
+++ b/.changeset/silly-months-kneel.md
@@ -0,0 +1,5 @@
+---
+"@mdcms/studio": patch
+---
+
+Render lowercase MDX/HTML elements as structured Studio blocks.
diff --git a/docs/specs/SPEC-007-editor-mdx-and-collaboration.md b/docs/specs/SPEC-007-editor-mdx-and-collaboration.md
index 0cde9049..9a36a753 100644
--- a/docs/specs/SPEC-007-editor-mdx-and-collaboration.md
+++ b/docs/specs/SPEC-007-editor-mdx-and-collaboration.md
@@ -256,13 +256,24 @@ deterministic error when `config.components` declares `Box`, `Text`, `Image`, or
 `style` prop in the extracted catalog; built-in support does not imply a
 universal wrapper or style injection layer for host components.
 
-Raw lowercase MDX/HTML elements such as `<div>`, `<form>`, `<label>`,
-`<input>`, and `<button>` remain valid advanced MDX authoring syntax. They are
-not catalog components and are not shown as first-class visual composition
-blocks. Studio preserves them as raw MDX islands, renders an inert preview where
-possible, and serializes them back to their original MDX source. Built-ins are
-therefore the supported visual-editing primitives, not the only HTML that can
-exist in a document.
+Lowercase intrinsic MDX/HTML elements such as `<div>`, `<form>`, `<label>`,
+`<input>`, and `<button>` remain valid advanced MDX authoring syntax. When their
+attributes can be represented as Studio props, Studio parses them into
+first-class visual composition blocks with their tag name, props, void status,
+and editable children. Intrinsic blocks are not catalog components, are not
+shown in the insert component palette by default, and do not participate in host
+component prop-schema validation. They still render in the canvas with the same
+block affordances as MDX components so editors never see a partial raw HTML
+preview as the normal editing surface.
+
+Studio preserves intrinsic HTML semantics during serialization: an intrinsic
+`div` block serializes as `<div>`, a `form` block serializes as `<form>`, and
+void intrinsic elements such as `<input />` serialize as self-closing lowercase
+HTML. Built-ins are the supported visual-editing primitives for common layout
+and inline content, while intrinsic blocks cover valid native HTML semantics and
+legacy MDX content. Raw MDX islands are a last-resort preservation fallback only
+for unparseable or unsupported syntax; they must be clearly labeled as
+unsupported content rather than rendered as a half-raw inline preview.
 
 The legacy `/` slash menu lists only host-registered components and is
 positioned inline near the active cursor. Built-ins remain hidden from that
diff --git a/docs/specs/SPEC-014-ai-assisted-studio-editing.md b/docs/specs/SPEC-014-ai-assisted-studio-editing.md
index 4c02e212..a45de657 100644
--- a/docs/specs/SPEC-014-ai-assisted-studio-editing.md
+++ b/docs/specs/SPEC-014-ai-assisted-studio-editing.md
@@ -526,12 +526,13 @@ Rules:
   does not create different validation semantics; it only distinguishes
   MDCMS-provided components from host-registered components for Studio
   discoverability.
-- Lowercase intrinsic MDX/HTML elements are valid raw MDX output. They are not
+- Lowercase intrinsic MDX/HTML elements are valid MDX output. They are not
   catalog components, so the catalog validator does not require them to be
-  registered. The assistant should prefer catalog components and built-ins when
-  the user asks for visually editable composition, and use raw intrinsic HTML
-  only when the requested result needs native HTML semantics such as forms or
-  inputs.
+  registered. When Studio can parse their attributes, they render as structured
+  intrinsic element blocks with editable children rather than raw HTML preview
+  text. The assistant should prefer catalog components and built-ins when the
+  user asks for common visual composition, and use raw intrinsic HTML only when
+  the requested result needs native HTML semantics such as forms or inputs.
 - Inline styles are valid only through first-class `style` props. Style values
   must be flat objects whose values are strings or numbers.
 
diff --git a/packages/studio/src/lib/editor-extensions.ts b/packages/studio/src/lib/editor-extensions.ts
index 0493e01d..d9f25abd 100644
--- a/packages/studio/src/lib/editor-extensions.ts
+++ b/packages/studio/src/lib/editor-extensions.ts
@@ -13,6 +13,7 @@ import StarterKit from "@tiptap/starter-kit";
 import { common, createLowlight } from "lowlight";
 
 import { MdxComponentExtension } from "./mdx-component-extension.js";
+import { MdxIntrinsicElementExtension } from "./mdx-intrinsic-element-extension.js";
 import { MdxRawJsxExtension } from "./mdx-raw-jsx-extension.js";
 
 // Returns a lowlight instance seeded with the common language set and with
@@ -173,6 +174,7 @@ const HeadlessCodeBlock = CodeBlockLowlight.configure({
 export function createEditorExtensions(options?: {
   mdxRawJsx?: Extensions[number];
   mdxComponent?: Extensions[number];
+  mdxIntrinsicElement?: Extensions[number];
   codeBlock?: Extensions[number];
 }): Extensions {
   return [
@@ -203,8 +205,9 @@ export function createEditorExtensions(options?: {
       nested: true,
     }),
     options?.codeBlock ?? HeadlessCodeBlock,
-    options?.mdxRawJsx ?? MdxRawJsxExtension,
     options?.mdxComponent ?? MdxComponentExtension,
+    options?.mdxIntrinsicElement ?? MdxIntrinsicElementExtension,
+    options?.mdxRawJsx ?? MdxRawJsxExtension,
     Markdown,
   ];
 }
diff --git a/packages/studio/src/lib/html-void-elements.ts b/packages/studio/src/lib/html-void-elements.ts
new file mode 100644
index 00000000..491cb66e
--- /dev/null
+++ b/packages/studio/src/lib/html-void-elements.ts
@@ -0,0 +1,16 @@
+export const HTML_VOID_ELEMENTS = new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr",
+]);
diff --git a/packages/studio/src/lib/markdown-pipeline.test.ts b/packages/studio/src/lib/markdown-pipeline.test.ts
index c48642b3..642c6a72 100644
--- a/packages/studio/src/lib/markdown-pipeline.test.ts
+++ b/packages/studio/src/lib/markdown-pipeline.test.ts
@@ -200,18 +200,66 @@ test("markdown pipeline parses indented nested MDX components inside wrapper chi
   );
 });
 
-test("markdown pipeline preserves lowercase raw MDX islands inside wrapper children", () => {
+test("markdown pipeline parses lowercase intrinsic wrappers as structured blocks", () => {
   const source = [
-    '<HomeSection eyebrow="Content layer" title="Contact Us">',
-    '<form name="contact" method="POST" netlify>',
+    '<div style={{display: "flex", gap: "2rem"}}>',
+    '  <Hero headlineLead="AI-native CMS for" />',
+    '  <FeatureGrid headingLead="Built for teams that" />',
+    "</div>",
+  ].join("\n");
+
+  const parsed = parseMarkdownToDocument(source);
+  const wrapper = parsed.content?.[0];
+  const wrapperChildren = wrapper?.content ?? [];
+
+  assert.equal(wrapper?.type, "mdxIntrinsicElement");
+  assert.equal(wrapper?.attrs?.tagName, "div");
+  assert.equal(wrapper?.attrs?.isVoid, false);
+  assert.deepEqual(wrapper?.attrs?.props, {
+    style: {
+      display: "flex",
+      gap: "2rem",
+    },
+  });
+  assert.equal(wrapperChildren.length, 2);
+  assert.equal(wrapperChildren[0]?.type, "mdxComponent");
+  assert.equal(wrapperChildren[0]?.attrs?.componentName, "Hero");
+  assert.equal(wrapperChildren[1]?.type, "mdxComponent");
+  assert.equal(wrapperChildren[1]?.attrs?.componentName, "FeatureGrid");
+});
+
+test("markdown pipeline round-trips native form elements as structured intrinsic blocks", () => {
+  const source = [
+    '<form name="contact">',
     "<label>",
-    "Name<br />",
-    '<input type="text" name="name" required style={{ width: "100%" }} />',
+    "Name",
+    '<input type="text" name="name" required />',
     "</label>",
-    '<button type="submit" style={{ padding: "0.75rem 1.5rem", backgroundColor: "#0070f3", color: "#fff" }}>',
-    "Send Message",
-    "</button>",
+    '<button type="submit">Send</button>',
     "</form>",
+  ].join("\n");
+
+  const parsed = parseMarkdownToDocument(source);
+  const serialized = serializeDocumentToMarkdown(parsed);
+
+  assert.equal(parsed.content?.[0]?.type, "mdxIntrinsicElement");
+  assert.equal(parsed.content?.[0]?.attrs?.tagName, "form");
+  assert.match(serialized, /<form name="contact">/);
+  assert.match(serialized, /<label>/);
+  assert.match(
+    serialized,
+    /<input type="text" name="name" required=\{true\} \/>/,
+  );
+  assert.match(serialized, /<button type="submit">/);
+  assert.doesNotMatch(JSON.stringify(parsed), /mdxRawJsx/);
+});
+
+test("markdown pipeline preserves unsupported raw MDX islands inside wrapper children", () => {
+  const source = [
+    '<HomeSection eyebrow="Content layer" title="Contact Us">',
+    "<div {...dynamicProps}>",
+    "Unsupported dynamic attributes are preserved.",
+    "</div>",
     "</HomeSection>",
   ].join("\n");
 
@@ -232,15 +280,9 @@ test("markdown pipeline preserves lowercase raw MDX islands inside wrapper child
         type: "mdxRawJsx",
         attrs: {
           source: [
-            '<form name="contact" method="POST" netlify>',
-            "<label>",
-            "Name<br />",
-            '<input type="text" name="name" required style={{ width: "100%" }} />',
-            "</label>",
-            '<button type="submit" style={{ padding: "0.75rem 1.5rem", backgroundColor: "#0070f3", color: "#fff" }}>',
-            "Send Message",
-            "</button>",
-            "</form>",
+            "<div {...dynamicProps}>",
+            "Unsupported dynamic attributes are preserved.",
+            "</div>",
           ].join("\n"),
         },
       },
diff --git a/packages/studio/src/lib/mdx-intrinsic-element-extension.ts b/packages/studio/src/lib/mdx-intrinsic-element-extension.ts
new file mode 100644
index 00000000..4dc8ce03
--- /dev/null
+++ b/packages/studio/src/lib/mdx-intrinsic-element-extension.ts
@@ -0,0 +1,532 @@
+import {
+  Node,
+  mergeAttributes,
+  type JSONContent,
+  type MarkdownToken,
+} from "@tiptap/core";
+import type { Node as PmNode, Slice } from "@tiptap/pm/model";
+import { NodeSelection, Plugin, PluginKey } from "@tiptap/pm/state";
+import { ReplaceStep } from "@tiptap/pm/transform";
+
+import { HTML_VOID_ELEMENTS } from "./html-void-elements.js";
+import {
+  parseMdxJsxAttributes,
+  serializeMdxJsxAttributes,
+} from "./mdx-component-extension.js";
+
+type MdxIntrinsicElementToken = {
+  type: "mdxIntrinsicElement";
+  raw: string;
+  tagName: string;
+  props: Record<string, unknown>;
+  isVoid: boolean;
+  content: string;
+  tokens?: MarkdownToken[];
+};
+
+type OpeningTagMatch = {
+  tagName: string;
+  propsSource: string;
+  isVoid: boolean;
+  raw: string;
+  endIndex: number;
+};
+
+type ClosingTagMatch = {
+  tagName: string;
+  startIndex: number;
+  endIndex: number;
+};
+
+function isLowercaseIntrinsicName(value: string): boolean {
+  return /^[a-z][A-Za-z0-9._-]*$/.test(value);
+}
+
+function findNextTagStart(input: string, startIndex: number): number {
+  return input.indexOf("<", startIndex);
+}
+
+function readOpeningTag(input: string, offset = 0): OpeningTagMatch | null {
+  if (input[offset] !== "<" || input[offset + 1] === "/") {
+    return null;
+  }
+
+  let cursor = offset + 1;
+  const nameStart = cursor;
+
+  while (cursor < input.length && /[A-Za-z0-9._-]/.test(input[cursor] ?? "")) {
+    cursor += 1;
+  }
+
+  const tagName = input.slice(nameStart, cursor);
+
+  if (!isLowercaseIntrinsicName(tagName)) {
+    return null;
+  }
+
+  const propsStart = cursor;
+  let quote: '"' | "'" | null = null;
+  let braceDepth = 0;
+
+  while (cursor < input.length) {
+    const current = input[cursor]!;
+
+    if (quote) {
+      if (current === quote && input[cursor - 1] !== "\\") {
+        quote = null;
+      }
+      cursor += 1;
+      continue;
+    }
+
+    if (current === '"' || current === "'") {
+      quote = current;
+      cursor += 1;
+      continue;
+    }
+
+    if (current === "{") {
+      braceDepth += 1;
+      cursor += 1;
+      continue;
+    }
+
+    if (current === "}") {
+      braceDepth = Math.max(0, braceDepth - 1);
+      cursor += 1;
+      continue;
+    }
+
+    if (current === ">" && braceDepth === 0) {
+      const raw = input.slice(offset, cursor + 1);
+      const beforeClose = input.slice(propsStart, cursor).trimEnd();
+      const selfClosing = beforeClose.endsWith("/");
+      const propsSource = selfClosing
+        ? beforeClose.slice(0, -1).trim()
+        : beforeClose.trim();
+
+      return {
+        tagName,
+        propsSource,
+        isVoid: selfClosing || HTML_VOID_ELEMENTS.has(tagName),
+        raw,
+        endIndex: cursor + 1,
+      };
+    }
+
+    cursor += 1;
+  }
+
+  return null;
+}
+
+function readClosingTag(input: string, offset: number): ClosingTagMatch | null {
+  if (input.slice(offset, offset + 2) !== "</") {
+    return null;
+  }
+
+  let cursor = offset + 2;
+  const nameStart = cursor;
+
+  while (cursor < input.length && /[A-Za-z0-9._-]/.test(input[cursor] ?? "")) {
+    cursor += 1;
+  }
+
+  const tagName = input.slice(nameStart, cursor);
+
+  if (!isLowercaseIntrinsicName(tagName)) {
+    return null;
+  }
+
+  while (cursor < input.length && /\s/.test(input[cursor] ?? "")) {
+    cursor += 1;
+  }
+
+  if (input[cursor] !== ">") {
+    return null;
+  }
+
+  return {
+    tagName,
+    startIndex: offset,
+    endIndex: cursor + 1,
+  };
+}
+
+function findMatchingClosingTag(
+  input: string,
+  tagName: string,
+  searchStart: number,
+): ClosingTagMatch | null {
+  let cursor = searchStart;
+  let depth = 0;
+
+  while (cursor < input.length) {
+    const tagOffset = findNextTagStart(input, cursor);
+
+    if (tagOffset < 0) {
+      return null;
+    }
+
+    const openingTag = readOpeningTag(input, tagOffset);
+
+    if (openingTag) {
+      if (openingTag.tagName === tagName && !openingTag.isVoid) {
+        depth += 1;
+      }
+      cursor = openingTag.endIndex;
+      continue;
+    }
+
+    const closingTag = readClosingTag(input, tagOffset);
+
+    if (closingTag) {
+      if (closingTag.tagName === tagName) {
+        if (depth === 0) {
+          return closingTag;
+        }
+        depth -= 1;
+      }
+      cursor = closingTag.endIndex;
+      continue;
+    }
+
+    cursor = tagOffset + 1;
+  }
+
+  return null;
+}
+
+export function tokenizeMdxIntrinsicElementBlock(
+  input: string,
+): Omit<MdxIntrinsicElementToken, "type"> | null {
+  const openingTag = readOpeningTag(input, 0);
+
+  if (!openingTag) {
+    return null;
+  }
+
+  const props = parseMdxJsxAttributes(openingTag.propsSource);
+
+  if (openingTag.isVoid) {
+    return {
+      tagName: openingTag.tagName,
+      isVoid: true,
+      props,
+      raw: openingTag.raw,
+      content: "",
+    };
+  }
+
+  const closingTag = findMatchingClosingTag(
+    input,
+    openingTag.tagName,
+    openingTag.endIndex,
+  );
+
+  if (!closingTag) {
+    return null;
+  }
+
+  return {
+    tagName: openingTag.tagName,
+    isVoid: false,
+    props,
+    raw: input.slice(0, closingTag.endIndex),
+    content: input.slice(openingTag.endIndex, closingTag.startIndex).trim(),
+  };
+}
+
+function hasOnlyEmptyParagraphChild(
+  content: JSONContent[] | undefined,
+): boolean {
+  if (content?.length !== 1) {
+    return false;
+  }
+
+  const [child] = content;
+
+  return child?.type === "paragraph" && (child.content?.length ?? 0) === 0;
+}
+
+function hasMeaningfulChildren(content: JSONContent[] | undefined): boolean {
+  return (
+    Array.isArray(content) &&
+    content.length > 0 &&
+    !hasOnlyEmptyParagraphChild(content)
+  );
+}
+
+function renderMdxIntrinsicElementMarkdown(
+  node: JSONContent,
+  childrenMarkdown: string,
+) {
+  const tagName = node.attrs?.tagName;
+  const isVoid = node.attrs?.isVoid === true;
+  const props =
+    (node.attrs?.props as Record<string, unknown> | undefined) ?? {};
+
+  if (typeof tagName !== "string" || tagName.trim().length === 0) {
+    return "";
+  }
+
+  const serializedProps = serializeMdxJsxAttributes(props);
+  const attrSegment = serializedProps.length > 0 ? ` ${serializedProps}` : "";
+
+  if (isVoid) {
+    if (hasMeaningfulChildren(node.content)) {
+      throw new Error(
+        `Void MDX intrinsic element "${tagName}" cannot serialize with child content.`,
+      );
+    }
+
+    return `<${tagName}${attrSegment} />`;
+  }
+
+  if (
+    childrenMarkdown.trim().length === 0 ||
+    hasOnlyEmptyParagraphChild(node.content)
+  ) {
+    return `<${tagName}${attrSegment}></${tagName}>`;
+  }
+
+  return `<${tagName}${attrSegment}>\n${childrenMarkdown}\n</${tagName}>`;
+}
+
+function countIntrinsicNodes(root: PmNode): number {
+  let count = 0;
+
+  root.descendants((node) => {
+    if (node.type.name === "mdxIntrinsicElement") {
+      count += 1;
+      return false;
+    }
+    return true;
+  });
+
+  return count;
+}
+
+function anyVoidIntrinsicNodeHasContent(root: PmNode): boolean {
+  let found = false;
+
+  root.descendants((node) => {
+    if (found) {
+      return false;
+    }
+
+    if (
+      node.type.name === "mdxIntrinsicElement" &&
+      node.attrs.isVoid === true &&
+      node.content.size > 0
+    ) {
+      found = true;
+      return false;
+    }
+
+    return true;
+  });
+
+  return found;
+}
+
+function sliceContainsTextContent(slice: Slice): boolean {
+  let found = false;
+
+  slice.content.descendants((node) => {
+    if (found) {
+      return false;
+    }
+
+    if (node.isText) {
+      found = true;
+      return false;
+    }
+
+    return true;
+  });
+
+  return found;
+}
+
+function sliceContainsIntrinsicNode(slice: Slice): boolean {
+  let found = false;
+
+  slice.content.descendants((node) => {
+    if (found) {
+      return false;
+    }
+
+    if (node.type.name === "mdxIntrinsicElement") {
+      found = true;
+      return false;
+    }
+
+    return true;
+  });
+
+  return found;
+}
+
+export const MdxIntrinsicElementExtension = Node.create({
+  name: "mdxIntrinsicElement",
+  group: "block",
+  content: "block*",
+  isolating: true,
+  selectable: true,
+  draggable: true,
+  priority: 950,
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey("mdxIntrinsicElementNodeGuard"),
+        filterTransaction(tr, state) {
+          if (!tr.docChanged) {
+            return true;
+          }
+
+          if (tr.getMeta("preventUpdate") !== undefined) {
+            return true;
+          }
+
+          if (anyVoidIntrinsicNodeHasContent(tr.doc)) {
+            return false;
+          }
+
+          const beforeCount = countIntrinsicNodes(state.doc);
+          const afterCount = countIntrinsicNodes(tr.doc);
+
+          if (afterCount >= beforeCount) {
+            return true;
+          }
+
+          for (const step of tr.steps) {
+            if (!(step instanceof ReplaceStep)) {
+              continue;
+            }
+
+            if (step.slice.content.size === 0) {
+              continue;
+            }
+
+            if (sliceContainsIntrinsicNode(step.slice)) {
+              continue;
+            }
+
+            if (!sliceContainsTextContent(step.slice)) {
+              continue;
+            }
+
+            return false;
+          }
+
+          return true;
+        },
+        props: {
+          handleTextInput(view, _from, _to, text) {
+            const { selection } = view.state;
+
+            if (
+              !(selection instanceof NodeSelection) ||
+              selection.node.type.name !== "mdxIntrinsicElement"
+            ) {
+              return false;
+            }
+
+            const after = selection.to;
+            view.dispatch(view.state.tr.insertText(text, after, after));
+            return true;
+          },
+        },
+      }),
+    ];
+  },
+
+  addAttributes() {
+    return {
+      tagName: {
+        default: "",
+      },
+      props: {
+        default: {},
+      },
+      isVoid: {
+        default: false,
+      },
+    };
+  },
+
+  parseHTML() {
+    return [{ tag: "mdx-intrinsic-element" }];
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    const tagName =
+      typeof HTMLAttributes.tagName === "string" ? HTMLAttributes.tagName : "";
+    const attributes = mergeAttributes(HTMLAttributes, {
+      "data-mdcms-mdx-intrinsic-element": tagName,
+      "data-mdcms-mdx-void": HTMLAttributes.isVoid === true ? "true" : "false",
+    });
+
+    return HTMLAttributes.isVoid === true
+      ? ["mdx-intrinsic-element", attributes]
+      : ["mdx-intrinsic-element", attributes, 0];
+  },
+
+  markdownTokenName: "mdxIntrinsicElement",
+
+  parseMarkdown(token, helpers) {
+    const intrinsicToken = token as unknown as MdxIntrinsicElementToken;
+
+    return helpers.createNode(
+      "mdxIntrinsicElement",
+      {
+        tagName: intrinsicToken.tagName,
+        props: intrinsicToken.props ?? {},
+        isVoid: intrinsicToken.isVoid === true,
+      },
+      intrinsicToken.isVoid
+        ? []
+        : helpers.parseChildren(intrinsicToken.tokens ?? []),
+    );
+  },
+
+  renderMarkdown(node, helpers) {
+    return renderMdxIntrinsicElementMarkdown(
+      node,
+      helpers.renderChildren(node.content ?? [], "\n\n"),
+    );
+  },
+
+  markdownTokenizer: {
+    name: "mdxIntrinsicElement",
+    level: "block",
+    start(src) {
+      const match = src.match(/^<[a-z][A-Za-z0-9._-]*/m);
+      return match?.index ?? -1;
+    },
+    tokenize(src, _tokens, lexer) {
+      const token = tokenizeMdxIntrinsicElementBlock(src);
+
+      if (!token) {
+        return undefined;
+      }
+
+      const contentTokens =
+        token.isVoid || token.content.trim().length === 0
+          ? []
+          : lexer.blockTokens(token.content);
+
+      return {
+        type: "mdxIntrinsicElement",
+        raw: token.raw,
+        tagName: token.tagName,
+        props: token.props,
+        isVoid: token.isVoid,
+        content: token.content,
+        tokens: contentTokens,
+      } satisfies MdxIntrinsicElementToken;
+    },
+  },
+});
diff --git a/packages/studio/src/lib/mdx-markdown-parser.ts b/packages/studio/src/lib/mdx-markdown-parser.ts
index f438c8f4..7a5872b5 100644
--- a/packages/studio/src/lib/mdx-markdown-parser.ts
+++ b/packages/studio/src/lib/mdx-markdown-parser.ts
@@ -4,6 +4,7 @@ import { fromMarkdown } from "mdast-util-from-markdown";
 import { mdxFromMarkdown } from "mdast-util-mdx";
 import { mdx } from "micromark-extension-mdx";
 
+import { HTML_VOID_ELEMENTS } from "./html-void-elements.js";
 import { parseMdxAttributeValue } from "./mdx-component-extension.js";
 
 type AstPosition = {
@@ -39,6 +40,10 @@ function isUppercaseComponentName(value: string | null | undefined): boolean {
   return typeof value === "string" && /^[A-Z][A-Za-z0-9._-]*$/.test(value);
 }
 
+function isLowercaseIntrinsicName(value: string | null | undefined): boolean {
+  return typeof value === "string" && /^[a-z][A-Za-z0-9._-]*$/.test(value);
+}
+
 function getSourceSlice(source: string, node: { position?: AstPosition }) {
   const start = node.position?.start?.offset;
   const end = node.position?.end?.offset;
@@ -320,6 +325,27 @@ function convertMdxJsxElementNode(
   const name = node.name ?? "";
 
   if (!isUppercaseComponentName(name)) {
+    const props = parseMdxElementProps(node, source);
+
+    if (isLowercaseIntrinsicName(name) && props !== null) {
+      const isVoid =
+        (rawSource?.trimEnd().endsWith("/>") ?? false) ||
+        HTML_VOID_ELEMENTS.has(name);
+      const content = isVoid
+        ? []
+        : convertChildrenToBlocks(node.children ?? [], source);
+
+      return {
+        type: "mdxIntrinsicElement",
+        attrs: {
+          tagName: name,
+          isVoid,
+          props,
+        },
+        ...(content.length > 0 ? { content } : {}),
+      };
+    }
+
     return {
       type: "mdxRawJsx",
       attrs: {
diff --git a/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-panel-selection.test.ts b/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-panel-selection.test.ts
index 90db029b..d73b574c 100644
--- a/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-panel-selection.test.ts
+++ b/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-panel-selection.test.ts
@@ -17,6 +17,7 @@ const registeredComponent = {
 test("does not republish the same MDX selection snapshot", () => {
   const previous = createPublishedMdxComponentSelectionSnapshot({
     selected: {
+      kind: "component",
       component: registeredComponent,
       componentName: "Chart",
       isVoid: true,
@@ -31,6 +32,7 @@ test("does not republish the same MDX selection snapshot", () => {
   });
   const next = createPublishedMdxComponentSelectionSnapshot({
     selected: {
+      kind: "component",
       component: registeredComponent,
       componentName: "Chart",
       isVoid: true,
@@ -50,6 +52,7 @@ test("does not republish the same MDX selection snapshot", () => {
 test("republishes the MDX selection when the snapshot meaningfully changes", () => {
   const previous = createPublishedMdxComponentSelectionSnapshot({
     selected: {
+      kind: "component",
       component: registeredComponent,
       componentName: "Chart",
       isVoid: true,
@@ -63,6 +66,7 @@ test("republishes the MDX selection when the snapshot meaningfully changes", ()
   });
   const next = createPublishedMdxComponentSelectionSnapshot({
     selected: {
+      kind: "component",
       component: registeredComponent,
       componentName: "Chart",
       isVoid: true,
@@ -81,6 +85,7 @@ test("republishes the MDX selection when the snapshot meaningfully changes", ()
 test("republishes the MDX selection when it is cleared", () => {
   const previous = createPublishedMdxComponentSelectionSnapshot({
     selected: {
+      kind: "component",
       component: registeredComponent,
       componentName: "Chart",
       isVoid: true,
diff --git a/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-panel-selection.ts b/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-panel-selection.ts
index 7754f005..7760b506 100644
--- a/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-panel-selection.ts
+++ b/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-panel-selection.ts
@@ -1,6 +1,7 @@
 import type { SelectedMdxComponent } from "./mdx-component-selection.js";
 
 export type PublishedMdxComponentSelectionSnapshot = {
+  kind: SelectedMdxComponent["kind"];
   component: SelectedMdxComponent["component"];
   componentName: string;
   isVoid: boolean;
@@ -16,6 +17,7 @@ export function createPublishedMdxComponentSelectionSnapshot(input: {
   forbidden: boolean;
 }): PublishedMdxComponentSelectionSnapshot {
   return {
+    kind: input.selected.kind,
     component: input.selected.component,
     componentName: input.selected.componentName,
     isVoid: input.selected.isVoid,
@@ -40,6 +42,7 @@ export function hasPublishedMdxComponentSelectionChanged(
 
   return !(
     previous.component === next.component &&
+    previous.kind === next.kind &&
     previous.componentName === next.componentName &&
     previous.isVoid === next.isVoid &&
     previous.pos === next.pos &&
diff --git a/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-selection.test.ts b/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-selection.test.ts
index 976203f5..47c0d1eb 100644
--- a/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-selection.test.ts
+++ b/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-selection.test.ts
@@ -54,6 +54,7 @@ test("getSelectedMdxComponent resolves wrapper components when selection is insi
     editor.commands.setTextSelection(textPos);
 
     assert.deepEqual(getSelectedMdxComponent(editor, components), {
+      kind: "component",
       component: components[0],
       componentName: "Callout",
       isVoid: false,
@@ -85,6 +86,7 @@ test("getSelectedMdxComponent resolves selected void component nodes", () => {
     editor.commands.setNodeSelection(componentPos);
 
     assert.deepEqual(getSelectedMdxComponent(editor, components), {
+      kind: "component",
       component: components[1],
       componentName: "HeroBanner",
       isVoid: true,
@@ -96,6 +98,37 @@ test("getSelectedMdxComponent resolves selected void component nodes", () => {
   }
 });
 
+test("getSelectedMdxComponent resolves intrinsic elements when selection is inside nested content", () => {
+  const editor = createDocumentEditor({
+    content: ['<div style={{display: "flex"}}>', "Body", "</div>"].join("\n"),
+  });
+
+  try {
+    let textPos = 0;
+    editor.state.doc.descendants((node, pos) => {
+      if (node.type.name === "text" && node.text === "Body") {
+        textPos = pos + 1;
+        return false;
+      }
+
+      return true;
+    });
+
+    editor.commands.setTextSelection(textPos);
+
+    assert.deepEqual(getSelectedMdxComponent(editor, components), {
+      kind: "intrinsic",
+      component: undefined,
+      componentName: "div",
+      isVoid: false,
+      props: { style: { display: "flex" } },
+      pos: 0,
+    });
+  } finally {
+    editor.destroy();
+  }
+});
+
 test("updateSelectedMdxComponentProps merges props onto the selected component node", () => {
   const editor = createDocumentEditor({
     content: '<HeroBanner title="Launch" />',
@@ -131,6 +164,40 @@ test("updateSelectedMdxComponentProps merges props onto the selected component n
   }
 });
 
+test("updateSelectedMdxComponentProps merges props onto the selected intrinsic element node", () => {
+  const editor = createDocumentEditor({
+    content: ['<div style={{display: "block"}}>', "Body", "</div>"].join("\n"),
+  });
+
+  try {
+    let elementPos = -1;
+    editor.state.doc.descendants((node, pos) => {
+      if (node.type.name === "mdxIntrinsicElement") {
+        elementPos = pos;
+        return false;
+      }
+
+      return true;
+    });
+
+    editor.commands.setNodeSelection(elementPos);
+
+    assert.equal(
+      updateSelectedMdxComponentProps(editor, components, {
+        style: { display: "flex", gap: "1rem" },
+      }),
+      true,
+    );
+
+    assert.match(
+      extractMarkdownFromEditor(editor),
+      /<div style=\{\{"display":"flex","gap":"1rem"\}\}>/,
+    );
+  } finally {
+    editor.destroy();
+  }
+});
+
 test("updateSelectedMdxComponentProps refuses mutation when readOnly or forbidden is set", () => {
   const editor = createDocumentEditor({
     content: '<HeroBanner title="Launch" />',
@@ -189,6 +256,7 @@ test("selectAdjacentMdxComponent promotes a newly inserted void component to the
     assert.equal(getSelectedMdxComponent(editor, components), null);
     assert.equal(selectAdjacentMdxComponent(editor), true);
     assert.deepEqual(getSelectedMdxComponent(editor, components), {
+      kind: "component",
       component: components[1],
       componentName: "HeroBanner",
       isVoid: true,
diff --git a/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-selection.ts b/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-selection.ts
index 4c4746ee..cc5b3077 100644
--- a/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-selection.ts
+++ b/packages/studio/src/lib/runtime-ui/components/editor/mdx-component-selection.ts
@@ -7,6 +7,7 @@ type MdxCatalogComponent = NonNullable<
 >["catalog"]["components"][number];
 
 export type SelectedMdxComponent = {
+  kind: "component" | "intrinsic";
   component: MdxCatalogComponent | undefined;
   componentName: string;
   isVoid: boolean;
@@ -31,7 +32,10 @@ export function getSelectedMdxComponent(
     };
   };
 
-  if (nodeSelection.node?.type.name === "mdxComponent") {
+  if (
+    nodeSelection.node?.type.name === "mdxComponent" ||
+    nodeSelection.node?.type.name === "mdxIntrinsicElement"
+  ) {
     return createSelectedMdxComponent(
       nodeSelection.node,
       nodeSelection.from,
@@ -44,7 +48,10 @@ export function getSelectedMdxComponent(
   for (let depth = $from.depth; depth > 0; depth -= 1) {
     const node = $from.node(depth);
 
-    if (node.type.name === "mdxComponent") {
+    if (
+      node.type.name === "mdxComponent" ||
+      node.type.name === "mdxIntrinsicElement"
+    ) {
       return createSelectedMdxComponent(node, $from.before(depth), components);
     }
   }
@@ -74,11 +81,21 @@ export function updateSelectedMdxComponentProps(
       ...patch,
     };
 
-    tr.setNodeMarkup(selected.pos, undefined, {
-      componentName: selected.componentName,
-      props: nextProps,
-      isVoid: selected.isVoid,
-    });
+    tr.setNodeMarkup(
+      selected.pos,
+      undefined,
+      selected.kind === "intrinsic"
+        ? {
+            tagName: selected.componentName,
+            props: nextProps,
+            isVoid: selected.isVoid,
+          }
+        : {
+            componentName: selected.componentName,
+            props: nextProps,
+            isVoid: selected.isVoid,
+          },
+    );
     dispatch?.(tr);
 
     return true;
@@ -110,17 +127,27 @@ function createSelectedMdxComponent(
   pos: number,
   components: readonly MdxCatalogComponent[],
 ): SelectedMdxComponent | null {
+  const kind =
+    node.type.name === "mdxIntrinsicElement" ? "intrinsic" : "component";
   const componentName =
-    typeof node.attrs.componentName === "string"
-      ? node.attrs.componentName
-      : "";
+    kind === "intrinsic"
+      ? typeof node.attrs.tagName === "string"
+        ? node.attrs.tagName
+        : ""
+      : typeof node.attrs.componentName === "string"
+        ? node.attrs.componentName
+        : "";
 
   if (componentName.length === 0) {
     return null;
   }
 
   return {
-    component: components.find((component) => component.name === componentName),
+    kind,
+    component:
+      kind === "component"
+        ? components.find((component) => component.name === componentName)
+        : undefined,
     componentName,
     isVoid: node.attrs.isVoid === true,
     props: isPropsRecord(node.attrs.props) ? node.attrs.props : {},
diff --git a/packages/studio/src/lib/runtime-ui/components/editor/mdx-intrinsic-element-node-view.tsx b/packages/studio/src/lib/runtime-ui/components/editor/mdx-intrinsic-element-node-view.tsx
new file mode 100644
index 00000000..86c28724
--- /dev/null
+++ b/packages/studio/src/lib/runtime-ui/components/editor/mdx-intrinsic-element-node-view.tsx
@@ -0,0 +1,332 @@
+"use client";
+
+import {
+  cloneElement,
+  createElement,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState,
+  type ReactNode,
+  type SyntheticEvent,
+} from "react";
+
+import type { ReactNodeViewProps } from "@tiptap/react";
+import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
+
+import { useMdxComponentCollapseSnapshot } from "./mdx-component-collapse.js";
+import { MdxComponentNodeFrame } from "./mdx-component-node-view.js";
+import { formatMdxComponentPropsSummary } from "./mdx-component-node-view-utils.js";
+
+const MDX_EDITABLE_SLOT_SELECTOR = "[data-mdcms-mdx-editable-slot]";
+const URL_BEARING_ATTRIBUTES = new Set([
+  "action",
+  "formaction",
+  "href",
+  "poster",
+  "src",
+  "xlinkhref",
+]);
+const UNSAFE_ATTRIBUTES = new Set(["srcdoc", "dangerouslysetinnerhtml"]);
+
+type EditableSlotProps = {
+  className?: string;
+  suppressContentEditableWarning?: boolean;
+  "data-mdcms-mdx-editable-slot"?: string;
+};
+
+function getElementFromEventTarget(target: EventTarget | null): Element | null {
+  if (target instanceof Element) {
+    return target;
+  }
+
+  if (target instanceof Node) {
+    return target.parentElement;
+  }
+
+  return null;
+}
+
+function isInsideEditableSlot(
+  target: EventTarget | null,
+  currentTarget: EventTarget | null,
+): boolean {
+  const targetElement = getElementFromEventTarget(target);
+
+  if (!(currentTarget instanceof Element) || !targetElement) {
+    return false;
+  }
+
+  const editableSlot = targetElement.closest(MDX_EDITABLE_SLOT_SELECTOR);
+
+  return editableSlot !== null && currentTarget.contains(editableSlot);
+}
+
+function normalizeReactPropName(name: string): string {
+  if (name === "class") return "className";
+  if (name === "for") return "htmlFor";
+  return name;
+}
+
+function isFlatStyleRecord(
+  value: unknown,
+): value is Record<string, string | number> {
+  return (
+    Boolean(value) &&
+    typeof value === "object" &&
+    !Array.isArray(value) &&
+    Object.values(value as Record<string, unknown>).every(
+      (entry) => typeof entry === "string" || typeof entry === "number",
+    )
+  );
+}
+
+function createSafeIntrinsicPreviewProps(
+  tagName: string,
+  props: Record<string, unknown>,
+): Record<string, unknown> {
+  const safeProps: Record<string, unknown> = {};
+
+  for (const [rawName, value] of Object.entries(props)) {
+    const name = normalizeReactPropName(rawName);
+    const normalizedName = name.toLowerCase();
+
+    if (
+      normalizedName.startsWith("on") ||
+      URL_BEARING_ATTRIBUTES.has(normalizedName) ||
+      UNSAFE_ATTRIBUTES.has(normalizedName) ||
+      value === undefined ||
+      value === null ||
+      value === false
+    ) {
+      continue;
+    }
+
+    if (name === "style") {
+      if (isFlatStyleRecord(value)) {
+        safeProps[name] = value;
+      }
+      continue;
+    }
+
+    if (
+      value === true ||
+      typeof value === "string" ||
+      typeof value === "number"
+    ) {
+      safeProps[name] = value;
+    }
+  }
+
+  if (tagName === "form") {
+    safeProps.onSubmit = (event: SubmitEvent) => {
+      event.preventDefault();
+    };
+  }
+
+  return safeProps;
+}
+
+function renderEditableSlot(tagName: string, children: ReactNode): ReactNode {
+  const slotProps = {
+    "data-mdcms-mdx-editable-slot": tagName,
+    suppressContentEditableWarning: true,
+  } satisfies Omit<EditableSlotProps, "className">;
+
+  if (isValidElement<EditableSlotProps>(children)) {
+    return cloneElement(children, {
+      ...slotProps,
+      className: [
+        children.props.className,
+        "mdcms-mdx-editable-slot select-text",
+      ]
+        .filter(Boolean)
+        .join(" "),
+    });
+  }
+
+  return (
+    <div {...slotProps} className="mdcms-mdx-editable-slot select-text">
+      {children}
+    </div>
+  );
+}
+
+function MdxIntrinsicEditableSurface(input: {
+  tagName: string;
+  props: Record<string, unknown>;
+  children: ReactNode;
+  onSelectPreview?: () => void;
+}) {
+  const editableSlot = renderEditableSlot(input.tagName, input.children);
+  const safeProps = createSafeIntrinsicPreviewProps(input.tagName, input.props);
+
+  const keepNativePreviewInert = (event: SyntheticEvent<HTMLElement>) => {
+    if (isInsideEditableSlot(event.target, event.currentTarget)) {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+    input.onSelectPreview?.();
+  };
+
+  return (
+    <div
+      data-mdcms-mdx-rendered-intrinsic={input.tagName}
+      className="select-none"
+      onPointerDownCapture={keepNativePreviewInert}
+      onMouseDownCapture={keepNativePreviewInert}
+      onBeforeInputCapture={keepNativePreviewInert}
+      onCompositionStartCapture={keepNativePreviewInert}
+      onInputCapture={keepNativePreviewInert}
+      onKeyDownCapture={keepNativePreviewInert}
+      onPasteCapture={keepNativePreviewInert}
+    >
+      {createElement(input.tagName, safeProps, editableSlot)}
+    </div>
+  );
+}
+
+function MdxIntrinsicVoidPreviewSurface(props: {
+  tagName: string;
+  mdxProps: Record<string, unknown>;
+}) {
+  return (
+    <div
+      data-mdcms-mdx-preview-state="ready"
+      contentEditable={false}
+      suppressContentEditableWarning
+    >
+      {createElement(
+        props.tagName,
+        createSafeIntrinsicPreviewProps(props.tagName, props.mdxProps),
+      )}
+    </div>
+  );
+}
+
+export function MdxIntrinsicElementNodeView(
+  props: ReactNodeViewProps & {
+    readOnly?: boolean;
+    forbidden?: boolean;
+  },
+) {
+  const tagName =
+    typeof props.node.attrs.tagName === "string"
+      ? props.node.attrs.tagName
+      : "div";
+  const isVoid = props.node.attrs.isVoid === true;
+  const mdxProps =
+    (props.node.attrs.props as Record<string, unknown> | undefined) ?? {};
+  const propsSummary = formatMdxComponentPropsSummary(mdxProps);
+  const collapseSnapshot = useMdxComponentCollapseSnapshot();
+  const [collapsed, setCollapsed] = useState(
+    () => collapseSnapshot.globalState === "collapsed",
+  );
+  const lastSyncedGenerationRef = useRef(collapseSnapshot.generation);
+  const isEditable = !props.readOnly && !props.forbidden;
+
+  useEffect(() => {
+    if (collapseSnapshot.generation === lastSyncedGenerationRef.current) {
+      return;
+    }
+    lastSyncedGenerationRef.current = collapseSnapshot.generation;
+    if (collapseSnapshot.globalState === "collapsed") {
+      setCollapsed(true);
+    } else if (collapseSnapshot.globalState === "expanded") {
+      setCollapsed(false);
+    }
+  }, [collapseSnapshot.generation, collapseSnapshot.globalState]);
+
+  const selectThisNode = (): number | null => {
+    const pos = props.getPos();
+    if (typeof pos !== "number") {
+      return null;
+    }
+
+    props.editor.commands.setNodeSelection(pos);
+    return pos;
+  };
+
+  const handleEditProps = () => {
+    selectThisNode();
+  };
+
+  const handleDuplicate = () => {
+    const pos = selectThisNode();
+    if (pos === null) {
+      return;
+    }
+
+    props.editor.commands.command(({ tr, dispatch }) => {
+      tr.insert(pos + props.node.nodeSize, props.node.copy());
+      dispatch?.(tr);
+      return true;
+    });
+    props.editor.commands.focus();
+  };
+
+  const handleUnwrap = () => {
+    const pos = selectThisNode();
+    if (pos === null || isVoid || props.node.content.size === 0) {
+      return;
+    }
+
+    props.editor.commands.command(({ tr, dispatch }) => {
+      tr.replaceWith(pos, pos + props.node.nodeSize, props.node.content);
+      dispatch?.(tr);
+      return true;
+    });
+    props.editor.commands.focus();
+  };
+
+  const handleDelete = () => {
+    props.deleteNode();
+    props.editor.commands.focus();
+  };
+
+  return (
+    <NodeViewWrapper as="div">
+      <MdxComponentNodeFrame
+        componentName={tagName}
+        isVoid={isVoid}
+        propsSummary={propsSummary}
+        selected={props.selected}
+        collapsed={collapsed}
+        onToggleCollapsed={() => setCollapsed((current) => !current)}
+        onEditProps={isEditable ? handleEditProps : undefined}
+        onDuplicate={isEditable ? handleDuplicate : undefined}
+        onUnwrap={isEditable && !isVoid ? handleUnwrap : undefined}
+        onDelete={isEditable ? handleDelete : undefined}
+        previewSurface={
+          isVoid ? (
+            <MdxIntrinsicVoidPreviewSurface
+              tagName={tagName}
+              mdxProps={mdxProps}
+            />
+          ) : null
+        }
+        previewSurfaceOwnsChrome
+        readOnly={props.readOnly}
+        forbidden={props.forbidden}
+      >
+        {isVoid ? null : (
+          <MdxIntrinsicEditableSurface
+            tagName={tagName}
+            props={mdxProps}
+            onSelectPreview={() => {
+              selectThisNode();
+            }}
+          >
+            <NodeViewContent
+              as="div"
+              data-placeholder="Type content here..."
+              className="max-w-none min-h-[3rem] before:pointer-events-none before:float-left before:h-0 before:text-foreground-muted/60 before:content-[attr(data-placeholder)] has-[>:first-child:not(.is-empty)]:before:content-none"
+            />
+          </MdxIntrinsicEditableSurface>
+        )}
+      </MdxComponentNodeFrame>
+    </NodeViewWrapper>
+  );
+}
diff --git a/packages/studio/src/lib/runtime-ui/components/editor/mdx-props-panel.tsx b/packages/studio/src/lib/runtime-ui/components/editor/mdx-props-panel.tsx
index 37c3e82c..ef71a9ec 100644
--- a/packages/studio/src/lib/runtime-ui/components/editor/mdx-props-panel.tsx
+++ b/packages/studio/src/lib/runtime-ui/components/editor/mdx-props-panel.tsx
@@ -13,6 +13,10 @@ import { VisualStyleInspector } from "./visual-style-inspector.js";
 type MdxCatalogComponent = NonNullable<
   StudioMountContext["mdx"]
 >["catalog"]["components"][number];
+type StyleInspectableComponent = Pick<
+  MdxCatalogComponent,
+  "name" | "extractedProps"
+>;
 
 const COMPONENT_PANEL_HIDDEN_PROP_FIELDS = ["style"] as const;
 const COMPONENT_PANEL_HIDDEN_PROP_FIELD_NAMES = new Set<string>(
@@ -21,6 +25,7 @@ const COMPONENT_PANEL_HIDDEN_PROP_FIELD_NAMES = new Set<string>(
 const MDX_CHILDREN_PROP_NAME = "children";
 
 export type MdxPropsPanelSelection = {
+  kind?: "component" | "intrinsic";
   component: MdxCatalogComponent | undefined;
   componentName: string;
   isVoid: boolean;
@@ -52,6 +57,30 @@ export function MdxPropsPanel({
     );
   }
 
+  if (selection.kind === "intrinsic") {
+    const component = createIntrinsicStyleComponent(selection.componentName);
+
+    return (
+      <section
+        data-mdcms-mdx-props-panel={selection.componentName}
+        className="space-y-3"
+      >
+        <p className="text-sm font-medium text-foreground">
+          {"<"}
+          {selection.componentName}
+          {" />"}
+        </p>
+
+        <VisualStyleInspector
+          component={component}
+          value={selection.props}
+          onChange={selection.onPropsChange}
+          readOnly={selection.readOnly || selection.forbidden}
+        />
+      </section>
+    );
+  }
+
   if (!selection.component) {
     return (
       <section data-mdcms-mdx-props-panel="unregistered" className="space-y-2">
@@ -99,6 +128,20 @@ export function MdxPropsPanel({
   );
 }
 
+function createIntrinsicStyleComponent(
+  tagName: string,
+): StyleInspectableComponent {
+  return {
+    name: tagName,
+    extractedProps: {
+      style: {
+        type: "style",
+        required: false,
+      },
+    },
+  };
+}
+
 function hasConcreteComponentPanelProps(
   component: MdxCatalogComponent,
 ): boolean {
diff --git a/packages/studio/src/lib/runtime-ui/components/editor/tiptap-editor.tsx b/packages/studio/src/lib/runtime-ui/components/editor/tiptap-editor.tsx
index b5ea214d..dd7095b5 100644
--- a/packages/studio/src/lib/runtime-ui/components/editor/tiptap-editor.tsx
+++ b/packages/studio/src/lib/runtime-ui/components/editor/tiptap-editor.tsx
@@ -66,6 +66,7 @@ import {
   parseMarkdownToDocument,
 } from "../../../markdown-pipeline.js";
 import { MdxComponentExtension } from "../../../mdx-component-extension.js";
+import { MdxIntrinsicElementExtension } from "../../../mdx-intrinsic-element-extension.js";
 import { MdxRawJsxExtension } from "../../../mdx-raw-jsx-extension.js";
 import { CodeBlockWithNodeView } from "./code-block-with-node-view.js";
 import {
@@ -74,6 +75,7 @@ import {
 } from "./mdx-component-collapse.js";
 import { createEditorToolbarLayout } from "./editor-toolbar.js";
 import { MdxComponentNodeView } from "./mdx-component-node-view.js";
+import { MdxIntrinsicElementNodeView } from "./mdx-intrinsic-element-node-view.js";
 import { MdxRawJsxNodeView } from "./mdx-raw-jsx-node-view.js";
 import {
   createMdxComponentInsertContent,
@@ -835,6 +837,11 @@ function useTipTapEditorElement({
             return ReactNodeViewRenderer(TipTapMdxComponentNodeView);
           },
         }),
+        mdxIntrinsicElement: MdxIntrinsicElementExtension.extend({
+          addNodeView() {
+            return ReactNodeViewRenderer(MdxIntrinsicElementNodeView);
+          },
+        }),
       }),
       editorProps: {
         attributes: {
diff --git a/packages/studio/src/lib/runtime-ui/components/editor/visual-style-inspector.tsx b/packages/studio/src/lib/runtime-ui/components/editor/visual-style-inspector.tsx
index 4380e3c3..0ddc4870 100644
--- a/packages/studio/src/lib/runtime-ui/components/editor/visual-style-inspector.tsx
+++ b/packages/studio/src/lib/runtime-ui/components/editor/visual-style-inspector.tsx
@@ -39,6 +39,10 @@ import {
 type MdxCatalogComponent = NonNullable<
   StudioMountContext["mdx"]
 >["catalog"]["components"][number];
+type StyleInspectableComponent = Pick<
+  MdxCatalogComponent,
+  "name" | "extractedProps"
+>;
 
 const DISPLAY_OPTIONS = [
   { value: "block", label: "Block", icon: Square },
@@ -88,7 +92,7 @@ export function VisualStyleInspector({
   readOnly,
   onChange,
 }: {
-  component: MdxCatalogComponent;
+  component: StyleInspectableComponent;
   value: Record<string, unknown>;
   readOnly: boolean;
   onChange: PropsEditorChangeHandler;