diff --git a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx
index 97f0822..c63e495 100644
--- a/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx
+++ b/packages/editor-sample/src/App/InspectorDrawer/ConfigurationPanel/input-panels/ImageSidebarPanel.tsx
@@ -5,7 +5,7 @@ import {
   VerticalAlignCenterOutlined,
   VerticalAlignTopOutlined,
 } from '@mui/icons-material';
-import { Stack, ToggleButton } from '@mui/material';
+import { Box, Button, Stack, ToggleButton } from '@mui/material';
 import { ImageProps, ImagePropsSchema } from '@usewaypoint/block-image';
 
 import BaseSidebarPanel from './helpers/BaseSidebarPanel';
@@ -13,6 +13,7 @@ import RadioGroupInput from './helpers/inputs/RadioGroupInput';
 import TextDimensionInput from './helpers/inputs/TextDimensionInput';
 import TextInput from './helpers/inputs/TextInput';
 import MultiStylePropertyPanel from './helpers/style-inputs/MultiStylePropertyPanel';
+import { addImage, useImages } from '../../../../documents/editor/EditorContext';
 
 type ImageSidebarPanelProps = {
   data: ImageProps;
@@ -20,6 +21,7 @@ type ImageSidebarPanelProps = {
 };
 export default function ImageSidebarPanel({ data, setData }: ImageSidebarPanelProps) {
   const [, setErrors] = useState<Zod.ZodError | null>(null);
+  const images = useImages();
 
   const updateData = (d: unknown) => {
     const res = ImagePropsSchema.safeParse(d);
@@ -31,8 +33,39 @@ export default function ImageSidebarPanel({ data, setData }: ImageSidebarPanelPr
     }
   };
 
+  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) {
+      return;
+    }
+
+    const reader = new FileReader();
+    reader.onload = () => {
+      addImage({ base64: reader.result as string, file });
+    };
+    reader.readAsDataURL(file);
+  };
+
+  const handleImageClick = (image: { base64: string; file: File }) => () => {
+    updateData({ ...data, props: { ...data.props, url: image.file.name } });
+  };
+
   return (
     <BaseSidebarPanel title="Image block">
+      <Button component="label">
+        Upload image
+        <input type="file" accept="image/*" hidden onChange={handleFileUpload} />
+      </Button>
+
+      <Box>
+        {images.map((image) => (
+          <Box onClick={handleImageClick(image)}>
+            <img key={image.file.name} src={image.base64} alt="Uploaded" style={{ width: 50 }} />
+            {image.file.name}
+          </Box>
+        ))}
+      </Box>
+
       <TextInput
         label="Source URL"
         defaultValue={data.props?.url ?? ''}
diff --git a/packages/editor-sample/src/App/TemplatePanel/EmailPreview.tsx b/packages/editor-sample/src/App/TemplatePanel/EmailPreview.tsx
new file mode 100644
index 0000000..fcacbab
--- /dev/null
+++ b/packages/editor-sample/src/App/TemplatePanel/EmailPreview.tsx
@@ -0,0 +1,41 @@
+import React, { useMemo } from 'react';
+import { useEffect, useRef } from 'react';
+import { useImages } from '../../documents/editor/EditorContext';
+
+interface EmailPreviewProps {
+  html: string;
+}
+
+export const EmailPreview = ({ html }: EmailPreviewProps) => {
+  const images = useImages();
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const content = useMemo(() => {
+    let copy = html;
+    images.forEach((image) => {
+      copy = copy.replaceAll(image.file.name, image.base64);
+    })
+    return copy
+  }, [images]);
+
+  useEffect(() => {
+    if (iframeRef.current && content) {
+      const newChild = new DOMParser().parseFromString(content, 'text/html');
+      iframeRef.current?.contentDocument?.replaceChild(
+        newChild.documentElement,
+        iframeRef.current.contentDocument.documentElement
+      );
+    }
+  }, [iframeRef.current, content]);
+
+  return (
+    <iframe
+      ref={iframeRef}
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
+      title="Email preview"
+    />
+  );
+};
diff --git a/packages/editor-sample/src/App/TemplatePanel/index.tsx b/packages/editor-sample/src/App/TemplatePanel/index.tsx
index 0340cad..e360224 100644
--- a/packages/editor-sample/src/App/TemplatePanel/index.tsx
+++ b/packages/editor-sample/src/App/TemplatePanel/index.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { MonitorOutlined, PhoneIphoneOutlined } from '@mui/icons-material';
 import { Box, Stack, SxProps, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
-import { Reader } from '@usewaypoint/email-builder';
+import { Reader, renderToStaticMarkup } from '@usewaypoint/email-builder';
 
 import EditorBlock from '../../documents/editor/EditorBlock';
 import {
@@ -20,11 +20,13 @@ import ImportJson from './ImportJson';
 import JsonPanel from './JsonPanel';
 import MainTabsGroup from './MainTabsGroup';
 import ShareButton from './ShareButton';
+import { EmailPreview } from './EmailPreview';
 
 export default function TemplatePanel() {
   const document = useDocument();
   const selectedMainTab = useSelectedMainTab();
   const selectedScreenSize = useSelectedScreenSize();
+  const preview = useMemo(() => renderToStaticMarkup(document, { rootBlockId: 'root' }), [document])
 
   let mainBoxSx: SxProps = {
     height: '100%',
@@ -62,7 +64,8 @@ export default function TemplatePanel() {
       case 'preview':
         return (
           <Box sx={mainBoxSx}>
-            <Reader document={document} rootBlockId="root" />
+            <EmailPreview html={preview}/>
+            {/* <Reader document={document} rootBlockId="root" /> */}
           </Box>
         );
       case 'html':
diff --git a/packages/editor-sample/src/documents/editor/EditorContext.tsx b/packages/editor-sample/src/documents/editor/EditorContext.tsx
index 0ac60e6..39d43fe 100644
--- a/packages/editor-sample/src/documents/editor/EditorContext.tsx
+++ b/packages/editor-sample/src/documents/editor/EditorContext.tsx
@@ -4,6 +4,11 @@ import getConfiguration from '../../getConfiguration';
 
 import { TEditorConfiguration } from './core';
 
+export type FileWithBase64 = {
+  file: File;
+  base64: string;
+};
+
 type TValue = {
   document: TEditorConfiguration;
 
@@ -14,6 +19,8 @@ type TValue = {
 
   inspectorDrawerOpen: boolean;
   samplesDrawerOpen: boolean;
+
+  images: Array<FileWithBase64>;
 };
 
 const editorStateStore = create<TValue>(() => ({
@@ -25,6 +32,7 @@ const editorStateStore = create<TValue>(() => ({
 
   inspectorDrawerOpen: true,
   samplesDrawerOpen: true,
+  images: [],
 }));
 
 export function useDocument() {
@@ -59,6 +67,10 @@ export function useSamplesDrawerOpen() {
   return editorStateStore((s) => s.samplesDrawerOpen);
 }
 
+export function useImages() {
+  return editorStateStore((s) => s.images);
+}
+
 export function setSelectedBlockId(selectedBlockId: TValue['selectedBlockId']) {
   const selectedSidebarTab = selectedBlockId === null ? 'styles' : 'block-configuration';
   const options: Partial<TValue> = {};
@@ -107,3 +119,8 @@ export function toggleSamplesDrawerOpen() {
 export function setSelectedScreenSize(selectedScreenSize: TValue['selectedScreenSize']) {
   return editorStateStore.setState({ selectedScreenSize });
 }
+
+export const addImage = (image: FileWithBase64) => {
+  const images = editorStateStore.getState().images;
+  return editorStateStore.setState({ images: [...images, image] });
+};
diff --git a/packages/editor-sample/src/documents/editor/core.tsx b/packages/editor-sample/src/documents/editor/core.tsx
index 4db26f1..f678489 100644
--- a/packages/editor-sample/src/documents/editor/core.tsx
+++ b/packages/editor-sample/src/documents/editor/core.tsx
@@ -22,6 +22,18 @@ import ContainerPropsSchema from '../blocks/Container/ContainerPropsSchema';
 import EmailLayoutEditor from '../blocks/EmailLayout/EmailLayoutEditor';
 import EmailLayoutPropsSchema from '../blocks/EmailLayout/EmailLayoutPropsSchema';
 import EditorBlockWrapper from '../blocks/helpers/block-wrappers/EditorBlockWrapper';
+import { useImages } from './EditorContext';
+
+const CustomImagePropsSchema = ImagePropsSchema.extend({});
+
+const isUrl = (value: string) => {
+  try {
+    new URL(value);
+    return true;
+  } catch {
+    return false;
+  }
+};
 
 const EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
   Avatar: {
@@ -75,13 +87,18 @@ const EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
   Image: {
     schema: ImagePropsSchema,
     Component: (data) => {
+      const images = useImages()
       const props = {
         ...data,
         props: {
           ...data.props,
-          url: data.props?.url ?? 'https://placehold.co/600x400@2x/F8F8F8/CCC?text=Your%20image',
+          url: data.props?.url,
         },
       };
+      if (props.props?.url && !isUrl(props.props.url)) {
+        props.props.url = images.find((i) => i.file.name === props.props.url)?.base64 ?? data.props.url;
+      }
+
       return (
         <EditorBlockWrapper>
           <Image {...props} />
@@ -117,6 +134,14 @@ const EDITOR_DICTIONARY = buildBlockConfigurationDictionary({
       </EditorBlockWrapper>
     ),
   },
+  CustomImage: {
+    schema: CustomImagePropsSchema,
+    Component: (props) => (
+      <EditorBlockWrapper>
+        <Image {...props} />
+      </EditorBlockWrapper>
+    ),
+  },
 });
 
 export const EditorBlock = buildBlockComponent(EDITOR_DICTIONARY);