diff --git a/documentation/src/components/browser-window/index.tsx b/documentation/src/components/browser-window/index.tsx
index 886e97916d9b..e52ab5386e7a 100644
--- a/documentation/src/components/browser-window/index.tsx
+++ b/documentation/src/components/browser-window/index.tsx
@@ -26,7 +26,14 @@ export default function BrowserWindow({
   hasBottom = false,
 }: Props): JSX.Element {
   return (
-    <div className={clsx("flex", "flex-col", "h-full")}>
+    <div
+      className={clsx(
+        "refine-live-preview-browser-window",
+        "flex",
+        "flex-col",
+        "h-full",
+      )}
+    >
       <div
         className={clsx(
           "flex-shrink-0",
diff --git a/documentation/src/components/codesandbox-example/index.tsx b/documentation/src/components/codesandbox-example/index.tsx
index e21252dfbdde..8ca0841a2a67 100644
--- a/documentation/src/components/codesandbox-example/index.tsx
+++ b/documentation/src/components/codesandbox-example/index.tsx
@@ -21,7 +21,7 @@ const CodeSandboxExample: React.FC<Props> = ({
   const EDITOR_URL = `${CODESANDBOX_URL}?view=preview&theme=dark&runonclick=1&codemirror=1`;
 
   return (
-    <div>
+    <div className="refine-codesandbox-example">
       {!hideSource && <ExampleSourcePrompt path={path} />}
       {!hideLocal && <ExampleLocalPrompt path={path} />}
       {!hideSandbox && (
diff --git a/documentation/src/components/live-preview/index.tsx b/documentation/src/components/live-preview/index.tsx
index ca0323347ecc..821467dc6da7 100644
--- a/documentation/src/components/live-preview/index.tsx
+++ b/documentation/src/components/live-preview/index.tsx
@@ -144,6 +144,7 @@ function Editor({ hidden, code }: { hidden: boolean; code: string }) {
       <button
         type="button"
         className={clsx(
+          "refine-live-preview-editor-toggle-button",
           "w-full",
           "focus:outline-none",
           "appearance-none",
@@ -265,7 +266,14 @@ const LivePreviewBase = ({
   const { isLast } = useDocsVersion();
 
   return (
-    <div className={clsx("overflow-hidden", "mb-6", "refine-wider-container")}>
+    <div
+      className={clsx(
+        "refine-live-preview",
+        "overflow-hidden",
+        "mb-6",
+        "refine-wider-container",
+      )}
+    >
       <>
         <BrowserWindow url={url} hasBottom={!previewOnly}>
           <div
diff --git a/documentation/src/components/sandpack/index.tsx b/documentation/src/components/sandpack/index.tsx
index 1d9225e160b5..7bd78bfb8af9 100644
--- a/documentation/src/components/sandpack/index.tsx
+++ b/documentation/src/components/sandpack/index.tsx
@@ -27,6 +27,7 @@ import { DragHandle } from "./drag-handle";
 import { useResizable } from "./use-resizable";
 
 type Props = React.ComponentProps<SandpackInternal> & {
+  files: SandpackFiles;
   startRoute?: string;
   showOpenInCodeSandbox?: boolean;
   showNavigator?: boolean;
@@ -204,7 +205,9 @@ const SandpackBase = ({
 
   return (
     <>
-      <div className={clsx("pb-6", wrapperClassName)}>
+      <div
+        className={clsx("pb-6", "refine-sandpack-wrapper", wrapperClassName)}
+      >
         <div
           className={clsx(
             "absolute",
@@ -387,25 +390,50 @@ const SandpackBase = ({
         />
         <div className={clsx(showConsole ? "block" : "hidden", "h-[200px]")} />
       </div>
-      <section className="hidden max-w-0 max-h-0">
-        <h6>Code Example</h6>
-        <p>{`Dependencies: ${Object.keys(dependencies ?? {}).map(
-          (k) => `${k}@${dependencies[k]}`,
-        )}`}</p>
-        <div>{"Code Files"}</div>
-        {Object.keys(files ?? {}).map((f) => (
-          <div key={f}>
-            <div>{`File: ${f}`}</div>
-            <pre>
-              {`Content: ${"code" in files[f] ? files[f].code : files[f]}`}
-            </pre>
-          </div>
-        ))}
-      </section>
+      <SandpackHiddenSnapshot files={files} dependencies={dependencies} />
     </>
   );
 };
 
+const SandpackHiddenSnapshot = ({
+  files,
+  dependencies,
+}: { files: SandpackFiles; dependencies: Record<string, string> }) => {
+  const dependencyList = (
+    <p>{`Dependencies: ${Object.keys(dependencies ?? {})
+      .map((k) => `${k}@${dependencies[k]}`)
+      .join(", ")}`}</p>
+  );
+
+  const visibleFiles = Object.keys(files ?? {}).filter(
+    (f) =>
+      typeof files[f] === "string" ||
+      (typeof files[f] === "object" && files[f].hidden !== true),
+  );
+
+  return (
+    <section className="hidden max-w-0 max-h-0">
+      <h6>Code Example</h6>
+      {/* {dependencyList} */}
+      <div>{"Code Files"}</div>
+      {visibleFiles.map((f) => (
+        <div key={f}>
+          <div>{`File: ${f}`}</div>
+          <div>Content:</div>
+          <pre>{getFileContent(files[f])}</pre>
+        </div>
+      ))}
+    </section>
+  );
+};
+
+const getFileContent = (file: SandpackFiles[string]) => {
+  if (typeof file === "string") {
+    return file;
+  }
+  return "code" in file ? file.code : "";
+};
+
 const SandpackNextJS = (props: Props) => {
   const isDevelop = process.env.NODE_ENV === "development";
 
diff --git a/documentation/src/components/tooltip/index.tsx b/documentation/src/components/tooltip/index.tsx
index 91b8c60e30b1..a7006c268909 100644
--- a/documentation/src/components/tooltip/index.tsx
+++ b/documentation/src/components/tooltip/index.tsx
@@ -9,10 +9,10 @@ const Tooltip: FC<PropsWithChildren<Props>> = ({ label, children }) => {
   if (!label) return <>{children}</>;
 
   return (
-    <div className={`${styles.tooltip} group/prop-tooltip`}>
+    <div className={`refine-tooltip ${styles.tooltip} group/prop-tooltip`}>
       {children}
       <div
-        className={`${styles.tooltipContainer} group-hover/prop-tooltip:visible`}
+        className={`refine-tooltip-content ${styles.tooltipContainer} group-hover/prop-tooltip:visible`}
       >
         <span className={styles.tooltipContent}>{label}</span>
         <div className={styles.tooltipArrow} />
diff --git a/documentation/src/refine-theme/common-copy-button.tsx b/documentation/src/refine-theme/common-copy-button.tsx
index bc5851ad8d7f..db8617150ae4 100644
--- a/documentation/src/refine-theme/common-copy-button.tsx
+++ b/documentation/src/refine-theme/common-copy-button.tsx
@@ -25,6 +25,7 @@ export const CommonCopyButton = ({ code, className }) => {
       aria-label={isCopied ? "Copied!" : "Copy code to clipboard"}
       title={"Copy code to clipboard"}
       className={clsx(
+        "refine-code-block-copy-button",
         "w-6 h-6",
         "flex justify-center items-center",
         "bg-gray-200",
diff --git a/documentation/src/refine-theme/common-wordwrap-button.tsx b/documentation/src/refine-theme/common-wordwrap-button.tsx
index 60717a08e93b..24747369498e 100644
--- a/documentation/src/refine-theme/common-wordwrap-button.tsx
+++ b/documentation/src/refine-theme/common-wordwrap-button.tsx
@@ -11,6 +11,7 @@ export const CommonWordWrapButton = ({ onClick, isEnabled }) => {
       type="button"
       onClick={() => onClick()}
       className={clsx(
+        "refine-code-block-word-wrap-button",
         "w-6 h-6",
         "flex justify-center items-center",
         "bg-gray-200",
diff --git a/documentation/src/refine-theme/doc-thumbs-up-down-feedback-widget.tsx b/documentation/src/refine-theme/doc-thumbs-up-down-feedback-widget.tsx
index 4be4eb1c63aa..cad2e38cbd42 100644
--- a/documentation/src/refine-theme/doc-thumbs-up-down-feedback-widget.tsx
+++ b/documentation/src/refine-theme/doc-thumbs-up-down-feedback-widget.tsx
@@ -89,6 +89,7 @@ export const DocThumbsUpDownFeedbackWidget = (
       {props.children}
       <div
         className={clsx(
+          "refine-feedback-widget",
           "relative",
           "z-popover",
           "hidden md:flex",