diff --git a/packages/core/src/_internals.ts b/packages/core/src/_internals.ts
index 45bc630f..864a9d79 100644
--- a/packages/core/src/_internals.ts
+++ b/packages/core/src/_internals.ts
@@ -1,6 +1,5 @@
 export { CompilationCache } from "./compiler/CompilationCache";
 export type { CompilationCacheItemValue } from "./compiler/CompilationCache";
-export { compileBox, getBoxStyles } from "./compiler/box";
 export { RichTextEditor } from "./compiler/builtins/$richText/$richText.editor";
 export { TextEditor } from "./compiler/builtins/$text/$text.editor";
 export { buildText } from "./compiler/builtins/$text/buildText";
@@ -16,7 +15,7 @@ export {
 export { normalize } from "./compiler/normalize";
 export * from "./compiler/parsePath";
 export type { PathInfo } from "./compiler/parsePath";
-export { scalarizeConfig } from "./compiler/resop";
+export { scalarizeConfig } from "./scalarizeConfig";
 export * from "./compiler/schema";
 export * from "./compiler/schema/buttonSchemaProps";
 export { traverseComponents } from "./compiler/traverseComponents";
@@ -28,6 +27,7 @@ export type {
   InternalComponentDefinition,
   InternalRenderableComponentDefinition,
 } from "./compiler/types";
+
 export {
   EasyblocksMetadataProvider,
   useEasyblocksMetadata,
diff --git a/packages/core/src/compiler/builtins/$richText/$richText.client.tsx b/packages/core/src/compiler/builtins/$richText/$richText.client.tsx
index e98579fc..df5df63b 100644
--- a/packages/core/src/compiler/builtins/$richText/$richText.client.tsx
+++ b/packages/core/src/compiler/builtins/$richText/$richText.client.tsx
@@ -3,17 +3,18 @@ import React, { ReactElement, ReactNode } from "react";
 interface RichTextProps {
   elements: Array<ReactElement>;
   Root: ReactElement<{ children: ReactNode }>;
+  __textRootClasses: string;
 }
 
 function RichTextClient(props: RichTextProps) {
   const { elements: Elements, Root } = props;
 
   return (
-    <Root.type {...Root.props}>
+    <div className={props.__textRootClasses}>
       {Elements.map((Element, index) => {
         return <Element.type {...Element.props} key={index} />;
       })}
-    </Root.type>
+    </div>
   );
 }
 
diff --git a/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx b/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx
index 168eb913..0e5d247c 100644
--- a/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx
+++ b/packages/core/src/compiler/builtins/$richText/$richText.editor.tsx
@@ -26,17 +26,13 @@ import type {
   RenderPlaceholderProps,
 } from "slate-react";
 import { Editable, ReactEditor, Slate, withReact } from "slate-react";
-import { Box } from "../../../components/Box/Box";
 import {
   ComponentBuilder,
   InternalNoCodeComponentProps,
 } from "../../../components/ComponentBuilder/ComponentBuilder";
 import { RichTextChangedEvent } from "../../../events";
 import { getFallbackForLocale } from "../../../locales";
-import { responsiveValueFill } from "../../../responsiveness";
-import { Devices, ResponsiveValue } from "../../../types";
-import { compileBox, getBoxStyles } from "../../box";
-import { getDevicesWidths } from "../../devices";
+import { ResponsiveValue } from "../../../types";
 import { duplicateConfig } from "../../duplicateConfig";
 import type { RichTextComponentConfig } from "./$richText";
 import {
@@ -59,6 +55,8 @@ import { getFocusedFieldsFromSlateSelection } from "./utils/getFocusedFieldsFrom
 import { getFocusedRichTextPartsConfigPaths } from "./utils/getFocusedRichTextPartsConfigPaths";
 import { getRichTextComponentConfigFragment } from "./utils/getRichTextComponentConfigFragment";
 import { NORMALIZED_IDS_TO_IDS, withEasyblocks } from "./withEasyblocks";
+import { liStyles, olStyles, paragraphStyles, ulStyles } from "./styles";
+import { useEasyblocksMetadata } from "../../../_internals";
 
 interface RichTextProps extends InternalNoCodeComponentProps {
   elements: Array<
@@ -81,11 +79,10 @@ function RichTextEditor(props: RichTextProps) {
     setFocussedField,
   } = editorContext;
 
+  const meta = useEasyblocksMetadata();
+
   const {
-    __easyblocks: {
-      path,
-      runtime: { resop, stitches, devices },
-    },
+    __easyblocks: { path },
     align,
   } = props;
 
@@ -364,43 +361,51 @@ function RichTextEditor(props: RichTextProps) {
       throw new Error("Missing element");
     }
 
-    const compiledStyles = (() => {
-      if (Element._component === "@easyblocks/rich-text-block-element") {
-        if (Element.props.type === "bulleted-list") {
-          return Element.styled.BulletedList;
-        } else if (Element.props.type === "numbered-list") {
-          return Element.styled.NumberedList;
-        } else if (Element.props.type === "paragraph") {
-          return Element.styled.Paragraph;
-        }
-      } else if (Element._component === "@easyblocks/rich-text-line-element") {
-        if (element.type === "text-line") {
-          return Element.styled.TextLine;
-        } else if (element.type === "list-item") {
-          return Element.styled.ListItem;
-        }
-      }
-    })();
+    if (Element._component === "@easyblocks/rich-text-block-element") {
+      if (Element.props.type === "bulleted-list") {
+        return (
+          <ul style={ulStyles} {...attributes}>
+            {children}
+          </ul>
+        );
+
+        // return Element.props.__styled.BulletedList;
+      } else if (Element.props.type === "numbered-list") {
+        return (
+          <ol style={olStyles} {...attributes}>
+            {children}
+          </ol>
+        );
+
+        // return Element.props.__styled.NumberedList;
+      } else if (Element.props.type === "paragraph") {
+        return React.createElement(
+          // @ts-ignore
+          Element.props.accessibilityRole,
+          attributes,
+          children
+        );
 
-    if (compiledStyles === undefined) {
-      throw new Error("Unknown element type");
+        // return Element.props.__styled.Paragraph;
+      }
+    } else if (Element._component === "@easyblocks/rich-text-line-element") {
+      if (element.type === "text-line") {
+        return (
+          <div style={paragraphStyles} {...attributes}>
+            {children}
+          </div>
+        );
+      } else if (element.type === "list-item") {
+        return (
+          <li style={liStyles} {...attributes}>
+            <span>{children}</span>
+          </li>
+        );
+        // return Element.props.__styled.ListItem;
+      }
     }
 
-    return (
-      <Box
-        __compiled={compiledStyles}
-        devices={devices}
-        stitches={stitches}
-        {...attributes}
-        // Element annotation for easier debugging
-        {...(process.env.NODE_ENV === "development" && {
-          "data-shopstory-element-type": element.type,
-          "data-shopstory-id": element.id,
-        })}
-      >
-        {element.type === "list-item" ? <div>{children}</div> : children}
-      </Box>
-    );
+    throw new Error("Unknown element type");
   }
 
   const TextParts = extractTextPartsFromCompiledComponents(props);
@@ -425,17 +430,16 @@ function RichTextEditor(props: RichTextProps) {
       throw new Error("Missing part");
     }
 
+    const __textPartClasses: string = meta.renderer.generateClassNames(
+      // @ts-ignore
+      TextPart.props.__textPart,
+      meta
+    );
+
     const TextPartComponent = (
       <RichTextPartClient
         value={children}
-        Text={
-          <Box
-            __compiled={TextPart.styled.Text}
-            devices={devices}
-            stitches={stitches}
-            {...attributes}
-          />
-        }
+        textAttributes={attributes}
         TextWrapper={
           TextPart.components.TextWrapper[0] ? (
             <ComponentBuilder
@@ -449,6 +453,7 @@ function RichTextEditor(props: RichTextProps) {
             />
           ) : undefined
         }
+        __textPartClasses={__textPartClasses}
       />
     );
 
@@ -738,61 +743,30 @@ function RichTextEditor(props: RichTextProps) {
     }
   }
 
-  const contentEditableClassName = useMemo(() => {
-    const responsiveAlignmentStyles = mapResponsiveAlignmentToStyles(align, {
-      devices: editorContext.devices,
-      resop,
-    });
+  const isFallbackValueShown =
+    localizedRichTextElements === undefined &&
+    fallbackRichTextElements !== undefined;
 
-    const isFallbackValueShown =
-      localizedRichTextElements === undefined &&
-      fallbackRichTextElements !== undefined;
-
-    // When we make a selection of text within editable container and then blur
-    // sometimes the browser selection changes and shows incorrectly selected chunks.
-    const getStyles = stitches.css({
-      display: "flex",
-      ...responsiveAlignmentStyles,
-      cursor: !isEnabled ? "inherit" : "text",
-      "& *": {
-        pointerEvents: isEnabled ? "auto" : "none",
-        userSelect: isEnabled ? "auto" : "none",
-      },
-      "& *::selection": {
-        backgroundColor: "#b4d5fe",
-      },
-      ...(isDecorationActive && {
-        "& *::selection": {
-          backgroundColor: "transparent",
-        },
-        "& *[data-easyblocks-rich-text-selection]": {
-          backgroundColor: "#b4d5fe",
-        },
-      }),
-      ...(isFallbackValueShown && {
-        opacity: 0.5,
-      }),
-      // Remove any text decoration from slate nodes that are elements. We only need text decoration on text elements.
-      "[data-slate-node]": {
-        textDecoration: "none",
-      },
-    });
+  const __textRootClasses: string = meta.renderer.generateClassNames(
+    // @ts-ignore
+    props.__textRoot,
+    meta
+  );
 
-    return getStyles().className;
-  }, [
-    align,
-    isDecorationActive,
-    localizedRichTextElements,
-    fallbackRichTextElements,
-    isEnabled,
-  ]);
+  const classes = `EasyblocksRichTextEditor_Root ${
+    isEnabled ? "EasyblocksRichTextEditor_Root--enabled" : ""
+  } ${
+    isFallbackValueShown ? "EasyblocksRichTextEditor_Root--fallbackValue" : ""
+  } ${
+    isDecorationActive ? "EasyblocksRichTextEditor_Root--decorationActive" : ""
+  }`;
 
   return (
     <Slate editor={editor} value={editorValue} onChange={handleEditableChange}>
       <div>
         {/* this wrapper div prevents from Chrome bug where "pointer-events: none" on contenteditable is ignored*/}
         <Editable
-          className={contentEditableClassName}
+          className={`${classes} ${__textRootClasses}`}
           placeholder="Here goes text content"
           renderElement={renderElement}
           renderLeaf={renderLeaf}
@@ -866,40 +840,6 @@ function isConfigEqual(newConfig: any, oldConfig: any) {
   return deepCompare(newConfig, oldConfig);
 }
 
-function mapResponsiveAlignmentToStyles(
-  align: ResponsiveValue<Alignment>,
-  { devices, resop }: { devices: Devices; resop: any }
-) {
-  function mapAlignmentToFlexAlignment(align: Alignment) {
-    if (align === "center") {
-      return "center";
-    }
-
-    if (align === "right") {
-      return "flex-end";
-    }
-
-    return "flex-start";
-  }
-
-  const responsiveStyles = resop(
-    {
-      align: responsiveValueFill(align, devices, getDevicesWidths(devices)),
-    },
-    (values: any) => {
-      return {
-        justifyContent: mapAlignmentToFlexAlignment(values.align),
-        textAlign: values.align,
-      };
-    },
-    devices
-  );
-
-  const compiledStyles = compileBox(responsiveStyles, devices);
-
-  return getBoxStyles(compiledStyles, devices);
-}
-
 function createTextSelectionDecorator(editor: Editor) {
   return ([node, path]: NodeEntry) => {
     const decorations: Array<Range> = [];
diff --git a/packages/core/src/compiler/builtins/$richText/$richText.styles.ts b/packages/core/src/compiler/builtins/$richText/$richText.styles.ts
index c5351993..1722f5cb 100755
--- a/packages/core/src/compiler/builtins/$richText/$richText.styles.ts
+++ b/packages/core/src/compiler/builtins/$richText/$richText.styles.ts
@@ -2,7 +2,7 @@ import type {
   NoCodeComponentStylesFunctionInput,
   NoCodeComponentStylesFunctionResult,
 } from "../../../types";
-import { Alignment } from "./$richText.types";
+// import { Alignment } from "./$richText.types";
 
 export function richTextStyles({
   values,
@@ -11,13 +11,15 @@ export function richTextStyles({
   const align = params.passedAlign ?? values.align;
 
   return {
-    styled: {
-      Root: {
-        display: "flex",
-        justifyContent: mapAlignmentToFlexAlignment(align),
-        textAlign: align,
-      },
-    },
+    // styled: {
+    //   Root: {
+    //     // display: "flex",
+    //     // justifyContent: mapAlignmentToFlexAlignment(align),
+    //     // textAlign: align,
+    //     // color: values.mainColor,
+    //     // ...values.mainFont,
+    //   },
+    // },
     components: {
       elements: {
         // We store values within $richText to allow for changing them from sidebar, but we use them inside of $richTextBlockElement.
@@ -36,14 +38,14 @@ export function richTextStyles({
   };
 }
 
-export function mapAlignmentToFlexAlignment(align: Alignment) {
-  if (align === "center") {
-    return "center";
-  }
+// export function mapAlignmentToFlexAlignment(align: Alignment) {
+//   if (align === "center") {
+//     return "center";
+//   }
 
-  if (align === "right") {
-    return "flex-end";
-  }
+//   if (align === "right") {
+//     return "flex-end";
+//   }
 
-  return "flex-start";
-}
+//   return "flex-start";
+// }
diff --git a/packages/core/src/compiler/builtins/$richText/$richTextBlockElement/$richTextBlockElement.client.tsx b/packages/core/src/compiler/builtins/$richText/$richTextBlockElement/$richTextBlockElement.client.tsx
index 03ed0119..a52c0bd9 100644
--- a/packages/core/src/compiler/builtins/$richText/$richTextBlockElement/$richTextBlockElement.client.tsx
+++ b/packages/core/src/compiler/builtins/$richText/$richTextBlockElement/$richTextBlockElement.client.tsx
@@ -1,6 +1,7 @@
 import React, { ReactElement } from "react";
 import type { CompiledNoCodeComponentProps } from "../../../types";
 import type { RichTextBlockElementComponentConfig } from "./$richTextBlockElement";
+import { olStyles, ulStyles } from "../styles";
 
 type RichTextBlockElementProps = CompiledNoCodeComponentProps<
   RichTextBlockElementComponentConfig["_component"],
@@ -19,6 +20,7 @@ export function RichTextBlockElementClient(props: RichTextBlockElementProps) {
     elements: Elements,
     NumberedList,
     Paragraph,
+    accessibilityRole,
   } = props;
 
   const elements = Elements.map((Element, index) => (
@@ -26,24 +28,21 @@ export function RichTextBlockElementClient(props: RichTextBlockElementProps) {
   ));
 
   if (type === "paragraph") {
-    return <Paragraph.type {...Paragraph.props}>{elements}</Paragraph.type>;
+    return React.createElement(accessibilityRole, {}, elements);
+    // return <Paragraph.type {...Paragraph.props}>{elements}</Paragraph.type>;
   }
 
   if (type === "bulleted-list") {
-    return (
-      <BulletedList.type {...BulletedList.props}>{elements}</BulletedList.type>
-    );
+    return <ul style={ulStyles}>{elements}</ul>;
   }
 
   if (type === "numbered-list") {
-    return (
-      <NumberedList.type {...NumberedList.props}>{elements}</NumberedList.type>
-    );
+    return <ol style={olStyles}>{elements}</ol>;
   }
 
   if (process.env.NODE_ENV === "development") {
     console.warn(`Unknown @easyblocks/rich-text-block-element type "${type}"`);
   }
 
-  return <div>{elements}</div>;
+  return <span>{elements}</span>;
 }
diff --git a/packages/core/src/compiler/builtins/$richText/$richTextBlockElement/$richTextBlockElement.styles.ts b/packages/core/src/compiler/builtins/$richText/$richTextBlockElement/$richTextBlockElement.styles.ts
index dad844ce..90ac7c25 100644
--- a/packages/core/src/compiler/builtins/$richText/$richTextBlockElement/$richTextBlockElement.styles.ts
+++ b/packages/core/src/compiler/builtins/$richText/$richTextBlockElement/$richTextBlockElement.styles.ts
@@ -46,68 +46,85 @@ export function richTextBlockElementStyles({
   RichTextBlockElementValues,
   RichTextBlockElementParams
 >): NoCodeComponentStylesFunctionResult {
-  const maxDigitsCount = elements.length.toString().length;
+  // const maxDigitsCount = elements.length.toString().length;
 
-  const paddingInline = `clamp(${px(
-    BULLETED_LIST_MIN_INLINE_SPACING
-  )}, calc(${px(mainFontSize)} * 0.5), ${px(mainFontSize)})`;
+  // const paddingInline = `clamp(${px(
+  //   BULLETED_LIST_MIN_INLINE_SPACING
+  // )}, calc(${px(mainFontSize)} * 0.5), ${px(mainFontSize)})`;
 
-  const bulletedListMarkerStyles = {
-    paddingLeft: paddingInline,
-    paddingRight: paddingInline,
-    content: BULLET_CHARACTER,
-  };
+  // const bulletedListMarkerStyles = {
+  //   paddingLeft: paddingInline,
+  //   paddingRight: paddingInline,
+  //   content: BULLET_CHARACTER,
+  // };
 
-  const numberedListMarkerStyles = {
-    minWidth: `calc(${maxDigitsCount} * 1ch + ${NUMBERED_LIST_DOT_CHARACTER_SAFE_WIDTH})`,
-    paddingRight: `clamp(${px(
-      NUMBERED_LIST_MIN_COUNTER_SPACING
-    )}, 0.5ch, ${NUMBERED_LIST_MAX_COUNTER_SPACING})`,
-    fontVariantNumeric: "tabular-nums",
-    textAlign: "right",
-    content: `counter(list-item)"."`,
-  };
+  // const numberedListMarkerStyles = {
+  //   minWidth: `calc(${maxDigitsCount} * 1ch + ${NUMBERED_LIST_DOT_CHARACTER_SAFE_WIDTH})`,
+  //   paddingRight: `clamp(${px(
+  //     NUMBERED_LIST_MIN_COUNTER_SPACING
+  //   )}, 0.5ch, ${NUMBERED_LIST_MAX_COUNTER_SPACING})`,
+  //   fontVariantNumeric: "tabular-nums",
+  //   textAlign: "right",
+  //   content: `counter(list-item)"."`,
+  // };
 
-  const markerStyles = {
-    boxSizing: "content-box",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "flex-end",
-    flexGrow: 0,
-    flexShrink: 0,
-    fontSize: mainFontSize,
-    ...(type === "bulleted-list"
-      ? bulletedListMarkerStyles
-      : numberedListMarkerStyles),
-  };
+  // const markerStyles = {
+  //   boxSizing: "content-box",
+  //   display: "flex",
+  //   alignItems: "center",
+  //   justifyContent: "flex-end",
+  //   flexGrow: 0,
+  //   flexShrink: 0,
+  //   fontSize: mainFontSize,
+  //   ...(type === "bulleted-list"
+  //     ? bulletedListMarkerStyles
+  //     : numberedListMarkerStyles),
+  // };
 
-  const listStyles = {
-    counterSet: "list-item",
-    paddingLeft: 0,
-    listStyle: "none",
-    color: mainColor,
-    ...mainFont,
-    "& > li": {
-      color: mainColor,
-      ...mainFont,
-      // Instead of using ::marker pseudo-element, we use ::before because it gives us more control over its appearance.
-      "&::before": markerStyles,
-    },
-  };
+  // const listStyles = {
+  //   counterSet: "list-item",
+  //   paddingLeft: 0,
+  //   listStyle: "none",
+  //   color: mainColor,
+  //   ...mainFont,
+  //   "& > li": {
+  //     color: mainColor,
+  //     ...mainFont,
+  //     // Instead of using ::marker pseudo-element, we use ::before because it gives us more control over its appearance.
+  //     "&::before": markerStyles,
+  //   },
+  // };
 
   return {
-    styled: {
-      Paragraph: { __as: accessibilityRole },
-      BulletedList: { __as: "ul", ...listStyles },
-      NumberedList: { __as: "ol", ...listStyles },
-    },
+    // styled: {
+    //   Paragraph: { /*__as: accessibilityRole */ },
+    //   BulletedList: {
+    //     // __as: "ul",
+    //     // listStyle: "initial",
+    //     // listStylePosition: "inside",
+    //     // ...mainFont,
+    //     // paddingInlineStart: "0.9em",
+    //   }, // ...listStyles },
+    //   NumberedList: {
+    //     // __as: "ol",
+    //     // listStyle: "decimal",
+    //     // listStylePosition: "inside",
+    //     // ...mainFont,
+    //     // paddingInlineStart: "4ch",
+    //   }, // ...listStyles },
+    // },
     components: {
       elements: {
         itemProps: elements.map(() => ({
           blockType: type,
           align,
+          mainColor,
+          mainFont,
         })),
       },
     },
+    props: {
+      accessibilityRole,
+    },
   };
 }
diff --git a/packages/core/src/compiler/builtins/$richText/$richTextLineElement/$richTextLineElement.client.tsx b/packages/core/src/compiler/builtins/$richText/$richTextLineElement/$richTextLineElement.client.tsx
index 0c13ccf9..ed98eb8e 100644
--- a/packages/core/src/compiler/builtins/$richText/$richTextLineElement/$richTextLineElement.client.tsx
+++ b/packages/core/src/compiler/builtins/$richText/$richTextLineElement/$richTextLineElement.client.tsx
@@ -1,6 +1,6 @@
 import React, { ReactElement } from "react";
 import type { RichTextBlockElementType } from "../$richTextBlockElement/$richTextBlockElement";
-
+import { liStyles, paragraphStyles } from "../styles";
 type RichTextLineElementProps = {
   blockType: RichTextBlockElementType;
   elements: Array<React.ReactElement>;
@@ -15,15 +15,22 @@ export function RichTextLineElementClient(props: RichTextLineElementProps) {
   ));
 
   if (blockType === "paragraph") {
-    return <TextLine.type {...TextLine.props}>{elements}</TextLine.type>;
+    return <div style={paragraphStyles}>{elements}</div>;
+    // return <TextLine.type {...TextLine.props}>{elements}</TextLine.type>;
   }
 
   if (blockType === "bulleted-list" || blockType === "numbered-list") {
     return (
-      <ListItem.type {...ListItem.props}>
-        <div>{elements}</div>
-      </ListItem.type>
+      <li style={liStyles}>
+        <span>{elements}</span>
+      </li>
     );
+
+    // return (
+    //   <ListItem.type {...ListItem.props}>
+    //     <span>{elements}</span>
+    //   </ListItem.type>
+    // );
   }
 
   if (process.env.NODE_ENV === "development") {
diff --git a/packages/core/src/compiler/builtins/$richText/$richTextLineElement/$richTextLineElement.styles.ts b/packages/core/src/compiler/builtins/$richText/$richTextLineElement/$richTextLineElement.styles.ts
index 385b99ad..c9a5fee9 100644
--- a/packages/core/src/compiler/builtins/$richText/$richTextLineElement/$richTextLineElement.styles.ts
+++ b/packages/core/src/compiler/builtins/$richText/$richTextLineElement/$richTextLineElement.styles.ts
@@ -1,4 +1,4 @@
-import { mapAlignmentToFlexAlignment } from "../$richText.styles";
+// import { mapAlignmentToFlexAlignment } from "../$richText.styles";
 import { Alignment } from "../$richText.types";
 import type { RichTextBlockElementType } from "../$richTextBlockElement/$richTextBlockElement";
 import {
@@ -22,27 +22,29 @@ export function richTextLineElementStyles({
   RichTextLineParams
 >): NoCodeComponentStylesFunctionResult {
   return {
-    styled: {
-      TextLine: {
-        lineHeight: "initial",
-        wordBreak: "break-word",
-      },
-      ListItem: {
-        __as: "li",
-        display: "flex",
-        justifyContent: mapAlignmentToFlexAlignment(values.align),
-        alignItems: "baseline",
-        paddingLeft: 0,
-        lineHeight: "initial",
-        wordBreak: "break-word",
-        listStyle: "none",
-        counterIncrement: "list-item",
-        // Allows flex items to break when text is overflowing
-        "& > *": {
-          minWidth: 0,
-        },
-      },
-    },
+    // styled: {
+    //   TextLine: {
+    //     lineHeight: "initial",
+    //     wordBreak: "break-word",
+    //   },
+    //   ListItem: {
+    //     __as: "li",
+    //     // display: "flex",
+    //     // justifyContent: mapAlignmentToFlexAlignment(values.align),
+    //     // paddingLeft: 0,
+    //     alignItems: "baseline",
+    //     lineHeight: "inherit",
+    //     wordBreak: "break-word",
+    //     listStyle: "inherit",
+    //     counterIncrement: "list-item",
+
+    //     // ...params.mainColor
+    //     // Allows flex items to break when text is overflowing
+    //     // "& > *": {
+    //     //   minWidth: 0,
+    //     // },
+    //   },
+    // },
 
     props: {
       blockType: params.blockType,
diff --git a/packages/core/src/compiler/builtins/$richText/$richTextPart/$richTextPart.client.tsx b/packages/core/src/compiler/builtins/$richText/$richTextPart/$richTextPart.client.tsx
index 7d329786..1b95d698 100644
--- a/packages/core/src/compiler/builtins/$richText/$richTextPart/$richTextPart.client.tsx
+++ b/packages/core/src/compiler/builtins/$richText/$richTextPart/$richTextPart.client.tsx
@@ -5,20 +5,33 @@ type RichTextPartProps = {
   TextWrapper: React.ReactElement<{ trigger: React.ReactElement }> | undefined;
   // ReactElement when editing, string when not
   value: string | ReactElement;
-  Text: React.ReactElement<{ children: ReactNode; style: Record<string, any> }>;
+  // Text: React.ReactElement<{ children: ReactNode; style: Record<string, any> }>;
+  __textPartClasses: string;
+  textAttributes: Record<string, any>;
 };
 
 export function RichTextPartClient(props: RichTextPartProps) {
-  const { value, Text, TextWrapper } = props;
+  const {
+    value,
+    // Text,
+    TextWrapper,
+    textAttributes = {},
+    __textPartClasses,
+  } = props;
   const textValue = value || "\uFEFF";
 
   if (TextWrapper) {
     return (
-      <Text.type {...Text.props}>
+      <span className={__textPartClasses} {...textAttributes}>
         <TextWrapper.type {...TextWrapper.props}>{textValue}</TextWrapper.type>
-      </Text.type>
+      </span>
     );
   }
 
-  return <Text.type {...Text.props}>{textValue}</Text.type>;
+  return (
+    <span className={__textPartClasses} {...textAttributes}>
+      {textValue}
+    </span>
+  );
+  // return <Text.type {...Text.props}>{textValue}</Text.type>;
 }
diff --git a/packages/core/src/compiler/builtins/$richText/$richTextPart/$richTextPart.styles.ts b/packages/core/src/compiler/builtins/$richText/$richTextPart/$richTextPart.styles.ts
index ad982cd7..73cc040d 100644
--- a/packages/core/src/compiler/builtins/$richText/$richTextPart/$richTextPart.styles.ts
+++ b/packages/core/src/compiler/builtins/$richText/$richTextPart/$richTextPart.styles.ts
@@ -4,10 +4,11 @@ import type {
   NoCodeComponentStylesFunctionResult,
 } from "../../../../types";
 
-const DEFAULT_FONT_VALUES = {
-  fontWeight: "initial",
-  fontStyle: "initial",
-};
+// const DEFAULT_FONT_VALUES = {
+//   fontWeight: "initial",
+//   fontStyle: "initial",
+//   lineHeight: "initial",
+// };
 
 export interface RichTextPartValues {
   color: string;
@@ -20,17 +21,17 @@ export function richTextPartStyles({
   values: { color, font, TextWrapper },
   isEditing,
 }: NoCodeComponentStylesFunctionInput<RichTextPartValues>): NoCodeComponentStylesFunctionResult {
-  const fontWithDefaults = {
-    ...DEFAULT_FONT_VALUES,
-    ...font,
-  };
+  // const fontWithDefaults = {
+  //   ...DEFAULT_FONT_VALUES,
+  //   ...font,
+  // };
 
   const hasTextWrapper = TextWrapper.length > 0;
 
   const textStyles: Record<string, any> = {
     __as: "span",
-    color,
-    ...fontWithDefaults,
+    // color,
+    // ...fontWithDefaults,
   };
 
   if (hasTextWrapper && !isEditing) {
@@ -49,8 +50,8 @@ export function richTextPartStyles({
   }
 
   return {
-    styled: {
-      Text: textStyles,
-    },
+    // styled: {
+    //   // Text: textStyles,
+    // },
   };
 }
diff --git a/packages/core/src/compiler/builtins/$richText/styles.ts b/packages/core/src/compiler/builtins/$richText/styles.ts
new file mode 100644
index 00000000..053330fd
--- /dev/null
+++ b/packages/core/src/compiler/builtins/$richText/styles.ts
@@ -0,0 +1,19 @@
+export const ulStyles: React.CSSProperties = {
+  listStyle: "initial",
+  listStylePosition: "inside",
+};
+export const olStyles: React.CSSProperties = {
+  listStyle: "initial",
+  listStylePosition: "inside",
+};
+export const liStyles: React.CSSProperties = {
+  alignItems: "baseline",
+  lineHeight: "inherit",
+  wordBreak: "break-word",
+  listStyle: "inherit",
+  counterIncrement: "list-item",
+};
+export const paragraphStyles: React.CSSProperties = {
+  lineHeight: "initial",
+  wordBreak: "break-word",
+};
diff --git a/packages/core/src/compiler/builtins/$text/$text.editor.tsx b/packages/core/src/compiler/builtins/$text/$text.editor.tsx
index 7a588a8c..9528d483 100644
--- a/packages/core/src/compiler/builtins/$text/$text.editor.tsx
+++ b/packages/core/src/compiler/builtins/$text/$text.editor.tsx
@@ -13,7 +13,7 @@ function TextEditor(props: TextProps) {
   const {
     Text,
     value,
-    __easyblocks: { path, runtime },
+    __easyblocks: { path },
   } = props;
 
   const { form } = (window.parent as any).editorWindowAPI.editorContext;
@@ -24,11 +24,7 @@ function TextEditor(props: TextProps) {
   return (
     <Text.type {...Text.props} as={"div"}>
       {isLocalTextReference ? (
-        <InlineTextarea
-          path={path}
-          placeholder={"Here goes text content"}
-          stitches={runtime.stitches}
-        />
+        <InlineTextarea path={path} placeholder={"Here goes text content"} />
       ) : (
         value ?? <span>&nbsp;</span>
       )}
diff --git a/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx b/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx
index 965dde1d..de8af7f3 100644
--- a/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx
+++ b/packages/core/src/compiler/builtins/$text/InlineTextarea.tsx
@@ -7,14 +7,9 @@ import { useTextValue } from "../useTextValue";
 interface InlineTextProps {
   path: string;
   placeholder?: string;
-  stitches: any;
 }
 
-export function InlineTextarea({
-  path,
-  placeholder,
-  stitches,
-}: InlineTextProps) {
+export function InlineTextarea({ path, placeholder }: InlineTextProps) {
   const [isEnabled, setIsEnabled] = useState(false);
   const textAreaRef = useRef<ElementRef<"textarea">>(null);
 
@@ -36,35 +31,6 @@ export function InlineTextarea({
     placeholder
   );
 
-  const css = stitches.css({
-    width: "100%",
-    wordWrap: "break-word",
-    display: "block",
-    fontSize: "inherit",
-    fontFamily: "inherit",
-    fontWeight: "inherit",
-    boxSizing: "border-box",
-    color: "inherit",
-    letterSpacing: "inherit",
-    lineHeight: "inherit",
-    margin: "0 auto",
-    maxWidth: "inherit",
-    textTransform: "inherit",
-    backgroundColor: "inherit",
-    textAlign: "inherit",
-    outline: "none",
-    resize: "none",
-    border: "none",
-    overflow: "visible",
-    position: "relative",
-    padding: 0,
-    "-ms-overflow-style": "none",
-    "&::-webkit-scrollbar": {
-      display: "none",
-    },
-    pointerEvents: isEnabled ? "auto" : "none",
-  })();
-
   return (
     <div
       onMouseDown={(event) => {
@@ -80,7 +46,9 @@ export function InlineTextarea({
       }}
     >
       <TextareaAutosize
-        className={css}
+        className={`EasyblocksInlineTextarea_Textarea ${
+          isEnabled ? "EasyblocksInlineTextarea_Textarea--enabled" : ""
+        }`}
         rows={1}
         {...inputProps}
         ref={textAreaRef}
diff --git a/packages/core/src/compiler/compileComponent.ts b/packages/core/src/compiler/compileComponent.ts
index 9ab07d22..13a11698 100644
--- a/packages/core/src/compiler/compileComponent.ts
+++ b/packages/core/src/compiler/compileComponent.ts
@@ -10,10 +10,8 @@ import {
   toArray,
   uniqueId,
 } from "@easyblocks/utils";
-import CryptoJS from "crypto-js";
 import { isComponentConfig } from "../checkers";
 import {
-  responsiveValueAt,
   responsiveValueFill,
   responsiveValueNormalize,
 } from "../responsiveness";
@@ -31,8 +29,6 @@ import {
   EditingInfo,
   FieldPortal,
   NoCodeComponentEditingFunctionResult,
-  NoCodeComponentStylesFunctionInput,
-  ScalarOrCollection,
   SchemaProp,
   SerializedComponentDefinitions,
   SerializedRenderableComponentDefinition,
@@ -45,7 +41,6 @@ import type {
   CompilationCacheItemValue,
 } from "./CompilationCache";
 import { applyAutoUsingResponsiveTokens } from "./applyAutoUsingResponsiveTokens";
-import { compileBox } from "./box";
 import { RichTextComponentConfig } from "./builtins/$richText/$richText";
 import { compileComponentValues } from "./compileComponentValues";
 import { compileFromSchema } from "./compileFromSchema";
@@ -58,7 +53,7 @@ import {
 import { getMostCommonValueFromRichTextParts } from "./getMostCommonValueFromRichTextParts";
 import { linearizeSpace } from "./linearizeSpace";
 import { parsePath } from "./parsePath";
-import { resop2, scalarizeConfig } from "./resop";
+import { scalarizeConfig } from "../scalarizeConfig";
 import {
   Component$$$SchemaProp,
   isExternalSchemaProp,
@@ -84,6 +79,12 @@ import {
 } from "./types";
 import { getFallbackLocaleForLocale } from "../locales";
 
+import {
+  build,
+  buildTextPart,
+  buildTextRoot,
+} from "../stitches/stitches_build";
+
 type ComponentCompilationArtifacts = {
   compiledComponentConfig: CompiledComponentConfig;
   configAfterAuto: NoCodeComponentEntry;
@@ -449,70 +450,76 @@ export function compileComponent(
       editingContextProps = editingInfo.components;
     }
 
-    const { props, components, styled } = resop2(
-      { values: compiledValues, params: ownPropsAfterAuto.params },
-      ({ values, params }, breakpointIndex) => {
-        if (!renderableComponentDefinition.styles) {
-          return {};
-        }
+    const buildParams = {
+      values: compiledValues,
+      params: { ...ownPropsAfterAuto.params, $width, $widthAuto },
+      isEditing: !!compilationContext.isEditing,
+      devices: compilationContext.devices,
+      definition: renderableComponentDefinition,
+    };
 
-        const device = assertDefined(
-          compilationContext.devices.find(
-            (device) => device.id === breakpointIndex
-          ),
-          `Missing device "${breakpointIndex}"`
-        );
+    const { props, components } = compilationContext.builder.build(buildParams);
 
-        const stylesInput: NoCodeComponentStylesFunctionInput = {
-          values,
-          params: {
-            ...params,
-            $width: assertDefined(responsiveValueAt($width, breakpointIndex)),
-            $widthAuto: assertDefined(
-              responsiveValueAt($widthAuto, breakpointIndex)
-            ),
-          },
-          isEditing: !!compilationContext.isEditing,
-          device,
-          ...(componentDefinition!.id === "@easyblocks/rich-text-part"
-            ? { __COMPILATION_CONTEXT__: compilationContext }
-            : {}),
-        };
+    if (componentDefinition.id === "@easyblocks/rich-text") {
+      props.__textRoot = compilationContext.builder.buildTextRoot({
+        values: {
+          font: compiledValues.mainFont,
+          color: compiledValues.mainColor,
+          align: ownPropsAfterAuto.params.passedAlign ?? ownProps.values.align,
+        },
+        isEditing: !!compilationContext.isEditing,
+        devices: compilationContext.devices,
+        definition: renderableComponentDefinition,
+      });
+    }
 
-        return renderableComponentDefinition.styles(stylesInput);
-      },
-      compilationContext.devices,
-      renderableComponentDefinition
-    );
+    if (componentDefinition.id === "@easyblocks/rich-text-part") {
+      props.__textPart = compilationContext.builder.buildTextPart({
+        values: { font: compiledValues.font, color: compiledValues.color },
+        isEditing: !!compilationContext.isEditing,
+        devices: compilationContext.devices,
+        definition: renderableComponentDefinition,
+      });
+    }
+
+    // font and color
+    // if (
+    //   componentDefinition.id === "@easyblocks/rich-text" ||
+    //   componentDefinition.id === "@easyblocks/rich-text-part"
+    // ) {
+    //   const isPart = componentDefinition.id === "@easyblocks/rich-text-part";
+
+    //   const fontAndColorPseudoDefinition = {
+    //     id: "__fontAndColor__",
+    //     schema: [
+    //       {
+    //         prop: "font",
+    //         type: "font",
+    //       },
+    //       {
+    //         prop: "color",
+    //         type: "color",
+    //       },
+    //     ],
+    //   };
+
+    //   props.__fontAndColorArtifacts = buildFontAndColor({
+    //     values: isPart
+    //       ? { font: compiledValues.font, color: compiledValues.color }
+    //       : { font: compiledValues.mainFont, color: compiledValues.mainColor },
+    //     params: {},
+    //     isEditing: !!compilationContext.isEditing,
+    //     devices: compilationContext.devices,
+    //     definition: fontAndColorPseudoDefinition,
+    //   });
+
+    //   // console.log(`result for ${componentDefinition.id}`, fontAndColor);
+    // }
 
     validateStylesProps(props, componentDefinition);
 
     subcomponentsContextProps = components;
 
-    // Move all the boxes to _compiled
-    for (const key in styled) {
-      let styles: ScalarOrCollection<Record<string, any>> = styled[key];
-
-      if (Array.isArray(styles)) {
-        styles = styles.map((v) => {
-          return { ...v, __isBox: true };
-        });
-      } else {
-        styles = { ...styles, __isBox: true };
-      }
-
-      const schemaProp = componentDefinition.schema.find((x) => x.prop === key);
-
-      // Context props processed below
-      if (schemaProp) {
-        continue;
-      }
-
-      // If box
-
-      compiled.styled[key] = compileBoxes(styles, compilationContext);
-    }
-
     componentDefinition.schema.forEach((schemaProp: SchemaProp) => {
       if ("buildOnly" in schemaProp && schemaProp.buildOnly) {
         return;
@@ -1362,36 +1369,6 @@ function mapResponsiveFontToResponsiveFontSize(
   );
 }
 
-function addStylesHash(styles: Record<PropertyKey, any>) {
-  if ("__hash" in styles) {
-    delete styles["__hash"];
-  }
-
-  const hash = CryptoJS.SHA1(JSON.stringify(styles));
-  styles.__hash = hash.toString();
-  return styles;
-}
-
-function compileBoxes(
-  value: any,
-  compilationContext: CompilationContextType
-): any {
-  if (Array.isArray(value)) {
-    return value.map((x: any) => compileBoxes(x, compilationContext));
-  } else if (typeof value === "object" && value !== null) {
-    if (value.__isBox) {
-      return addStylesHash(compileBox(value, compilationContext.devices));
-    }
-
-    const ret: Record<string, any> = {};
-    for (const key in value) {
-      ret[key] = compileBoxes(value[key], compilationContext);
-    }
-    return ret;
-  }
-  return value;
-}
-
 function getDefaultFieldDefinition(
   schemaProp: SchemaProp,
   configPrefix: string,
diff --git a/packages/core/src/compiler/createCompilationContext.ts b/packages/core/src/compiler/createCompilationContext.ts
index a86b6dee..abbaf82a 100644
--- a/packages/core/src/compiler/createCompilationContext.ts
+++ b/packages/core/src/compiler/createCompilationContext.ts
@@ -1,5 +1,6 @@
 import { responsiveValueMap } from "../responsiveness";
 import { parseSpacing } from "../spacingToPx";
+import { stitchesBuilder } from "../stitches/stitches_build";
 import {
   Config,
   ConfigDeviceRange,
@@ -275,6 +276,7 @@ export function createCompilationContext(
     contextParams,
     locales: config.locales,
     rootComponent,
+    builder: config.builder ?? stitchesBuilder,
   };
 
   return compilationContext;
diff --git a/packages/core/src/compiler/types.ts b/packages/core/src/compiler/types.ts
index eb570050..b99de300 100644
--- a/packages/core/src/compiler/types.ts
+++ b/packages/core/src/compiler/types.ts
@@ -1,6 +1,7 @@
 import { PartialDeep, SetRequired } from "type-fest";
 import { Locale } from "../locales";
 import {
+  Builder,
   ComponentConfigBase,
   ComponentDefinitionShared,
   ContextParams,
@@ -58,6 +59,7 @@ export type CompilationContextType = {
   strict?: boolean;
   locales: Array<Locale>;
   rootComponent: NoCodeComponentDefinition;
+  builder: Builder;
 };
 
 export type EditableComponentToComponentConfig<
diff --git a/packages/core/src/components/Box/Box.tsx b/packages/core/src/components/Box/Box.tsx
deleted file mode 100644
index 7d2a7565..00000000
--- a/packages/core/src/components/Box/Box.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React, { useMemo } from "react";
-import { getBoxStyles } from "../../compiler/box";
-import { Devices } from "../../types";
-
-const boxStyles = {
-  boxSizing: "border-box",
-  minWidth: "0px",
-  margin: 0,
-  padding: 0,
-  border: 0,
-  listStyle: "none",
-};
-
-type BoxProps = {
-  __compiled: any;
-  __name?: string;
-  devices: Devices;
-  stitches: any;
-  [key: string]: any;
-};
-
-const Box = React.forwardRef<HTMLElement, BoxProps>((props, ref) => {
-  /**
-   * passedProps - the props given in component code like <MyBox data-id="abc" /> (data-id is in passedProps)
-   * restProps - the props given by Shopstory (like from actionWrapper)
-   *
-   * They are merged into "realProps".
-   *
-   * I know those names sucks, this needs to be cleaned up.
-   */
-
-  const { __compiled, __name, passedProps, devices, stitches, ...restProps } =
-    props;
-
-  const { __as, ...styles } = __compiled;
-  const realProps = { ...restProps, ...passedProps };
-
-  const { as, itemWrappers, className, ...restPassedProps } = realProps;
-
-  const { boxClassName, componentClassName } = useMemo(() => {
-    /**
-     * Why parse+stringify?
-     *
-     * Because if we remove them some nested objects in styles (like media queries etc) don't work (although they exist in the object).
-     * Why? My bet is this: Stitches uses CSSOM to inject styles. Maybe (for some weird reason, maybe even browser bug) if some part of the object is not in iframe scope but in parent window scope then it's somehow ignored? Absolutely no idea right now, happy this works.
-     */
-    const correctedStyles = getBoxStyles(
-      JSON.parse(JSON.stringify(styles)),
-      devices
-    );
-
-    const generateBoxClass = stitches.css(boxStyles);
-    const generateClassName = stitches.css(correctedStyles);
-
-    return {
-      boxClassName: generateBoxClass(),
-      componentClassName: generateClassName(),
-    };
-  }, [styles.__hash]);
-
-  return React.createElement(
-    as || __as || "div",
-    {
-      ref,
-      ...restPassedProps,
-      className: [boxClassName, componentClassName, className]
-        .filter(Boolean)
-        .join(" "),
-      "data-testid": __name,
-    },
-    props.children
-  );
-});
-
-export { Box };
diff --git a/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx b/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx
index e81f8232..17a29957 100644
--- a/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx
+++ b/packages/core/src/components/ComponentBuilder/ComponentBuilder.tsx
@@ -24,7 +24,6 @@ import {
   responsiveValueReduce,
   responsiveValueValues,
 } from "../../responsiveness";
-import { resop } from "../../responsiveness/resop";
 import {
   CompilationMetadata,
   CompiledComponentConfig,
@@ -42,41 +41,10 @@ import {
   NoCodeComponentProps,
   ResponsiveValue,
 } from "../../types";
-import { Box } from "../Box/Box";
+// import { Box } from "../Box/Box";
 import { useEasyblocksExternalData } from "../EasyblocksExternalDataProvider";
 import { useEasyblocksMetadata } from "../EasyblocksMetadataProvider";
-
-function buildBoxes(
-  compiled: any,
-  name: string,
-  actionWrappers: { [key: string]: any },
-  meta: any
-): any {
-  if (Array.isArray(compiled)) {
-    return compiled.map((x: any, index: number) =>
-      buildBoxes(x, `${name}.${index}`, actionWrappers, meta)
-    );
-  } else if (typeof compiled === "object" && compiled !== null) {
-    if (compiled.__isBox) {
-      const boxProps = {
-        __compiled: compiled,
-        __name: name,
-        devices: meta.vars.devices,
-        stitches: meta.stitches,
-      };
-
-      return <Box {...boxProps} />;
-    }
-
-    const ret: Record<string, any> = {};
-
-    for (const key in compiled) {
-      ret[key] = buildBoxes(compiled[key], key, actionWrappers, meta);
-    }
-    return ret;
-  }
-  return compiled;
-}
+// import { buildBoxes } from "../Box/Box";
 
 function getComponentDefinition(
   compiled: CompiledComponentConfig,
@@ -400,13 +368,52 @@ function ComponentBuilder(props: ComponentBuilderProps): ReactElement | null {
 
   const shopstoryCompiledConfig = compiled as CompiledShopstoryComponentConfig;
 
+  const transformedProps = meta.renderer.transformProps
+    ? meta.renderer.transformProps(shopstoryCompiledConfig.props, meta)
+    : shopstoryCompiledConfig.props;
+
+  const isRichText = componentDefinition.id === "@easyblocks/rich-text";
+  const isRichTextPart =
+    componentDefinition.id === "@easyblocks/rich-text-part";
+
+  if (isRichText) {
+    transformedProps.__textRootClasses = meta.renderer.generateClassNames(
+      shopstoryCompiledConfig.props.__textRoot,
+      meta
+    );
+  }
+
+  if (isRichTextPart) {
+    transformedProps.__textPartClasses = meta.renderer.generateClassNames(
+      shopstoryCompiledConfig.props.__textPart,
+      meta
+    );
+  }
+
+  // if (isRichText || isRichTextPart) {
+  //   const classNames = meta.generateClassNames(
+  //     shopstoryCompiledConfig.props.__fontAndColorArtifacts,
+  //     meta
+  //   );
+
+  //   transformedProps.__fontAndColorClassNames = classNames;
+  // }
+
+  // console.log('--');
+  // console.log('original props', shopstoryCompiledConfig.props);
+  // console.log('transformed props', transformedProps);
+
   // Shopstory component
-  const styled: { [key: string]: any } = buildBoxes(
-    shopstoryCompiledConfig.styled,
-    "",
-    {},
-    meta
-  );
+  // const styled: { [key: string]: any } = buildBoxes(
+  //   shopstoryCompiledConfig.props.__styled,
+  //   "",
+  //   {},
+  //   meta
+  // );
+
+  // console.log('styled', styled);
+
+  const childrenComponents: { [key: string]: any } = {};
 
   // Styled
   componentDefinition.schema.forEach((schemaProp) => {
@@ -417,7 +424,7 @@ function ComponentBuilder(props: ComponentBuilderProps): ReactElement | null {
       const compiledChildren =
         shopstoryCompiledConfig.components[schemaProp.prop];
 
-      styled[schemaProp.prop] = getCompiledSubcomponents(
+      childrenComponents[schemaProp.prop] = getCompiledSubcomponents(
         compiled._id,
         compiledChildren,
         contextProps,
@@ -434,8 +441,6 @@ function ComponentBuilder(props: ComponentBuilderProps): ReactElement | null {
   const { ref, __isSelected, ...restPassedProps } = allPassedProps || {};
 
   const runtime = {
-    stitches: meta.stitches,
-    resop: resop,
     devices: meta.vars.devices,
   };
 
@@ -448,6 +453,7 @@ function ComponentBuilder(props: ComponentBuilderProps): ReactElement | null {
   };
 
   const componentProps = {
+    ...transformedProps,
     ...restPassedProps,
     ...mapExternalProps(
       shopstoryCompiledConfig.props,
@@ -455,7 +461,7 @@ function ComponentBuilder(props: ComponentBuilderProps): ReactElement | null {
       componentDefinition,
       externalData
     ),
-    ...styled,
+    ...childrenComponents,
     __easyblocks: easyblocksProp,
   };
 
diff --git a/packages/core/src/components/Easyblocks.tsx b/packages/core/src/components/Easyblocks.tsx
index 9a31d6f8..e1582c8f 100644
--- a/packages/core/src/components/Easyblocks.tsx
+++ b/packages/core/src/components/Easyblocks.tsx
@@ -5,7 +5,7 @@ import { RichTextBlockElementClient } from "../compiler/builtins/$richText/$rich
 import { RichTextLineElementClient } from "../compiler/builtins/$richText/$richTextLineElement/$richTextLineElement.client";
 import { RichTextPartClient } from "../compiler/builtins/$richText/$richTextPart/$richTextPart.client";
 import { TextClient } from "../compiler/builtins/$text/$text.client";
-import { ExternalData, RenderableDocument } from "../types";
+import { ExternalData, RenderableDocument, Renderer } from "../types";
 import {
   ComponentBuilder,
   ComponentBuilderProps,
@@ -19,6 +19,7 @@ export type EasyblocksProps = {
   externalData?: ExternalData;
   components?: Record<string, React.ComponentType<any>>;
   componentOverrides?: ComponentOverrides;
+  renderer?: Renderer;
 };
 
 export type ComponentOverrides = Record<string, ReactElement>;
@@ -33,6 +34,30 @@ const builtinComponents: ComponentBuilderProps["components"] = {
   "EditableComponentBuilder.client": ComponentBuilder,
 };
 
+// cursor: !isEnabled ? "inherit" : "text",
+// "& *": {
+//   pointerEvents: isEnabled ? "auto" : "none",
+//   userSelect: isEnabled ? "auto" : "none",
+// },
+// "& *::selection": {
+//   backgroundColor: "#b4d5fe",
+// },
+// ...(isDecorationActive && {
+//   "& *::selection": {
+//     backgroundColor: "transparent",
+//   },
+//   "& *[data-easyblocks-rich-text-selection]": {
+//     backgroundColor: "#b4d5fe",
+//   },
+// }),
+// ...(isFallbackValueShown && {
+//   opacity: 0.5,
+// }),
+// // Remove any text decoration from slate nodes that are elements. We only need text decoration on text elements.
+// "[data-slate-node]": {
+//   textDecoration: "none",
+// },
+
 function Easyblocks({
   renderableDocument,
   externalData,
diff --git a/packages/core/src/components/EasyblocksMetadataProvider.tsx b/packages/core/src/components/EasyblocksMetadataProvider.tsx
index 50b35188..f159c0f3 100644
--- a/packages/core/src/components/EasyblocksMetadataProvider.tsx
+++ b/packages/core/src/components/EasyblocksMetadataProvider.tsx
@@ -1,33 +1,32 @@
 "use client";
 
-import { createStitches } from "@stitches/core";
 import React, { createContext, ReactNode, useContext } from "react";
-import { easyblocksStitchesInstances } from "./ssr";
-import { CompilationMetadata } from "../types";
+import { CompilationMetadata, Renderer } from "../types";
+import { stitchesRenderer } from "../stitches/stitches_runtime";
 
 const EasyblocksMetadataContext = createContext<
-  (CompilationMetadata & { stitches: any }) | undefined
+  | (CompilationMetadata & {
+      renderer: Renderer;
+    })
+  | undefined
 >(undefined);
 
 type EasyblocksMetadataProviderProps = {
   children: ReactNode;
   meta: CompilationMetadata;
+  renderer?: Renderer;
 };
 
 const EasyblocksMetadataProvider: React.FC<EasyblocksMetadataProviderProps> = ({
   meta,
   children,
+  renderer,
 }) => {
-  // Let's load stitches instance
-  if (easyblocksStitchesInstances.length === 0) {
-    easyblocksStitchesInstances.push(createStitches({}));
-  }
-
   return (
     <EasyblocksMetadataContext.Provider
       value={{
         ...meta,
-        stitches: easyblocksStitchesInstances[0],
+        renderer: renderer ?? stitchesRenderer,
       }}
     >
       {children}
diff --git a/packages/core/src/components/ssr.tsx b/packages/core/src/components/ssr.tsx
deleted file mode 100644
index c9a916f6..00000000
--- a/packages/core/src/components/ssr.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from "react";
-
-export const easyblocksStitchesInstances: any[] = [];
-
-export function easyblocksGetCssText() {
-  return easyblocksStitchesInstances
-    .map((stitches) => stitches.getCssText())
-    .join(" ");
-}
-
-export function easyblocksGetStyleTag() {
-  return (
-    <style
-      id="stitches"
-      dangerouslySetInnerHTML={{ __html: easyblocksGetCssText() }}
-    />
-  );
-}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index ce47f822..c5604e2c 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -11,7 +11,10 @@ export type {
   ComponentOverrides,
   EasyblocksProps,
 } from "./components/Easyblocks";
-export { easyblocksGetCssText, easyblocksGetStyleTag } from "./components/ssr";
+export {
+  easyblocksGetCssText,
+  easyblocksGetStyleTag,
+} from "./stitches/stitches_runtime";
 export { isNoCodeComponentOfType } from "./isNoCodeComponentOfType";
 export * from "./locales";
 export * from "./resourcesUtils";
diff --git a/packages/core/src/responsiveness/resop.ts b/packages/core/src/responsiveness/resop.ts
deleted file mode 100644
index 5c2c39aa..00000000
--- a/packages/core/src/responsiveness/resop.ts
+++ /dev/null
@@ -1,295 +0,0 @@
-import { Devices, ResponsiveValue, TrulyResponsiveValue } from "../types";
-
-type Values = { [key: string]: any };
-
-export function resop<
-  Input extends Record<string, ResponsiveValue<unknown>>,
-  ScalarResult extends Record<string, unknown>
->(
-  config: Input,
-  callback: (
-    scalarInput: Scalar<Input>,
-    breakpointIndex: string
-  ) => ScalarResult,
-  devices: Devices
-): Responsify<ScalarResult> {
-  // Decompose config into scalar configs
-  const scalarConfigs: Record<string, Scalar<Input>> = {};
-
-  devices.forEach((device) => {
-    scalarConfigs[device.id] = scalarizeConfig(config, device.id);
-  });
-
-  const scalarOutputs: Record<string, any> = {};
-
-  // run callback for scalar configs
-  devices.forEach((device) => {
-    scalarOutputs[device.id] = callback(scalarConfigs[device.id], device.id);
-  });
-
-  return squashCSSResults(scalarOutputs, devices);
-}
-
-function squashCSSResults(
-  scalarValues: { [key: string]: any },
-  devices: Devices,
-  disableNesting?: boolean
-): any {
-  // Let's check whether scalarValues represent object (for nesting) or a scalar value.
-  let objectsNum = 0;
-  let noObjectsNum = 0;
-  let arraysNum = 0;
-
-  for (const breakpointName in scalarValues) {
-    const val = scalarValues[breakpointName];
-
-    if (Array.isArray(val) && !disableNesting) {
-      arraysNum++;
-    } else if (
-      typeof val === "object" &&
-      val !== null &&
-      !Array.isArray(val) &&
-      !disableNesting
-    ) {
-      objectsNum++;
-    } else if (val !== null && val !== undefined) {
-      noObjectsNum++;
-    }
-  }
-
-  // Only one flag can be > 0!!! Otherwise breakpoints return incompatible types
-  if (
-    (objectsNum > 0 && (noObjectsNum > 0 || arraysNum > 0)) ||
-    (arraysNum > 0 && (noObjectsNum > 0 || objectsNum > 0)) ||
-    (noObjectsNum > 0 && (arraysNum > 0 || objectsNum > 0))
-  ) {
-    throw new Error(
-      "This shouldn't happen. Mismatched types for different breakpoints!!!"
-    );
-  }
-
-  if (arraysNum > 0) {
-    let biggestArrayLength = 0;
-
-    for (const breakpoint in scalarValues) {
-      biggestArrayLength = Math.max(
-        biggestArrayLength,
-        scalarValues[breakpoint].length
-      ); // {...allKeysObject, ...scalarValues[breakpoint]};
-    }
-
-    const ret: any[] = [];
-
-    for (let i = 0; i < biggestArrayLength; i++) {
-      const newScalarValues: { [key: string]: any } = {};
-
-      for (const breakpoint in scalarValues) {
-        let value: any = undefined;
-
-        if (scalarValues[breakpoint]) {
-          value = scalarValues[breakpoint][i];
-        }
-
-        newScalarValues[breakpoint] = value;
-      }
-
-      ret[i] = squashCSSResults(newScalarValues, devices);
-    }
-
-    return ret;
-  }
-
-  // If object -> recursion
-  if (objectsNum > 0) {
-    // allKeys is the object that has all the keys from all the scalar configs
-    let allKeysObject: { [key: string]: null } = {};
-
-    /**
-     * Scalar values are like:
-     *
-     * {
-     *    b1: { a: 10, b: 20 }
-     *    b2: { a: 100, c: 300 }
-     * }
-     */
-
-    for (const breakpoint in scalarValues) {
-      allKeysObject = { ...allKeysObject, ...scalarValues[breakpoint] };
-    }
-
-    // scalarValues.forEach(scalarConfig => {
-    //     allKeysObject = {...allKeysObject, ...scalarConfig};
-    // });
-
-    const allKeys = Object.keys(allKeysObject);
-    const ret: Values = {};
-
-    /**
-     * All keys are like: ['a', 'b', 'c']
-     *
-     * All used keys across all breakpoints
-     */
-
-    allKeys.forEach((key) => {
-      const newScalarValues: { [key: string]: any } = {};
-
-      for (const breakpoint in scalarValues) {
-        let value: any = undefined;
-
-        if (scalarValues[breakpoint]) {
-          value = scalarValues[breakpoint][key];
-        }
-
-        newScalarValues[breakpoint] = value;
-      }
-      /**
-       * newScalarValues values are like:
-       *
-       * For key 'a':
-       * {
-       *      b1: 10,
-       *      b2: 100
-       * }
-       *
-       * For key 'b':
-       * {
-       *     b1: 20,
-       *     b2: undefined
-       * }
-       *
-       */
-
-      /**
-       * For fonts we don't want nesting + recursion. We want entire object to be passed to results.
-       *
-       * Later, renderer must know how to render xfont property :)
-       *
-       * Otherwise, media query conflicts arise and bad values are set.
-       */
-      ret[key] = squashCSSResults(newScalarValues, devices, key === "xfont");
-    });
-
-    return ret;
-  }
-
-  // Here we are sure we have scalar value, not some object to be nested. We must do 2 things:
-  // - add "unset" instead of null / undefined
-  // - create ResponsiveValue and normalize
-
-  for (const key in scalarValues) {
-    if (scalarValues[key] === undefined || scalarValues[key] === null) {
-      scalarValues[key] = "unset";
-    }
-  }
-
-  // Values (non-objects -> no nesting)
-  return responsiveValueNormalize({ ...scalarValues, $res: true }, devices);
-}
-
-function responsiveValueForceGet<T>(
-  value: ResponsiveValue<T>,
-  deviceId: string
-): T {
-  if (isTrulyResponsiveValue(value)) {
-    if (value[deviceId] === undefined) {
-      const error = `You called responsiveValueForceGet with value ${JSON.stringify(
-        value
-      )} and deviceId: ${deviceId}. Value undefined.`;
-      throw new Error(error);
-    }
-    return value[deviceId] as T;
-  }
-  return value;
-}
-
-function isTrulyResponsiveValue<T>(
-  x: ResponsiveValue<T>
-): x is TrulyResponsiveValue<T> {
-  return (
-    typeof x === "object" &&
-    x !== null &&
-    !Array.isArray(x) &&
-    (x as TrulyResponsiveValue<T>).$res === true
-  );
-}
-
-function responsiveValueNormalize<T>(
-  arg: ResponsiveValue<T>,
-  devices: Devices
-): ResponsiveValue<T> {
-  if (!isTrulyResponsiveValue(arg)) {
-    return arg;
-  }
-
-  let previousVal: any = undefined;
-
-  const ret: TrulyResponsiveValue<any> = {
-    $res: true,
-  };
-
-  let numberOfDefinedValues = 0;
-
-  for (let i = devices.length - 1; i >= 0; i--) {
-    const breakpoint = devices[i].id;
-    const val = arg[breakpoint];
-
-    // TODO: if values are objects, it's to do
-    if (typeof val === "object" && val !== null) {
-      if (JSON.stringify(val) !== JSON.stringify(previousVal)) {
-        ret[breakpoint] = val;
-        previousVal = val;
-        numberOfDefinedValues++;
-      }
-    } else {
-      if (val !== undefined && val !== previousVal) {
-        ret[breakpoint] = val;
-        previousVal = val;
-        numberOfDefinedValues++;
-      }
-    }
-
-    // [x, null, null, y] => [x, y]
-    if (i < devices.length - 1) {
-      const nextBreakpoint = devices[i + 1].id;
-
-      if (
-        numberOfDefinedValues === 1 &&
-        ret[breakpoint] === undefined &&
-        ret[nextBreakpoint] !== undefined
-      ) {
-        ret[breakpoint] = ret[nextBreakpoint];
-        delete ret[nextBreakpoint];
-      }
-    }
-  }
-
-  if (numberOfDefinedValues === 1) {
-    return ret[devices[0].id];
-  }
-
-  return ret;
-}
-
-type UnwrapResponsiveValue<T> = T extends ResponsiveValue<infer Value>
-  ? Value
-  : never;
-
-type Scalar<Input extends Record<string, ResponsiveValue<unknown>>> = {
-  [key in keyof Input]: UnwrapResponsiveValue<Input[key]>;
-};
-
-type Responsify<T extends Record<string, unknown>> = {
-  [key in keyof T]: T[key] extends Record<string, unknown>
-    ? Responsify<T[key]>
-    : ResponsiveValue<T[key]>;
-};
-
-function scalarizeConfig(config: Values, breakpoint: string): any {
-  const ret: Record<string, any> = {};
-
-  for (const prop in config) {
-    ret[prop] = responsiveValueForceGet(config[prop], breakpoint);
-  }
-
-  return ret;
-}
diff --git a/packages/core/src/scalarizeConfig.ts b/packages/core/src/scalarizeConfig.ts
new file mode 100644
index 00000000..f83b1be5
--- /dev/null
+++ b/packages/core/src/scalarizeConfig.ts
@@ -0,0 +1,120 @@
+import {
+  isSchemaPropCollection,
+  isSchemaPropComponent,
+} from "./compiler/schema";
+import { responsiveValueForceGet } from "./responsiveness";
+import { Config, Devices, SchemaProp } from "./types";
+
+function scalarizeNonComponentProp(
+  value: any,
+  breakpoint: string,
+  schemaProp?: SchemaProp
+) {
+  if (schemaProp) {
+    // This function should never be called with component type
+    if (schemaProp.type.startsWith("component")) {
+      throw new Error("unreachable");
+    }
+
+    // Text values aren't responsive
+    if (schemaProp.type === "text") {
+      return value;
+    }
+
+    // other props are potentially responsive, so let's run responsiveValueGet
+    return responsiveValueForceGet(value, breakpoint);
+  }
+
+  // for context props we just treat them as responsive
+  return responsiveValueForceGet(value, breakpoint);
+}
+
+function scalarizeCollection(
+  configs: Config[],
+  breakpoint: string,
+  devices: Devices,
+  itemFieldsSchema: SchemaProp[]
+) {
+  return configs.map((child: any) => {
+    const scalarizedChild: Record<string, any> = { ...child };
+
+    for (const [key, value] of Object.entries(scalarizedChild)) {
+      const schemaProp = itemFieldsSchema.find((itemFieldSchemaProp) => {
+        return itemFieldSchemaProp.prop === key;
+      });
+
+      if (schemaProp) {
+        scalarizedChild[schemaProp.prop] = scalarizeNonComponentProp(
+          value,
+          breakpoint,
+          schemaProp
+        );
+      } else {
+        scalarizedChild[key] = scalarizeNonComponentProp(value, breakpoint);
+      }
+    }
+
+    return scalarizedChild;
+  });
+}
+
+export function scalarizeConfig(
+  config: Config,
+  breakpoint: string,
+  devices: Devices,
+  schema: SchemaProp[]
+): any {
+  const ret: Record<string, any> = {};
+
+  /**
+   * There is a bit of chaos here. To understand what is happening, we must know what "Config" is in context of resop.
+   *
+   * Config is not a "real" config we're using in the Shopstory in almost all places. We're dealing here with "intermediate compiled config" used during compilation. What it means:
+   * 1. It has _component, _id, etc.
+   * 2. All the props from schema that are *not* components are compiled and are available.
+   * 3. All the props from schema that are components have only _component and _id (exception below)
+   * 4. component-collections has child Configs that have item props that are also compiled and are added *to the root level of the config*. They're simply context props. (IMPORTANT! -> localised is already non-localised ;p)
+   * 5. context props from compilation are also added to the config.
+   *
+   * PROBLEM:
+   *
+   * As long as we know the component "own props" (we have schema) and item props, we have no idea about context props types. It means that we can only blindly apply responsiveValueGet on them.
+   *
+   * SOLUTION:
+   *
+   * context props should be typed. Each editable component should have schema of own props and of context props.
+   *
+   */
+  for (const prop in config) {
+    const schemaProp = schema.find((x) => x.prop === prop);
+
+    // If schemaProp is defined, it means "own prop". Otherwise it must be a context prop (they're not "typed" yet and we don't have any information what types of context props we have)
+    if (schemaProp) {
+      // subcomponents don't get scalarized
+      if (isSchemaPropComponent(schemaProp)) {
+        ret[prop] = config[prop];
+      }
+      // component collection should have item props scalarized. We know the types of item props!
+      // component collection localised is already dealing with value that is NON-LOCALISED (it was flattened earlier)
+      else if (isSchemaPropCollection(schemaProp)) {
+        ret[prop] = scalarizeCollection(
+          config[prop],
+          breakpoint,
+          devices,
+          schemaProp.itemFields || []
+        );
+      } else {
+        ret[prop] = scalarizeNonComponentProp(
+          config[prop],
+          breakpoint,
+          schemaProp
+        );
+      }
+    } else {
+      // context props automatically get scalarized
+      ret[prop] = scalarizeNonComponentProp(config[prop], breakpoint);
+    }
+  }
+
+  return ret;
+}
diff --git a/packages/core/src/compiler/box.ts b/packages/core/src/stitches/buildBox.ts
similarity index 57%
rename from packages/core/src/compiler/box.ts
rename to packages/core/src/stitches/buildBox.ts
index d34e08e3..2d43305a 100644
--- a/packages/core/src/compiler/box.ts
+++ b/packages/core/src/stitches/buildBox.ts
@@ -1,7 +1,6 @@
-import { DeviceRange, Devices } from "../types";
-import { flattenResponsiveStyles } from "./flattenResponsiveStyles";
+import { Devices } from "../types";
 
-function compileBox(input: { [key: string]: any }, devices: Devices) {
+export function buildBox(input: { [key: string]: any }, devices: Devices) {
   if (typeof input === "object" && input.$res) {
     const ret: { [key: string]: any } = {};
 
@@ -53,42 +52,10 @@ function compileBox(input: { [key: string]: any }, devices: Devices) {
         continue;
       }
 
-      ret[key] = compileBox(val, devices);
+      ret[key] = buildBox(val, devices);
     }
 
     return ret;
   }
   return input;
 }
-
-function getBoxStyles(styles: { [key: string]: any }, devices: Devices) {
-  const flattenStyles = flattenResponsiveStyles(styles);
-  const ret: Record<string, any> = {};
-
-  // First copy all the non-responsive values
-  for (const key in flattenStyles) {
-    if (!key.startsWith("@") && key !== "__isBox" && key !== "__hash") {
-      ret[key] = flattenStyles[key];
-    }
-  }
-
-  // now copy breakpoint values in correct order
-  for (let i = devices.length - 1; i >= 0; i--) {
-    const device = devices[i];
-    const breakpoint = device.id;
-
-    // correct order!
-    if (flattenStyles["@" + breakpoint]) {
-      const resolvedKey = resolveDeviceIdToMediaQuery(device);
-      ret[resolvedKey] = flattenStyles["@" + breakpoint];
-    }
-  }
-
-  return ret;
-}
-
-function resolveDeviceIdToMediaQuery(device: DeviceRange) {
-  return `@media (max-width: ${device.breakpoint! - 1}px)`;
-}
-
-export { compileBox, getBoxStyles };
diff --git a/packages/core/src/compiler/flattenResponsiveStyles.test.ts b/packages/core/src/stitches/flattenResponsiveStyles.test.ts
similarity index 100%
rename from packages/core/src/compiler/flattenResponsiveStyles.test.ts
rename to packages/core/src/stitches/flattenResponsiveStyles.test.ts
diff --git a/packages/core/src/compiler/flattenResponsiveStyles.ts b/packages/core/src/stitches/flattenResponsiveStyles.ts
similarity index 100%
rename from packages/core/src/compiler/flattenResponsiveStyles.ts
rename to packages/core/src/stitches/flattenResponsiveStyles.ts
diff --git a/packages/core/src/compiler/box.test.ts b/packages/core/src/stitches/getBoxStyles.test.ts
similarity index 92%
rename from packages/core/src/compiler/box.test.ts
rename to packages/core/src/stitches/getBoxStyles.test.ts
index 5f130cd8..7a2996d6 100644
--- a/packages/core/src/compiler/box.test.ts
+++ b/packages/core/src/stitches/getBoxStyles.test.ts
@@ -1,5 +1,5 @@
 import { testDevices } from "../testUtils";
-import { getBoxStyles } from "./box";
+import { getBoxStyles } from "./getBoxStyles";
 
 test("corrects order of non responsive and breakpoint properties (from highest breakpoint, to lowest)", () => {
   const styles = getBoxStyles(
diff --git a/packages/core/src/stitches/getBoxStyles.ts b/packages/core/src/stitches/getBoxStyles.ts
new file mode 100644
index 00000000..b50362a1
--- /dev/null
+++ b/packages/core/src/stitches/getBoxStyles.ts
@@ -0,0 +1,32 @@
+import { DeviceRange, Devices } from "../types";
+import { flattenResponsiveStyles } from "./flattenResponsiveStyles";
+
+export function getBoxStyles(styles: { [key: string]: any }, devices: Devices) {
+  const flattenStyles = flattenResponsiveStyles(styles);
+  const ret: Record<string, any> = {};
+
+  // First copy all the non-responsive values
+  for (const key in flattenStyles) {
+    if (!key.startsWith("@") && key !== "__isBox" && key !== "__hash") {
+      ret[key] = flattenStyles[key];
+    }
+  }
+
+  // now copy breakpoint values in correct order
+  for (let i = devices.length - 1; i >= 0; i--) {
+    const device = devices[i];
+    const breakpoint = device.id;
+
+    // correct order!
+    if (flattenStyles["@" + breakpoint]) {
+      const resolvedKey = resolveDeviceIdToMediaQuery(device);
+      ret[resolvedKey] = flattenStyles["@" + breakpoint];
+    }
+  }
+
+  return ret;
+}
+
+function resolveDeviceIdToMediaQuery(device: DeviceRange) {
+  return `@media (max-width: ${device.breakpoint! - 1}px)`;
+}
diff --git a/packages/core/src/compiler/resop.test.ts b/packages/core/src/stitches/resop.test.ts
similarity index 99%
rename from packages/core/src/compiler/resop.test.ts
rename to packages/core/src/stitches/resop.test.ts
index f6560531..22d00733 100644
--- a/packages/core/src/compiler/resop.test.ts
+++ b/packages/core/src/stitches/resop.test.ts
@@ -1,6 +1,6 @@
 import { Devices } from "@easyblocks/core";
 import { resop2 } from "./resop";
-import { InternalRenderableComponentDefinition } from "./types";
+import { InternalRenderableComponentDefinition } from "../compiler/types";
 import { ScalarOrCollection } from "../types";
 
 const devices: Devices = [
diff --git a/packages/core/src/compiler/resop.ts b/packages/core/src/stitches/resop.ts
similarity index 76%
rename from packages/core/src/compiler/resop.ts
rename to packages/core/src/stitches/resop.ts
index 19f7650a..8dda95c1 100644
--- a/packages/core/src/compiler/resop.ts
+++ b/packages/core/src/stitches/resop.ts
@@ -1,20 +1,16 @@
-import {
-  responsiveValueForceGet,
-  responsiveValueNormalize,
-} from "../responsiveness";
+import { responsiveValueNormalize } from "../responsiveness";
 import {
   Devices,
   NoCodeComponentStylesFunctionResult,
   ResponsiveValue,
-  SchemaProp,
   TrulyResponsiveValue,
 } from "../types";
 import {
   isSchemaPropCollection,
-  isSchemaPropComponent,
   isSchemaPropComponentOrComponentCollection,
-} from "./schema";
-import type { InternalComponentDefinition } from "./types";
+} from "../compiler/schema";
+import type { InternalComponentDefinition } from "../compiler/types";
+import { scalarizeConfig } from "../scalarizeConfig";
 
 type Config = { [key: string]: any };
 
@@ -177,120 +173,6 @@ function squashCSSResults(
   return responsiveValueNormalize({ ...scalarValues, $res: true }, devices);
 }
 
-function scalarizeNonComponentProp(
-  value: any,
-  breakpoint: string,
-  schemaProp?: SchemaProp
-) {
-  if (schemaProp) {
-    // This function should never be called with component type
-    if (schemaProp.type.startsWith("component")) {
-      throw new Error("unreachable");
-    }
-
-    // Text values aren't responsive
-    if (schemaProp.type === "text") {
-      return value;
-    }
-
-    // other props are potentially responsive, so let's run responsiveValueGet
-    return responsiveValueForceGet(value, breakpoint);
-  }
-
-  // for context props we just treat them as responsive
-  return responsiveValueForceGet(value, breakpoint);
-}
-
-function scalarizeCollection(
-  configs: Config[],
-  breakpoint: string,
-  devices: Devices,
-  itemFieldsSchema: SchemaProp[]
-) {
-  return configs.map((child: any) => {
-    const scalarizedChild: Record<string, any> = { ...child };
-
-    for (const [key, value] of Object.entries(scalarizedChild)) {
-      const schemaProp = itemFieldsSchema.find((itemFieldSchemaProp) => {
-        return itemFieldSchemaProp.prop === key;
-      });
-
-      if (schemaProp) {
-        scalarizedChild[schemaProp.prop] = scalarizeNonComponentProp(
-          value,
-          breakpoint,
-          schemaProp
-        );
-      } else {
-        scalarizedChild[key] = scalarizeNonComponentProp(value, breakpoint);
-      }
-    }
-
-    return scalarizedChild;
-  });
-}
-
-export function scalarizeConfig(
-  config: Config,
-  breakpoint: string,
-  devices: Devices,
-  schema: SchemaProp[]
-): any {
-  const ret: Record<string, any> = {};
-
-  /**
-   * There is a bit of chaos here. To understand what is happening, we must know what "Config" is in context of resop.
-   *
-   * Config is not a "real" config we're using in the Shopstory in almost all places. We're dealing here with "intermediate compiled config" used during compilation. What it means:
-   * 1. It has _component, _id, etc.
-   * 2. All the props from schema that are *not* components are compiled and are available.
-   * 3. All the props from schema that are components have only _component and _id (exception below)
-   * 4. component-collections has child Configs that have item props that are also compiled and are added *to the root level of the config*. They're simply context props. (IMPORTANT! -> localised is already non-localised ;p)
-   * 5. context props from compilation are also added to the config.
-   *
-   * PROBLEM:
-   *
-   * As long as we know the component "own props" (we have schema) and item props, we have no idea about context props types. It means that we can only blindly apply responsiveValueGet on them.
-   *
-   * SOLUTION:
-   *
-   * context props should be typed. Each editable component should have schema of own props and of context props.
-   *
-   */
-  for (const prop in config) {
-    const schemaProp = schema.find((x) => x.prop === prop);
-
-    // If schemaProp is defined, it means "own prop". Otherwise it must be a context prop (they're not "typed" yet and we don't have any information what types of context props we have)
-    if (schemaProp) {
-      // subcomponents don't get scalarized
-      if (isSchemaPropComponent(schemaProp)) {
-        ret[prop] = config[prop];
-      }
-      // component collection should have item props scalarized. We know the types of item props!
-      // component collection localised is already dealing with value that is NON-LOCALISED (it was flattened earlier)
-      else if (isSchemaPropCollection(schemaProp)) {
-        ret[prop] = scalarizeCollection(
-          config[prop],
-          breakpoint,
-          devices,
-          schemaProp.itemFields || []
-        );
-      } else {
-        ret[prop] = scalarizeNonComponentProp(
-          config[prop],
-          breakpoint,
-          schemaProp
-        );
-      }
-    } else {
-      // context props automatically get scalarized
-      ret[prop] = scalarizeNonComponentProp(config[prop], breakpoint);
-    }
-  }
-
-  return ret;
-}
-
 function getUndefinedBreakpoints(
   resVal: TrulyResponsiveValue<any>,
   devices: Devices
diff --git a/packages/core/src/stitches/stitches_build.ts b/packages/core/src/stitches/stitches_build.ts
new file mode 100644
index 00000000..589db5f9
--- /dev/null
+++ b/packages/core/src/stitches/stitches_build.ts
@@ -0,0 +1,162 @@
+import { assertDefined } from "@easyblocks/utils";
+import { InternalRenderableComponentDefinition } from "../_internals";
+import { resop2 } from "./resop";
+import {
+  Devices,
+  NoCodeComponentStylesFunctionInput,
+  ScalarOrCollection,
+  Builder,
+} from "../types";
+import { buildBox } from "./buildBox";
+import CryptoJS from "crypto-js";
+
+const DEFAULT_FONT_VALUES = {
+  fontWeight: "initial",
+  fontStyle: "initial",
+  lineHeight: "initial",
+};
+
+export function buildTextRoot(input: {
+  values: { font: Record<string, any>; color: string; align: string };
+  isEditing: boolean;
+  devices: Devices;
+  definition: InternalRenderableComponentDefinition;
+}) {
+  const result = build({
+    ...input,
+    params: {},
+    definition: {
+      ...input.definition,
+      styles: ({ values }) => {
+        return {
+          styled: {
+            Result: {
+              ...DEFAULT_FONT_VALUES,
+              ...values.font,
+              color: values.color,
+              textAlign: values.align,
+            },
+          },
+        };
+      },
+    },
+  });
+
+  return result.props.__styled.Result;
+}
+
+export function buildTextPart(input: {
+  values: { font: Record<string, any>; color: string };
+  isEditing: boolean;
+  devices: Devices;
+  definition: InternalRenderableComponentDefinition;
+}) {
+  const result = build({
+    ...input,
+    params: {},
+    definition: {
+      ...input.definition,
+      styles: ({ values }) => {
+        return {
+          styled: {
+            Result: {
+              ...DEFAULT_FONT_VALUES,
+              ...values.font,
+              color: values.color,
+            },
+          },
+        };
+      },
+    },
+  });
+
+  return result.props.__styled.Result;
+}
+
+export function build(input: {
+  values: any;
+  params: any;
+  isEditing: boolean;
+  devices: Devices;
+  definition: InternalRenderableComponentDefinition;
+}) {
+  const { values, params, devices, isEditing, definition } = input;
+
+  const { props, components, styled } = resop2(
+    { values, params },
+    ({ values, params }, breakpointIndex) => {
+      if (!definition.styles) {
+        return {};
+      }
+
+      const device = assertDefined(
+        devices.find((device) => device.id === breakpointIndex),
+        `Missing device "${breakpointIndex}"`
+      );
+
+      const stylesInput: NoCodeComponentStylesFunctionInput = {
+        values,
+        // @ts-ignore
+        params,
+        isEditing,
+        device,
+      };
+
+      return definition.styles(stylesInput);
+    },
+    devices,
+    definition
+  );
+
+  const styledCompiled: Record<string, any> = {};
+
+  for (const key in styled) {
+    let styles: ScalarOrCollection<Record<string, any>> = styled[key];
+
+    if (Array.isArray(styles)) {
+      styles = styles.map((v) => {
+        return { ...v, __isBox: true };
+      });
+    } else {
+      styles = { ...styles, __isBox: true };
+    }
+
+    // If box
+    styledCompiled[key] = buildBoxes(styles, devices);
+  }
+
+  return { props: { ...props, __styled: styledCompiled }, components };
+}
+
+function addStylesHash(styles: Record<PropertyKey, any>) {
+  if ("__hash" in styles) {
+    delete styles["__hash"];
+  }
+
+  const hash = CryptoJS.SHA1(JSON.stringify(styles));
+  styles.__hash = hash.toString();
+  return styles;
+}
+
+function buildBoxes(value: any, devices: Devices): any {
+  if (Array.isArray(value)) {
+    return value.map((x: any) => buildBoxes(x, devices));
+  } else if (typeof value === "object" && value !== null) {
+    if (value.__isBox) {
+      return addStylesHash(buildBox(value, devices));
+    }
+
+    const ret: Record<string, any> = {};
+    for (const key in value) {
+      ret[key] = buildBoxes(value[key], devices);
+    }
+    return ret;
+  }
+  return value;
+}
+
+export const stitchesBuilder: Builder = {
+  build,
+  buildTextRoot,
+  buildTextPart,
+};
diff --git a/packages/core/src/stitches/stitches_runtime.tsx b/packages/core/src/stitches/stitches_runtime.tsx
new file mode 100644
index 00000000..6d34e1fa
--- /dev/null
+++ b/packages/core/src/stitches/stitches_runtime.tsx
@@ -0,0 +1,155 @@
+import React, { useMemo } from "react";
+import { createStitches } from "@stitches/core";
+import { CompilationMetadata, Devices, Renderer } from "../types";
+import { getBoxStyles } from "./getBoxStyles";
+
+const boxStyles = {
+  boxSizing: "border-box",
+  minWidth: "0px",
+  margin: 0,
+  padding: 0,
+  border: 0,
+  listStyle: "none",
+};
+
+const easyblocksStitchesInstances: any[] = [];
+
+export function easyblocksGetCssText() {
+  return easyblocksStitchesInstances
+    .map((stitches) => stitches.getCssText())
+    .join(" ");
+}
+
+export function easyblocksGetStyleTag() {
+  return (
+    <style
+      id="stitches"
+      dangerouslySetInnerHTML={{ __html: easyblocksGetCssText() }}
+    />
+  );
+}
+
+export function getStitchesInstance() {
+  if (easyblocksStitchesInstances.length === 0) {
+    easyblocksStitchesInstances.push(createStitches({}));
+  }
+
+  return easyblocksStitchesInstances[0];
+}
+
+export function generateClassNamesArray(styles: any, devices: Devices) {
+  /**
+   * Why parse+stringify?
+   *
+   * Because if we remove them some nested objects in styles (like media queries etc) don't work (although they exist in the object).
+   * Why? My bet is this: Stitches uses CSSOM to inject styles. Maybe (for some weird reason, maybe even browser bug) if some part of the object is not in iframe scope but in parent window scope then it's somehow ignored? Absolutely no idea right now, happy this works.
+   */
+  const correctedStyles = getBoxStyles(
+    JSON.parse(JSON.stringify(styles)),
+    devices
+  );
+
+  const stitches = getStitchesInstance();
+
+  const generateBoxClass = stitches.css(boxStyles);
+  const generateClassName = stitches.css(correctedStyles);
+
+  return [generateBoxClass(), generateClassName()];
+}
+
+type BoxProps = {
+  __compiled: any;
+  __name?: string;
+  devices: Devices;
+  [key: string]: any;
+};
+
+const Box = React.forwardRef<HTMLElement, BoxProps>((props, ref) => {
+  /**
+   * passedProps - the props given in component code like <MyBox data-id="abc" /> (data-id is in passedProps)
+   * restProps - the props given by Shopstory (like from actionWrapper)
+   *
+   * They are merged into "realProps".
+   *
+   * I know those names sucks, this needs to be cleaned up.
+   */
+
+  const { __compiled, __name, passedProps, devices, ...restProps } = props;
+
+  const { __as, ...styles } = __compiled;
+  const realProps = { ...restProps, ...passedProps };
+
+  const { as, itemWrappers, className, ...restPassedProps } = realProps;
+
+  const classes = useMemo(() => {
+    return generateClassNamesArray(styles, devices);
+  }, [styles.__hash]);
+
+  return React.createElement(
+    as || __as || "div",
+    {
+      ref,
+      ...restPassedProps,
+      className: [...classes, className].filter(Boolean).join(" "),
+      "data-testid": __name,
+    },
+    props.children
+  );
+});
+
+export function buildBoxes(
+  compiled: any,
+  name: string,
+  actionWrappers: { [key: string]: any },
+  devices: Devices
+): any {
+  if (Array.isArray(compiled)) {
+    return compiled.map((x: any, index: number) =>
+      buildBoxes(x, `${name}.${index}`, actionWrappers, devices)
+    );
+  } else if (typeof compiled === "object" && compiled !== null) {
+    if (compiled.__isBox) {
+      const boxProps = {
+        __compiled: compiled,
+        __name: name,
+        devices,
+      };
+
+      return <Box {...boxProps} />;
+    }
+
+    const ret: Record<string, any> = {};
+
+    for (const key in compiled) {
+      ret[key] = buildBoxes(compiled[key], key, actionWrappers, devices);
+    }
+    return ret;
+  }
+  return compiled;
+}
+
+export function transformProps(
+  props: Record<string, any>,
+  meta: CompilationMetadata
+) {
+  const { __styled, ...originalProps } = props;
+
+  const newProps: { [key: string]: any } = buildBoxes(
+    props.__styled,
+    "",
+    {},
+    meta.vars.devices
+  );
+
+  return {
+    ...originalProps,
+    ...newProps,
+  };
+}
+
+export const stitchesRenderer: Renderer = {
+  transformProps,
+  generateClassNames: (styles: any, meta: CompilationMetadata) => {
+    return generateClassNamesArray(styles, meta.vars.devices).join(" ");
+  },
+};
diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts
index bdc43b1a..81bf703e 100644
--- a/packages/core/src/types.ts
+++ b/packages/core/src/types.ts
@@ -1,6 +1,7 @@
 import { ComponentType, ReactElement } from "react";
 import { PartialDeep } from "type-fest";
 import { Locale } from "./locales";
+import { InternalRenderableComponentDefinition } from "./_internals";
 
 export type ScalarOrCollection<T> = T | Array<T>;
 
@@ -536,6 +537,42 @@ export type Backend = {
   };
 };
 
+export type Renderer = {
+  generateClassNames: (input: any, meta: CompilationMetadata) => string;
+  transformProps?: (
+    input: Record<string, any>,
+    meta: CompilationMetadata
+  ) => Record<string, any>;
+};
+
+export type Builder = {
+  build: (input: {
+    values: Record<string, any>;
+    params: Record<string, any> & {
+      $width: TrulyResponsiveValue<number>;
+      $widthAuto: TrulyResponsiveValue<boolean>;
+    };
+    isEditing: boolean;
+    devices: Devices;
+    definition: InternalRenderableComponentDefinition;
+  }) => {
+    props: Record<string, any>;
+    components: Record<string, any>;
+  };
+  buildTextRoot: (input: {
+    values: { font: Record<string, any>; color: string; align: string };
+    isEditing: boolean;
+    devices: Devices;
+    definition: InternalRenderableComponentDefinition;
+  }) => any;
+  buildTextPart: (input: {
+    values: { font: Record<string, any>; color: string };
+    isEditing: boolean;
+    devices: Devices;
+    definition: InternalRenderableComponentDefinition;
+  }) => any;
+};
+
 /**
  * Config
  */
@@ -554,6 +591,7 @@ export type Config = {
   } & {
     [key: string & Record<never, never>]: Array<ConfigTokenValue<any>>;
   };
+  builder?: Builder;
 };
 
 export type SchemaPropShared<Type extends string> = {
diff --git a/packages/editor/src/EasyblocksEditor.tsx b/packages/editor/src/EasyblocksEditor.tsx
index be269fa8..cd0ffd98 100644
--- a/packages/editor/src/EasyblocksEditor.tsx
+++ b/packages/editor/src/EasyblocksEditor.tsx
@@ -66,7 +66,10 @@ export function EasyblocksEditor(props: EasyblocksEditorProps) {
       )}
 
       {selectedWindow === "child" && (
-        <EasyblocksCanvas components={props.components} />
+        <EasyblocksCanvas
+          components={props.components}
+          renderer={props.renderer}
+        />
       )}
 
       {selectedWindow === "preview" && <PreviewRenderer {...props} />}
diff --git a/packages/editor/src/EasyblocksEditorProps.ts b/packages/editor/src/EasyblocksEditorProps.ts
index 00c69611..21f24994 100644
--- a/packages/editor/src/EasyblocksEditorProps.ts
+++ b/packages/editor/src/EasyblocksEditorProps.ts
@@ -5,6 +5,7 @@ import {
   ExternalData,
   InlineTypeWidgetComponentProps,
   WidgetComponentProps,
+  Renderer,
 } from "@easyblocks/core";
 import React, { ComponentType } from "react";
 
@@ -23,6 +24,6 @@ export type EasyblocksEditorProps = {
     | ComponentType<WidgetComponentProps<any>>
     | ComponentType<InlineTypeWidgetComponentProps<any>>
   >;
-
+  renderer?: Renderer;
   __debug?: boolean;
 };
diff --git a/packages/editor/src/EditableComponentBuilder/BlockControls.tsx b/packages/editor/src/EditableComponentBuilder/BlockControls.tsx
index 20b90721..6958d34e 100644
--- a/packages/editor/src/EditableComponentBuilder/BlockControls.tsx
+++ b/packages/editor/src/EditableComponentBuilder/BlockControls.tsx
@@ -213,7 +213,6 @@ export function BlocksControls({
         isActive={isActive}
         isChildrenSelectionDisabled={!isActive && !isChildComponentActive}
         onSelect={focusOnBlock}
-        stitches={meta.stitches}
         sortable={sortable}
         id={id}
         direction={direction}
@@ -286,48 +285,17 @@ function DroppablePlaceholder({
 
   const isInsertingBefore = sortable.activeIndex > sortable.index;
 
-  const wrapperStyles = meta.stitches.css({
-    position: "absolute",
-    [position === "before" ? "top" : "bottom"]:
-      direction === "vertical" ? "-100%" : 0,
-    [position === "before" ? "left" : "right"]:
-      direction === "horizontal" ? "-100%" : 0,
-    height: "100%",
-    background: "transparent",
-    width: "100%",
-
-    "&::before": {
-      display: "block",
-      content: "''",
-      backgroundColor: Colors.blue50,
-      zIndex: 9999999,
-      position: "absolute",
-      opacity: 0,
-    },
-    "&[data-draggable-over=true]::before": {
-      opacity: 1,
-      ...(direction === "horizontal"
-        ? {
-            top: 0,
-            bottom: 0,
-            [isInsertingBefore ? "left" : "right"]: "0px",
-            height: "100%",
-            width: "4px",
-          }
-        : {
-            left: 0,
-            right: 0,
-            [isInsertingBefore ? "top" : "bottom"]: "0px",
-            width: "100%",
-            height: "4px",
-          }),
-    },
-  });
+  const positionClass = `${
+    position === "before" ? "positionBefore" : "positionAfter"
+  }${direction === "horizontal" ? "Horizontal" : "Vertical"}`;
+  const insertingClass = `${
+    isInsertingBefore ? "insertingBefore" : "insertingAfter"
+  }${direction === "horizontal" ? "Horizontal" : "Vertical"}`;
 
   return (
     <div
       data-draggable-over={sortable.isOver}
-      className={wrapperStyles().className}
+      className={`EasyblocksDroppablePlaceholder_Root EasyblocksDroppablePlaceholder_Root--${positionClass} EasyblocksDroppablePlaceholder_Root--${insertingClass}`}
       ref={sortable.setNodeRef}
       {...sortable.attributes}
       {...sortable.listeners}
diff --git a/packages/editor/src/EditableComponentBuilder/SelectionFrameController.tsx b/packages/editor/src/EditableComponentBuilder/SelectionFrameController.tsx
index ae912670..53cc9474 100644
--- a/packages/editor/src/EditableComponentBuilder/SelectionFrameController.tsx
+++ b/packages/editor/src/EditableComponentBuilder/SelectionFrameController.tsx
@@ -8,7 +8,6 @@ type SelectionFrameControllerProps = {
   isChildrenSelectionDisabled: boolean;
   onSelect: (event: MouseEvent<HTMLElement>) => void;
   children: ReactNode;
-  stitches: any;
   sortable: ReturnType<typeof useSortable>;
   id: string;
   direction: "horizontal" | "vertical";
@@ -20,7 +19,6 @@ function SelectionFrameController({
   isChildrenSelectionDisabled,
   children,
   onSelect,
-  stitches,
   sortable,
   id,
   direction,
@@ -35,78 +33,6 @@ function SelectionFrameController({
 
   const isInsertingBefore = sortable.activeIndex > sortable.index;
 
-  const wrapperClassName = stitches.css({
-    position: "relative",
-    display: "grid",
-
-    "&[data-children-selection-disabled=true] *": {
-      pointerEvents: "none !important",
-      userSelect: "none !important",
-    },
-
-    "&[data-draggable-active=false]::after": {
-      content: `''`,
-      boxSizing: "border-box",
-      display: "block",
-      position: "absolute",
-      left: 0,
-      top: 0,
-      width: "100%",
-      height: "100%",
-      border: "1px solid var(--tina-color-primary)",
-      opacity: 0,
-      pointerEvents: "none",
-      userSelect: "none",
-      transition: "all 100ms",
-      boxShadow: "var(--tina-shadow-big)",
-      zIndex: "var(--tina-z-index-2)",
-    },
-
-    "&[data-active=true]::after": {
-      opacity: 1,
-    },
-
-    "&:hover::after": {
-      opacity: 0.5,
-    },
-
-    "&[data-active=true]:hover::after": {
-      opacity: 1,
-    },
-
-    "&[data-draggable-over=true]::before": {
-      position: "absolute",
-      ...(direction === "horizontal"
-        ? {
-            top: 0,
-            bottom: 0,
-            [isInsertingBefore ? "left" : "right"]: "0px",
-            height: "100%",
-            width: "4px",
-          }
-        : {
-            left: 0,
-            right: 0,
-            [isInsertingBefore ? "top" : "bottom"]: "0px",
-            width: "100%",
-            height: "4px",
-          }),
-
-      display: "block",
-      content: "''",
-      backgroundColor: Colors.blue50,
-      zIndex: 9999999,
-    },
-
-    "&[data-draggable-active=true]": {
-      opacity: 0.5,
-    },
-
-    "&[data-draggable-dragging=true]": {
-      cursor: "grabbing",
-    },
-  });
-
   useEffect(() => {
     return () => {
       // If the the node of active element is not in the DOM anymore we want to deselect it to prevent showing
@@ -122,6 +48,10 @@ function SelectionFrameController({
     };
   });
 
+  const insertingClass = `${
+    isInsertingBefore ? "insertingBefore" : "insertingAfter"
+  }${direction === "horizontal" ? "Horizontal" : "Vertical"}`;
+
   return (
     <div
       data-active={isActive}
@@ -131,7 +61,7 @@ function SelectionFrameController({
       data-draggable-active={
         sortable.active !== null && sortable.active?.id === id
       }
-      className={wrapperClassName().className}
+      className={`EasyblocksSelectionFrameController_Root EasyblocksSelectionFrameController_Root--${insertingClass}`}
       ref={(node) => {
         setNode(node);
         sortable.setNodeRef(node);
diff --git a/packages/editor/src/EditorChildWindow.tsx b/packages/editor/src/EditorChildWindow.tsx
index 8b58a91b..605abc88 100644
--- a/packages/editor/src/EditorChildWindow.tsx
+++ b/packages/editor/src/EditorChildWindow.tsx
@@ -7,7 +7,7 @@ import {
   useSensor,
 } from "@dnd-kit/core";
 import { SortableContext } from "@dnd-kit/sortable";
-import { NoCodeComponentEntry, Easyblocks } from "@easyblocks/core";
+import { NoCodeComponentEntry, Easyblocks, Renderer } from "@easyblocks/core";
 import {
   EasyblocksMetadataProvider,
   EditorContextType,
@@ -22,6 +22,7 @@ import { z } from "zod";
 import { CanvasRoot } from "./CanvasRoot/CanvasRoot";
 import EditableComponentBuilder from "./EditableComponentBuilder/EditableComponentBuilder.editor";
 import TypePlaceholder from "./Placeholder";
+import { Colors, Fonts } from "@easyblocks/design-system";
 
 const dragDataSchema = z.object({
   path: z.string(),
@@ -43,10 +44,388 @@ function customCollisionDetection(args: Parameters<CollisionDetection>[0]) {
   return rectIntersection(args);
 }
 
+// border: `1px dashed ${Colors.blue50}`,
+// position: "relative",
+// width: `${width ? `${width}px` : "auto"}`,
+// height: "auto",
+// transition: "all 0.1s",
+
+function camelToDashed(camel: string) {
+  return camel.replace(/([A-Z])/g, "-$1").toLowerCase();
+}
+
+function stylesObjectToCSS(styles: Record<string, any>) {
+  const arr: string[] = [];
+
+  for (const key in styles) {
+    arr.push(`${camelToDashed(key)}: ${styles[key]};`);
+  }
+
+  return arr.join("\n");
+}
+
+const easyblocksStyles = `
+
+  /* vars */
+  .EasyblocksFont_Body {
+    ${stylesObjectToCSS(Fonts.body)}
+  }
+
+  /* InlineTextarea */
+
+  .EasyblocksInlineTextarea_Textarea {
+    width: 100%;
+    word-wrap: break-word;
+    display: block;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    box-sizing: border-box;
+    color: inherit;
+    letter-spacing: inherit;
+    line-height: inherit;
+    margin: 0 auto;
+    max-width: inherit;
+    text-transform: inherit;
+    background-color: inherit;
+    text-align: inherit;
+    outline: none;
+    resize: none;
+    border: none;
+    overflow: visible;
+    position: relative;
+    padding: 0;
+    -ms-overflow-style: none;
+    pointer-events: none;
+  }
+
+  .EasyblocksInlineTextarea_Textarea::-webkit-scrollbar {
+    display: none;
+  }
+
+  .EasyblocksInlineTextarea_Textarea--enabled {
+    pointer-events: auto;
+  }
+
+  /* RichText */
+
+  .EasyblocksRichTextEditor_Root {
+    cursor: inherit;
+  }
+
+  .EasyblocksRichTextEditor_Root--enabled {
+    cursor: text;
+  }
+
+  .EasyblocksRichTextEditor_Root--fallbackValue {
+    opacity: 0.5;
+  }
+
+  .EasyblocksRichTextEditor_Root [data-slate-node] {
+    text-decoration: none;
+  }
+
+  .EasyblocksRichTextEditor_Root * {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .EasyblocksRichTextEditor_Root--enabled * {
+    pointer-events: auto;
+    user-select: auto;
+  }
+
+  .EasyblocksRichTextEditor_Root * {
+    pointer-events: none;
+    user-select: none;
+  }
+
+  .EasyblocksRichTextEditor_Root *::selection {
+    background-color: #b4d5fe;
+  }
+
+  .EasyblocksRichTextEditor_Root--decorationActive *::selection {
+    background-color: transparent;
+  }
+
+  .EasyblocksRichTextEditor_Root--decorationActive *[data-easyblocks-rich-text-selection] {
+    background-color: #b4d5fe;
+  }
+
+  /* Placeholder */
+
+  .EasyblocksPlaceholder_Root {
+    border: 1px dashed ${Colors.blue50};
+    position: relative;
+    width: auto;
+    height: auto;
+    transition: all 0.1s;
+  }
+
+  .EasyblocksPlaceholder_Content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    color: ${Colors.blue50};
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+    ${stylesObjectToCSS(Fonts.body)}
+  }
+
+  .EasyblocksPlaceholder_Content:hover {
+    background-color: ${Colors.blue10};
+  }
+
+  .EasyblocksPlaceholder_Content[data-draggable-over=true] {
+    background-color: ${Colors.blue10};
+  }
+
+  .EasyblocksPlaceholder_Content[data-draggable-dragging=true] {
+    cursor: grabbing;
+  }
+
+  /* Droppable */
+  
+  .EasyblocksDroppablePlaceholder_Root {
+    position: absolute;
+    height: 100%;
+    width: 100%;
+    background: transparent;
+  }
+
+  .EasyblocksDroppablePlaceholder_Root--positionBeforeHorizontal {
+    top: 0;
+    left: -100%;
+  }
+
+  .EasyblocksDroppablePlaceholder_Root--positionAfterHorizontal {
+    bottom: 0;
+    right: -100%;
+  }
+
+  .EasyblocksDroppablePlaceholder_Root--positionBeforeVertical {
+    top: -100%;
+    left: 0;
+  }
+
+  .EasyblocksDroppablePlaceholder_Root--positionBeforeHorizontal {
+    bottom: -100%;
+    right: 0;
+  }
+
+  .EasyblocksDroppablePlaceholder_Root::before {
+    display: block;
+    content: '';
+    background-color: ${Colors.blue50};
+    z-index: 9999999;
+    position: absolute;
+    opacity: 0;
+  }
+
+  .EasyblocksDroppablePlaceholder_Root[data-draggable-over=true]::before {
+    opacity: 1;
+  }
+
+  .EasyblocksDroppablePlaceholder_Root--insertingBeforeHorizontal[data-draggable-over=true]::before {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 4px;
+  }
+
+  .EasyblocksDroppablePlaceholder_Root--insertingAfterHorizontal[data-draggable-over=true]::before {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 4px;
+  }
+
+  .EasyblocksDroppablePlaceholder_Root--insertingBeforeVertical[data-draggable-over=true]::before {
+    left: 0;
+    right: 0;
+    top: 0;
+    width: 100%;
+    height: 4px;
+  }
+
+  .EasyblocksDroppablePlaceholder_Root--insertingAfterVertical[data-draggable-over=true]::before {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 4px;
+  }
+
+  /** SelectionFrameController */
+
+  .EasyblocksSelectionFrameController_Root {
+    position: relative;
+    display: grid;
+  }
+
+  .EasyblocksSelectionFrameController_Root[data-children-selection-disabled=true] * {
+    pointer-events: none !important;
+    user-select: none !important;
+  }
+
+  .EasyblocksSelectionFrameController_Root[data-draggable-active=false]::after {
+    content: '';
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    border: 1px solid var(--tina-color-primary);
+    opacity: 0;
+    pointer-events: none;
+    user-select: none;
+    transition: all 100ms;
+    box-shadow: var(--tina-shadow-big);
+    z-index: var(--tina-z-index-2);
+  }
+
+  .EasyblocksSelectionFrameController_Root[data-active=true]::after {
+    opacity: 1;
+  }
+
+  .EasyblocksSelectionFrameController_Root:hover::after {
+    opacity: 0.5;
+  }
+
+  .EasyblocksSelectionFrameController_Root[data-active=true]:hover::after {
+    opacity: 1;
+  }
+
+  .EasyblocksSelectionFrameController_Root[data-draggable-active=true] {
+    cursor: grabbing;
+  }
+
+  .EasyblocksSelectionFrameController_Root[data-draggable-over=true]::before {
+    position: absolute;
+    display: block;
+    content: '';
+    background-color: ${Colors.blue50};
+    z-index: 9999999;
+  }
+
+  .EasyblocksSelectionFrameController_Root--insertingBeforeHorizontal[data-draggable-over=true]::before {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    height: 100%;
+    width: 4px;
+  }
+
+  .EasyblocksSelectionFrameController_Root--insertingAfterHorizontal[data-draggable-over=true]::before {
+    top: 0;
+    bottom: 0;
+    right: 0;
+    height: 100%;
+    width: 4px;
+  }
+
+  .EasyblocksSelectionFrameController_Root--insertingBeforeVertical[data-draggable-over=true]::before {
+    left: 0;
+    right: 0;
+    top: 0;
+    width: 100%;
+    height: 4px;
+  }
+
+  .EasyblocksSelectionFrameController_Root--insertingAfterVertical[data-draggable-over=true]::before {
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 4px;
+  }
+
+`;
+
+// position: "relative",
+//     display: "grid",
+
+//     "&[data-children-selection-disabled=true] *": {
+//       pointerEvents: "none !important",
+//       userSelect: "none !important",
+//     },
+
+//     "&[data-draggable-active=false]::after": {
+//       content: `''`,
+//       boxSizing: "border-box",
+//       display: "block",
+//       position: "absolute",
+//       left: 0,
+//       top: 0,
+//       width: "100%",
+//       height: "100%",
+//       border: "1px solid var(--tina-color-primary)",
+//       opacity: 0,
+//       pointerEvents: "none",
+//       userSelect: "none",
+//       transition: "all 100ms",
+//       boxShadow: "var(--tina-shadow-big)",
+//       zIndex: "var(--tina-z-index-2)",
+//     },
+
+//     "&[data-active=true]::after": {
+//       opacity: 1,
+//     },
+
+//     "&:hover::after": {
+//       opacity: 0.5,
+//     },
+
+//     "&[data-active=true]:hover::after": {
+//       opacity: 1,
+//     },
+
+//     "&[data-draggable-over=true]::before": {
+//       position: "absolute",
+//       ...(direction === "horizontal"
+//         ? {
+//             top: 0,
+//             bottom: 0,
+//             [isInsertingBefore ? "left" : "right"]: "0px",
+//             height: "100%",
+//             width: "4px",
+//           }
+//         : {
+//             left: 0,
+//             right: 0,
+//             [isInsertingBefore ? "top" : "bottom"]: "0px",
+//             width: "100%",
+//             height: "4px",
+//           }),
+
+//       display: "block",
+//       content: "''",
+//       backgroundColor: "red",//Colors.blue50,
+//       zIndex: 9999999,
+//     },
+
+//     "&[data-draggable-active=true]": {
+//       opacity: 0.5,
+//     },
+
+//     "&[data-draggable-dragging=true]": {
+//       cursor: "grabbing",
+//     },
+
 export function EasyblocksCanvas({
   components,
+  renderer,
 }: {
   components?: Record<string, React.ComponentType<any>>;
+  renderer?: Renderer;
 }) {
   const { meta, compiled, externalData, editorContext } =
     window.parent.editorWindowAPI;
@@ -88,7 +467,8 @@ export function EasyblocksCanvas({
 
   return (
     /* EasyblocksMetadataProvider must be defined in case of nested <Easyblocks /> components are used! */
-    <EasyblocksMetadataProvider meta={meta}>
+    <EasyblocksMetadataProvider meta={meta} renderer={renderer}>
+      <style dangerouslySetInnerHTML={{ __html: easyblocksStyles }} />
       <CanvasRoot>
         <DndContext
           sensors={[mouseSensor]}
diff --git a/packages/editor/src/Placeholder.tsx b/packages/editor/src/Placeholder.tsx
index 2645006a..6ea112be 100644
--- a/packages/editor/src/Placeholder.tsx
+++ b/packages/editor/src/Placeholder.tsx
@@ -15,7 +15,6 @@ type PlaceholderProps = {
 };
 
 function Placeholder(props: PlaceholderProps) {
-  const { stitches } = useEasyblocksMetadata();
   const styles: Record<string, any> = {};
 
   const { aspectRatio, width, height, label } = props.appearance;
@@ -26,40 +25,10 @@ function Placeholder(props: PlaceholderProps) {
     styles.paddingBottom = `${(1 / aspectRatio) * 100}%`;
   }
 
-  const rootClassName = stitches.css({
-    border: `1px dashed ${Colors.blue50}`,
-    position: "relative",
-    width: `${width ? `${width}px` : "auto"}`,
-    height: "auto",
-    transition: "all 0.1s",
-  });
-
-  const contentClassName = stitches.css({
-    position: "absolute",
-    top: 0,
-    left: 0,
-    width: "100%",
-    height: "100%",
-    display: "flex",
-    color: Colors.blue50,
-    justifyContent: "center",
-    alignItems: "center",
-    cursor: "pointer",
-    ...Fonts.body,
-    "&:hover": {
-      backgroundColor: Colors.blue10,
-    },
-    "&[data-draggable-over=true]": {
-      backgroundColor: Colors.blue10,
-    },
-    "&[data-draggable-dragging=true]": {
-      cursor: "grabbing",
-    },
-  });
-
   const content = (
     <div
-      className={contentClassName()}
+      style={{ width: `${width ? `${width}px` : undefined}` }}
+      className={"EasyblocksPlaceholder_Content"}
       onClick={(event) => {
         event.stopPropagation();
         props.onClick();
@@ -88,7 +57,7 @@ function Placeholder(props: PlaceholderProps) {
 
   return (
     <div
-      className={rootClassName()}
+      className={"EasyblocksPlaceholder_Root"}
       ref={props.sortable.setDroppableNodeRef}
       {...props.sortable.attributes}
       {...props.sortable.listeners}