diff --git a/packages/editor-sample/package-lock.json b/packages/editor-sample/package-lock.json
index af0bae5..9af155b 100644
--- a/packages/editor-sample/package-lock.json
+++ b/packages/editor-sample/package-lock.json
@@ -12,6 +12,7 @@
         "@emotion/styled": "^11.11.0",
         "@mui/icons-material": "^5.15.10",
         "@mui/material": "^5.15.10",
+        "@usewaypoint/block-heading": "^0.0.1",
         "@usewaypoint/document-core": "^0.0.1",
         "react": "^18.2.0",
         "react-colorful": "^5.6.1",
@@ -1838,6 +1839,16 @@
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
       "dev": true
     },
+    "node_modules/@usewaypoint/block-heading": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/@usewaypoint/block-heading/-/block-heading-0.0.1.tgz",
+      "integrity": "sha512-ceQTl/wUEYaXDBbI6aXdyAck+S/tiM/5RlBxvvAr/Z8+6hlaLPpTwPqztphF9d5sMl3SzCpTaPTye31Dj99JzQ==",
+      "peerDependencies": {
+        "@usewaypoint/document-core": "^0.0.1",
+        "react": "^16 || ^17 || ^18",
+        "zod": "^1 || ^2 || ^3"
+      }
+    },
     "node_modules/@usewaypoint/document-core": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/@usewaypoint/document-core/-/document-core-0.0.1.tgz",
diff --git a/packages/editor-sample/package.json b/packages/editor-sample/package.json
index 0933c9e..eb23779 100644
--- a/packages/editor-sample/package.json
+++ b/packages/editor-sample/package.json
@@ -12,6 +12,7 @@
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.10",
+    "@usewaypoint/block-heading": "^0.0.1",
     "@usewaypoint/document-core": "^0.0.1",
     "react": "^18.2.0",
     "react-colorful": "^5.6.1",
diff --git a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/HeadingSidebarPanel.tsx b/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/HeadingSidebarPanel.tsx
index b227f49..4f01c83 100644
--- a/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/HeadingSidebarPanel.tsx
+++ b/packages/editor-sample/src/App/sidebar/ConfigurationPanel/input-panels/HeadingSidebarPanel.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 
 import { ToggleButton } from '@mui/material';
-
-import { HeadingProps, HeadingPropsSchema } from '../../../../documents/blocks/Heading';
+import { HeadingProps, HeadingPropsSchema } from '@usewaypoint/block-heading';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
 import RadioGroupInput from './helpers/inputs/RadioGroupInput';
diff --git a/packages/editor-sample/src/documents/blocks/Heading.tsx b/packages/editor-sample/src/documents/blocks/Heading.tsx
deleted file mode 100644
index ccc6ade..0000000
--- a/packages/editor-sample/src/documents/blocks/Heading.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from 'react';
-import { z } from 'zod';
-
-import { zColor, zFontFamily, zFontWeight, zPadding, zTextAlign } from './helpers/zod';
-
-export const HeadingPropsSchema = z.object({
-  style: z
-    .object({
-      color: zColor().optional().nullable().default(null),
-      backgroundColor: zColor().optional().nullable().default(null),
-      fontFamily: zFontFamily().optional().nullable().default(null),
-      fontWeight: zFontWeight().optional().nullable().default('bold'),
-      textAlign: zTextAlign().optional().nullable().default(null),
-      padding: zPadding().optional().default({
-        top: 16,
-        bottom: 16,
-        left: 24,
-        right: 24,
-      }),
-    })
-    .default({}),
-  props: z.object({
-    text: z.string().default('Hello world'),
-    level: z.enum(['h1', 'h2', 'h3']).default('h2'),
-  }),
-});
-
-export type HeadingProps = z.infer<typeof HeadingPropsSchema>;
-
-/* TODO
- * - process liquid
- */
-export function Heading({ props: { text, level } }: HeadingProps) {
-  switch (level) {
-    case 'h1':
-      return <h1 style={{ fontWeight: 'inherit', margin: 0, fontSize: '32px' }}>{text}</h1>;
-    case 'h2':
-      return <h2 style={{ fontWeight: 'inherit', margin: 0, fontSize: '24px' }}>{text}</h2>;
-    case 'h3':
-      return <h3 style={{ fontWeight: 'inherit', margin: 0, fontSize: '20px' }}>{text}</h3>;
-  }
-}
diff --git a/packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx b/packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx
index 3992ece..f836620 100644
--- a/packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx
+++ b/packages/editor-sample/src/documents/blocks/helpers/EditorChildrenIds/AddBlockMenu/buttons.tsx
@@ -12,6 +12,7 @@ import {
   SmartButtonOutlined,
   ViewColumnOutlined,
 } from '@mui/icons-material';
+import { HeadingPropsSchema } from '@usewaypoint/block-heading';
 
 import { TEditorBlock } from '../../../../editor/core';
 import { AvatarPropsSchema } from '../../../Avatar';
@@ -19,7 +20,6 @@ import { ButtonPropsSchema } from '../../../Button';
 import ColumnsContainerPropsSchema from '../../../ColumnsContainer/ColumnsContainerPropsSchema';
 import { ContainerPropsSchema } from '../../../Container';
 import { DividerPropsSchema } from '../../../Divider';
-import { HeadingPropsSchema } from '../../../Heading';
 import { HtmlPropsSchema } from '../../../Html';
 import { ImagePropsSchema } from '../../../Image';
 import { SpacerPropsSchema } from '../../../Spacer';
diff --git a/packages/editor-sample/src/documents/editor/core.tsx b/packages/editor-sample/src/documents/editor/core.tsx
index 0e4ee3f..bafa7d2 100644
--- a/packages/editor-sample/src/documents/editor/core.tsx
+++ b/packages/editor-sample/src/documents/editor/core.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { z } from 'zod';
 
+import { Heading, HeadingPropsSchema } from '@usewaypoint/block-heading';
 import { buildBlockComponent, buildBlockConfigurationSchema } from '@usewaypoint/document-core';
 
 import { Avatar, AvatarPropsSchema } from '../blocks/Avatar';
@@ -10,7 +11,6 @@ import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsConta
 import { ContainerPropsSchema, EditorContainer } from '../blocks/Container';
 import { Divider, DividerPropsSchema } from '../blocks/Divider';
 import { EditorEmailLayout, EmailLayoutProps, EmailLayoutPropsSchema } from '../blocks/EmailLayout';
-import { Heading, HeadingPropsSchema } from '../blocks/Heading';
 import { addEditorBlockWrapper } from '../blocks/helpers/block-wrappers';
 import { Html, HtmlPropsSchema } from '../blocks/Html';
 import { Image, ImagePropsSchema } from '../blocks/Image';
diff --git a/packages/editor-sample/src/documents/reader/core.tsx b/packages/editor-sample/src/documents/reader/core.tsx
index 6a8e4c8..c9ba743 100644
--- a/packages/editor-sample/src/documents/reader/core.tsx
+++ b/packages/editor-sample/src/documents/reader/core.tsx
@@ -1,5 +1,6 @@
 import { z } from 'zod';
 
+import { Heading, HeadingPropsSchema } from '@usewaypoint/block-heading';
 import { buildBlockComponent, buildBlockConfigurationSchema } from '@usewaypoint/document-core';
 
 import { Avatar, AvatarPropsSchema } from '../blocks/Avatar';
@@ -9,7 +10,6 @@ import ColumnsContainerPropsSchema from '../blocks/ColumnsContainer/ColumnsConta
 import { Container, ContainerPropsSchema } from '../blocks/Container';
 import { Divider, DividerPropsSchema } from '../blocks/Divider';
 import { EmailLayout, EmailLayoutPropsSchema } from '../blocks/EmailLayout';
-import { Heading, HeadingPropsSchema } from '../blocks/Heading';
 import { addReaderBlockWrapper } from '../blocks/helpers/block-wrappers';
 import { Html, HtmlPropsSchema } from '../blocks/Html';
 import { Image, ImagePropsSchema } from '../blocks/Image';