diff --git a/apps/www/public/r/styles/default/heading-element.json b/apps/www/public/r/styles/default/heading-element.json
index 40a6d0acbc..6ce837f7ec 100644
--- a/apps/www/public/r/styles/default/heading-element.json
+++ b/apps/www/public/r/styles/default/heading-element.json
@@ -17,7 +17,7 @@
   },
   "files": [
     {
-      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\nimport { cva } from 'class-variance-authority';\n\nimport { PlateElement } from './plate-element';\n\nexport const headingVariants = cva('relative mb-1', {\n  variants: {\n    variant: {\n      h1: 'mt-[1.6em] pb-1 font-heading text-4xl font-bold',\n      h2: 'mt-[1.4em] pb-px font-heading text-2xl font-semibold tracking-tight',\n      h3: 'mt-[1em] pb-px font-heading text-xl font-semibold tracking-tight',\n      h4: 'mt-[0.75em] font-heading text-lg font-semibold tracking-tight',\n      h5: 'mt-[0.75em] text-lg font-semibold tracking-tight',\n      h6: 'mt-[0.75em] text-base font-semibold tracking-tight',\n    },\n  },\n});\n\nconst HeadingElementVariants = withVariants(PlateElement, headingVariants, [\n  'variant',\n]);\n\nexport const HeadingElement = withRef<typeof HeadingElementVariants>(\n  ({ children, variant = 'h1', ...props }, ref) => {\n    return (\n      <HeadingElementVariants\n        ref={ref}\n        as={variant!}\n        variant={variant}\n        {...props}\n      >\n        {children}\n      </HeadingElementVariants>\n    );\n  }\n);\n",
+      "content": "'use client';\n\nimport React from 'react';\n\nimport { withRef, withVariants } from '@udecode/cn';\n\nimport { headingVariants } from '../plate-static-ui/heading-element';\nimport { PlateElement } from './plate-element';\n\nconst HeadingElementVariants = withVariants(PlateElement, headingVariants, [\n  'variant',\n]);\n\nexport const HeadingElement = withRef<typeof HeadingElementVariants>(\n  ({ children, variant = 'h1', ...props }, ref) => {\n    return (\n      <HeadingElementVariants\n        ref={ref}\n        as={variant!}\n        variant={variant}\n        {...props}\n      >\n        {children}\n      </HeadingElementVariants>\n    );\n  }\n);\n",
       "path": "plate-ui/heading-element.tsx",
       "target": "components/plate-ui/heading-element.tsx",
       "type": "registry:ui"
diff --git a/packages/core/src/lib/static/components/DefaultStaticElement.tsx b/packages/core/src/lib/static/components/DefaultStaticElement.tsx
new file mode 100644
index 0000000000..df95ccfdfd
--- /dev/null
+++ b/packages/core/src/lib/static/components/DefaultStaticElement.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+
+import type { RenderElementProps } from 'slate-react/dist/components/editable';
+
+export function DefaultStaticElement({
+  attributes,
+  children,
+}: RenderElementProps) {
+  return <div {...attributes}>{children}</div>;
+}
diff --git a/packages/core/src/lib/static/components/DefaultStaticLeaf.tsx b/packages/core/src/lib/static/components/DefaultStaticLeaf.tsx
new file mode 100644
index 0000000000..9c78c67827
--- /dev/null
+++ b/packages/core/src/lib/static/components/DefaultStaticLeaf.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+import type { RenderLeafProps } from 'slate-react/dist/components/editable';
+
+export function DefaultStaticLeaf({ attributes, children }: RenderLeafProps) {
+  return <span {...attributes}>{children}</span>;
+}
diff --git a/packages/core/src/lib/static/PlateStatic.tsx b/packages/core/src/lib/static/components/PlateStatic.tsx
similarity index 62%
rename from packages/core/src/lib/static/PlateStatic.tsx
rename to packages/core/src/lib/static/components/PlateStatic.tsx
index 5a5368509b..1da0c0046e 100644
--- a/packages/core/src/lib/static/PlateStatic.tsx
+++ b/packages/core/src/lib/static/components/PlateStatic.tsx
@@ -1,11 +1,5 @@
 import React from 'react';
 
-import type {
-  EditableProps,
-  RenderElementProps,
-  RenderLeafProps,
-} from 'slate-react/dist/components/editable';
-
 import {
   type TDescendant,
   type TElement,
@@ -13,10 +7,12 @@ import {
   isElement,
 } from '@udecode/slate';
 
-import type { SlateEditor } from '..';
+import type { SlateEditor } from '../../editor';
+import type { RenderStaticElement, RenderStaticLeaf } from '../type';
 
-import { pipeRenderStaticElement } from './pipeRenderStaticElement';
-import { pipeRenderStaticLeaf } from './pipeRenderStaticLeaf';
+import { pipeRenderStaticElement } from '../pipeRenderStaticElement';
+import { pipeRenderStaticLeaf } from '../pipeRenderStaticLeaf';
+import { createStaticString } from '../utils/createStaticString';
 
 export type ChildrenProps = {
   children: TDescendant[];
@@ -35,8 +31,8 @@ export type LeafProps = {
 
 export type PlateViewProps = {
   editor: SlateEditor;
-  renderElement?: EditableProps['renderElement'];
-  renderLeaf?: EditableProps['renderLeaf'];
+  renderElement?: RenderStaticElement;
+  renderLeaf?: RenderStaticLeaf;
 };
 
 function Element({
@@ -48,7 +44,7 @@ function Element({
   return (
     <React.Fragment>
       {renderElement?.({
-        attributes: { 'data-slate-node': 'element' } as any,
+        attributes: { 'data-slate-node': 'element', ref: null },
         children: (
           <PlateViewContent editor={editor}>
             {element.children}
@@ -64,7 +60,7 @@ function Leaf({ editor, leaf = { text: '' } }: LeafProps) {
   const renderLeaf = pipeRenderStaticLeaf(editor);
 
   return renderLeaf!({
-    attributes: { 'data-slate-leaf': true } as any,
+    attributes: { 'data-slate-leaf': true },
     children: createStaticString({ text: leaf.text }),
     leaf,
     text: leaf,
@@ -90,22 +86,3 @@ export function PlateStatic(props: PlateViewProps) {
 
   return <PlateViewContent editor={editor}>{editor.children}</PlateViewContent>;
 }
-
-export function DefaultStaticElement({
-  attributes,
-  children,
-}: RenderElementProps) {
-  return <div {...attributes}>{children}</div>;
-}
-
-export function DefaultStaticLeaf({ attributes, children }: RenderLeafProps) {
-  return <span {...attributes}>{children}</span>;
-}
-
-export function createStaticString({ text }: { text: string }) {
-  return React.createElement(
-    'span',
-    { 'data-slate-string': true },
-    text === '' ? '\uFEFF' : text
-  );
-}
diff --git a/packages/core/src/lib/static/components/index.ts b/packages/core/src/lib/static/components/index.ts
new file mode 100644
index 0000000000..fee2299220
--- /dev/null
+++ b/packages/core/src/lib/static/components/index.ts
@@ -0,0 +1,7 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './DefaultStaticElement';
+export * from './DefaultStaticLeaf';
+export * from './PlateStatic';
diff --git a/packages/core/src/lib/static/index.ts b/packages/core/src/lib/static/index.ts
index 3931eaec9a..b25e494569 100644
--- a/packages/core/src/lib/static/index.ts
+++ b/packages/core/src/lib/static/index.ts
@@ -2,6 +2,8 @@
  * @file Automatically generated by barrelsby.
  */
 
-export * from './PlateStatic';
 export * from './pipeRenderStaticElement';
 export * from './pipeRenderStaticLeaf';
+export * from './type';
+export * from './components/index';
+export * from './utils/index';
diff --git a/packages/core/src/lib/static/pipeRenderStaticElement.tsx b/packages/core/src/lib/static/pipeRenderStaticElement.tsx
index d4b183b16b..bd440a544b 100644
--- a/packages/core/src/lib/static/pipeRenderStaticElement.tsx
+++ b/packages/core/src/lib/static/pipeRenderStaticElement.tsx
@@ -1,27 +1,15 @@
 import React from 'react';
 
-import type { TElement } from '@udecode/slate';
-import type { TEditableProps, TRenderElementProps } from '@udecode/slate-react';
-
 import type { SlateEditor } from '../editor';
 import type { SlatePlugin } from '../plugin';
+import type { RenderStaticElement } from './type';
 
-import { DefaultStaticElement } from './PlateStatic';
-
-export type RenderElement = (
-  props: TRenderElementProps
-) => React.ReactElement | undefined;
-
-export interface StaticElementProps<T extends TElement = TElement> {
-  attributes?: Record<string, any>;
-  children?: React.ReactNode;
-  element?: T;
-}
+import { DefaultStaticElement } from './components/DefaultStaticElement';
 
 const pluginRenderStaticElement = (
-  editor: SlateEditor,
+  _: SlateEditor,
   plugin: SlatePlugin
-): RenderElement =>
+): RenderStaticElement =>
   function render(nodeProps) {
     if (nodeProps.element.type === plugin.node.type) {
       const { children, element } = nodeProps;
@@ -46,9 +34,9 @@ const pluginRenderStaticElement = (
 /** @see {@link RenderElement} */
 export const pipeRenderStaticElement = (
   editor: SlateEditor,
-  renderElementProp?: TEditableProps['renderElement']
-): TEditableProps['renderElement'] => {
-  const renderElements: RenderElement[] = [];
+  renderElementProp?: RenderStaticElement
+): RenderStaticElement => {
+  const renderElements: RenderStaticElement[] = [];
 
   editor.pluginList.forEach((plugin) => {
     if (plugin.node.isElement) {
diff --git a/packages/core/src/lib/static/pipeRenderStaticLeaf.tsx b/packages/core/src/lib/static/pipeRenderStaticLeaf.tsx
index 69398d3ef7..5c04cdc06c 100644
--- a/packages/core/src/lib/static/pipeRenderStaticLeaf.tsx
+++ b/packages/core/src/lib/static/pipeRenderStaticLeaf.tsx
@@ -1,28 +1,15 @@
 import React from 'react';
 
-import type { TText } from '@udecode/slate';
-import type { TEditableProps, TRenderLeafProps } from '@udecode/slate-react';
-
 import type { SlateEditor } from '../editor';
 import type { SlatePlugin } from '../plugin';
+import type { RenderStaticLeaf } from './type';
 
-import { DefaultStaticLeaf } from './PlateStatic';
-
-export type RenderLeaf = (
-  props: TRenderLeafProps
-) => React.ReactElement | undefined;
-
-export interface StaticLeafProps<T extends TText = TText> {
-  as?: React.ElementType;
-  attributes?: Record<string, any>;
-  children?: React.ReactNode;
-  leaf?: T;
-}
+import { DefaultStaticLeaf } from './components/DefaultStaticLeaf';
 
 export const pluginRenderStaticLeaf = (
-  editor: SlateEditor,
+  _: SlateEditor,
   plugin: SlatePlugin
-): RenderLeaf =>
+): RenderStaticLeaf =>
   function render(nodeProps) {
     const {
       node: { staticComponent },
@@ -45,9 +32,9 @@ export const pluginRenderStaticLeaf = (
 /** @see {@link RenderLeaf} */
 export const pipeRenderStaticLeaf = (
   editor: SlateEditor,
-  renderLeafProp?: TEditableProps['renderLeaf']
-): TEditableProps['renderLeaf'] => {
-  const renderLeafs: RenderLeaf[] = [];
+  renderLeafProp?: RenderStaticLeaf
+): RenderStaticLeaf => {
+  const renderLeafs: RenderStaticLeaf[] = [];
 
   editor.pluginList.forEach((plugin) => {
     if (plugin.node.isLeaf && plugin.key) {
diff --git a/packages/core/src/lib/static/type.ts b/packages/core/src/lib/static/type.ts
new file mode 100644
index 0000000000..056eccb306
--- /dev/null
+++ b/packages/core/src/lib/static/type.ts
@@ -0,0 +1,43 @@
+import type { TElement, TText } from '@udecode/slate';
+
+export interface TRenderStaticElementProps<T extends TElement = TElement> {
+  attributes: {
+    'data-slate-node': 'element';
+    ref: any;
+    'data-slate-inline'?: true;
+    'data-slate-void'?: true;
+    dir?: 'rtl';
+  };
+  children: any;
+  element: T;
+}
+
+export type RenderStaticElement<T extends TElement = TElement> = (
+  props: TRenderStaticElementProps<T>
+) => React.ReactElement | undefined;
+
+export interface StaticElementProps<T extends TElement = TElement> {
+  attributes?: Record<string, any>;
+  children?: React.ReactNode;
+  element?: T;
+}
+
+export interface TRenderStaticLeafProps<N extends TText = TText> {
+  attributes: {
+    'data-slate-leaf': true;
+  };
+  children: any;
+  leaf: N;
+  text: N;
+}
+
+export type RenderStaticLeaf<N extends TText = TText> = (
+  props: TRenderStaticLeafProps<N>
+) => React.ReactElement | undefined;
+
+export interface StaticLeafProps<N extends TText = TText> {
+  as?: React.ElementType;
+  attributes?: Record<string, any>;
+  children?: React.ReactNode;
+  leaf?: N;
+}
diff --git a/packages/core/src/lib/static/utils/createStaticString.ts b/packages/core/src/lib/static/utils/createStaticString.ts
new file mode 100644
index 0000000000..2a24155772
--- /dev/null
+++ b/packages/core/src/lib/static/utils/createStaticString.ts
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export function createStaticString({ text }: { text: string }) {
+  return React.createElement(
+    'span',
+    { 'data-slate-string': true },
+    text === '' ? '\uFEFF' : text
+  );
+}
diff --git a/packages/core/src/lib/static/utils/index.ts b/packages/core/src/lib/static/utils/index.ts
new file mode 100644
index 0000000000..22df8691bc
--- /dev/null
+++ b/packages/core/src/lib/static/utils/index.ts
@@ -0,0 +1,5 @@
+/**
+ * @file Automatically generated by barrelsby.
+ */
+
+export * from './createStaticString';
diff --git a/packages/html/src/lib/staticElementToHtml.ts b/packages/html/src/lib/staticElementToHtml.ts
index 9fb653b231..1dbf481977 100644
--- a/packages/html/src/lib/staticElementToHtml.ts
+++ b/packages/html/src/lib/staticElementToHtml.ts
@@ -1,5 +1,3 @@
-import type { TRenderElementProps } from '@udecode/plate-common/react';
-
 import {
   type SlateEditor,
   type SlatePlugin,
@@ -15,7 +13,7 @@ export const staticElementToHtml = (
     props,
   }: {
     ReactDOMServer: any;
-    props: TRenderElementProps;
+    props: any;
     preserveClassNames?: string[];
   }
 ): string => {
diff --git a/packages/html/src/lib/staticLeafToHtml.ts b/packages/html/src/lib/staticLeafToHtml.ts
index 213543b1de..bd46f8b489 100644
--- a/packages/html/src/lib/staticLeafToHtml.ts
+++ b/packages/html/src/lib/staticLeafToHtml.ts
@@ -1,5 +1,3 @@
-import type { TRenderLeafProps } from '@udecode/plate-common/react';
-
 import {
   type SlateEditor,
   type SlatePlugin,
@@ -11,7 +9,7 @@ import { renderComponentToHtml } from './utils/renderComponentToHtml';
 
 export const staticLeafToHtml = (
   editor: SlateEditor,
-  { ReactDOMServer, props }: { ReactDOMServer: any; props: TRenderLeafProps }
+  { ReactDOMServer, props }: { ReactDOMServer: any; props: any }
 ): string => {
   let html;