diff --git a/blocks/account.ts b/blocks/account.ts
index 8f69bbfca..a725fe17f 100644
--- a/blocks/account.ts
+++ b/blocks/account.ts
@@ -1,5 +1,5 @@
 // deno-lint-ignore-file no-explicit-any
-import JsonViewer from "../components/JsonViewer.tsx";
+import JsonViewer from "../components/JsonViewer.ts";
 import type { Block, BlockModule, InstanceOf } from "../engine/block.ts";
 
 // deno-lint-ignore no-empty-interface
diff --git a/blocks/action.ts b/blocks/action.ts
index beb03db2d..afe770d28 100644
--- a/blocks/action.ts
+++ b/blocks/action.ts
@@ -1,7 +1,7 @@
 // deno-lint-ignore-file no-explicit-any
-import { applyProps, type FnProps } from "../blocks/utils.tsx";
-import JsonViewer from "../components/JsonViewer.tsx";
+import JsonViewer from "../components/JsonViewer.ts";
 import type { Block, BlockModule, InstanceOf } from "../engine/block.ts";
+import { applyProps, type FnProps } from "./utils.ts";
 
 export type Action = InstanceOf<typeof actionBlock, "#/root/actions">;
 
diff --git a/blocks/app.ts b/blocks/app.ts
index 6a3e7f7fd..e6deb74d6 100644
--- a/blocks/app.ts
+++ b/blocks/app.ts
@@ -2,11 +2,6 @@
 import blocks from "../blocks/index.ts";
 import { propsLoader } from "../blocks/propsLoader.ts";
 import type { SectionModule } from "../blocks/section.ts";
-import {
-  type AppHttpContext,
-  buildImportMap,
-  type FnProps,
-} from "../blocks/utils.tsx";
 import type { Block, BlockModule, InstanceOf } from "../engine/block.ts";
 import type {
   BaseContext,
@@ -23,7 +18,12 @@ import type {
 import type { DecoManifest, FnContext } from "../types.ts";
 import { resolversFrom } from "./appsUtil.ts";
 import { isInvokeCtx } from "./loader.ts";
-import { fnContextFromHttpContext } from "./utils.tsx";
+import {
+  type AppHttpContext,
+  buildImportMap,
+  fnContextFromHttpContext,
+  type FnProps,
+} from "./utils.ts";
 
 export type Apps = InstanceOf<AppRuntime, "#/root/apps">;
 export type AppManifest = Omit<DecoManifest, "islands" | "routes">;
diff --git a/blocks/appsUtil.ts b/blocks/appsUtil.ts
index db73d103f..44c2ab004 100644
--- a/blocks/appsUtil.ts
+++ b/blocks/appsUtil.ts
@@ -13,7 +13,7 @@ import {
 import type { DanglingRecover } from "../engine/manifest/manifest.ts";
 import { compose, type ResolverMiddleware } from "../engine/middleware.ts";
 import type { AppManifest } from "../types.ts";
-import { usePreviewFunc } from "./utils.tsx";
+import { usePreviewFunc } from "./utils.ts";
 
 const resolverIsBlock = (blk: Block) => (resolver: string) => {
   const splitted = resolver.split("/");
diff --git a/blocks/flag.ts b/blocks/flag.ts
index 17d02915a..3b2d3f92c 100644
--- a/blocks/flag.ts
+++ b/blocks/flag.ts
@@ -1,6 +1,6 @@
 import type { HttpContext } from "../blocks/handler.ts";
 import type { Matcher } from "../blocks/matcher.ts";
-import JsonViewer from "../components/JsonViewer.tsx";
+import JsonViewer from "../components/JsonViewer.ts";
 import type { TsType, TsTypeReference } from "../deps.ts";
 import type { Block, BlockModule, InstanceOf } from "../engine/block.ts";
 import { isDeferred } from "../engine/core/resolver.ts";
diff --git a/blocks/function.ts b/blocks/function.ts
index 888845f2f..ad9cf1b5c 100644
--- a/blocks/function.ts
+++ b/blocks/function.ts
@@ -4,8 +4,8 @@ import { wrapCaughtErrors } from "../blocks/loader.ts";
 import {
   newSingleFlightGroup,
   type SingleFlightKeyFunc,
-} from "../blocks/utils.tsx";
-import JsonViewer from "../components/JsonViewer.tsx";
+} from "../blocks/utils.ts";
+import JsonViewer from "../components/JsonViewer.ts";
 import type { Block, BlockModule } from "../engine/block.ts";
 import type { HandlerContext } from "../engine/manifest/manifest.ts";
 import type { DecoState, LoaderFunction } from "../types.ts";
diff --git a/blocks/handler.ts b/blocks/handler.ts
index c34625037..27f521951 100644
--- a/blocks/handler.ts
+++ b/blocks/handler.ts
@@ -8,7 +8,7 @@ import {
   type FnContext,
   fnContextFromHttpContext,
   type RequestState,
-} from "./utils.tsx";
+} from "./utils.ts";
 
 export interface HttpContext<
   // deno-lint-ignore ban-types
diff --git a/blocks/index.ts b/blocks/index.ts
index 0476350c5..b60573c58 100644
--- a/blocks/index.ts
+++ b/blocks/index.ts
@@ -9,7 +9,7 @@ import matcherBlock from "../blocks/matcher.ts";
 import sectionBlock from "../blocks/section.ts";
 import workflowBlock from "../blocks/workflow.ts";
 import type { Block } from "../engine/block.ts";
-import pageBlock from "./page.tsx";
+import pageBlock from "./page.ts";
 
 const userDefinedBlocks: Block[] = [];
 
diff --git a/blocks/loader.ts b/blocks/loader.ts
index 1fb2272c1..5b887ec49 100644
--- a/blocks/loader.ts
+++ b/blocks/loader.ts
@@ -1,5 +1,5 @@
 // deno-lint-ignore-file no-explicit-any
-import JsonViewer from "../components/JsonViewer.tsx";
+import JsonViewer from "../components/JsonViewer.ts";
 import { RequestContext } from "../deco.ts";
 import { ValueType, weakcache } from "../deps.ts";
 import type { Block, BlockModule, InstanceOf } from "../engine/block.ts";
@@ -18,7 +18,7 @@ import {
   type FnProps,
   type RequestState,
   type SingleFlightKeyFunc,
-} from "./utils.tsx";
+} from "./utils.ts";
 
 export type Loader = InstanceOf<typeof loaderBlock, "#/root/loaders">;
 
diff --git a/blocks/matcher.ts b/blocks/matcher.ts
index 315dc1e52..b8148ad1c 100644
--- a/blocks/matcher.ts
+++ b/blocks/matcher.ts
@@ -2,7 +2,7 @@ import type { HttpContext } from "../blocks/handler.ts";
 import { getCookies, Murmurhash3, setCookie } from "../deps.ts";
 import type { Block, BlockModule, InstanceOf } from "../engine/block.ts";
 import type { Device } from "../utils/userAgent.ts";
-import type { RequestState } from "./utils.tsx";
+import type { RequestState } from "./utils.ts";
 
 export type Matcher = InstanceOf<typeof matcherBlock, "#/root/matchers">;
 
diff --git a/blocks/mod.ts b/blocks/mod.ts
index 58149a577..b30e2846a 100644
--- a/blocks/mod.ts
+++ b/blocks/mod.ts
@@ -1,8 +1,7 @@
 export type { WorkflowGen } from "@deco/durable";
 export {
-  type SectionContext,
-  SectionContext as SectionCtx,
-} from "../components/section.tsx";
+  SectionContext as SectionCtx, type SectionContext
+} from "../components/section.ts";
 export type { ComponentFunc, ComponentMetadata } from "../engine/block.ts";
 export type { Resolvable } from "../engine/core/resolver.ts";
 export type { Accounts } from "./account.ts";
@@ -12,21 +11,22 @@ export type {
   AppMiddlewareContext,
   Apps,
   ImportMap,
-  ManifestOf,
+  ManifestOf
 } from "./app.ts";
 export type { Flag, FlagObj, MultivariateFlag, Variant } from "./flag.ts";
 export type { Handler } from "./handler.ts";
 export { default as blocks, defineBlock } from "./index.ts";
 export type { Loader } from "./loader.ts";
 export type { MatchContext, Matcher } from "./matcher.ts";
-export type { Page } from "./page.tsx";
+export type { Page } from "./page.ts";
 export { isSection, type Section } from "./section.ts";
 export {
   applyProps,
   buildImportMap,
   buildImportMapWith,
-  createBagKey,
-} from "./utils.tsx";
-export type { FnProps } from "./utils.tsx";
+  createBagKey
+} from "./utils.ts";
+export type { FnProps } from "./utils.ts";
 export { WorkflowContext } from "./workflow.ts";
 export type { Workflow, WorkflowFn } from "./workflow.ts";
+
diff --git a/blocks/page.tsx b/blocks/page.ts
similarity index 89%
rename from blocks/page.tsx
rename to blocks/page.ts
index 41c33d009..b674ea4ea 100644
--- a/blocks/page.tsx
+++ b/blocks/page.ts
@@ -1,7 +1,5 @@
 // deno-lint-ignore-file no-explicit-any
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
+import { jsx as _jsx } from "preact/jsx-runtime";
 import type { Block, InstanceOf, ResolverLike } from "../engine/block.ts";
 import { createSectionBlock, type SectionModule } from "./section.ts";
 
@@ -27,7 +25,10 @@ const page: Block<
   any
 > = createSectionBlock(
   (component, ComponentFunc) => (props, { resolveChain }) => ({
-    Component: (p) => <ComponentFunc {...p} />,
+    Component: (p) =>
+      /*#__PURE__*/ _jsx(ComponentFunc, {
+        ...p,
+      }),
     props,
     metadata: { resolveChain, component },
   }),
diff --git a/blocks/propsLoader.ts b/blocks/propsLoader.ts
index e98105712..4fe528c52 100644
--- a/blocks/propsLoader.ts
+++ b/blocks/propsLoader.ts
@@ -1,5 +1,5 @@
 // deno-lint-ignore-file no-explicit-any
-import type { FnProps } from "../blocks/utils.tsx";
+import type { FnProps } from "../blocks/utils.ts";
 import type {
   Diff,
   Intersection,
diff --git a/blocks/section.ts b/blocks/section.ts
index 7f655e78c..b1b264679 100644
--- a/blocks/section.ts
+++ b/blocks/section.ts
@@ -3,12 +3,8 @@ import type { ComponentType, JSX } from "preact";
 import type { AppManifest } from "../blocks/app.ts";
 import type { HttpContext } from "../blocks/handler.ts";
 import { type PropsLoader, propsLoader } from "../blocks/propsLoader.ts";
-import {
-  fnContextFromHttpContext,
-  type RequestState,
-} from "../blocks/utils.tsx";
-import StubSection, { Empty } from "../components/StubSection.tsx";
-import { alwaysThrow, withSection } from "../components/section.tsx";
+import StubSection, { Empty } from "../components/StubSection.ts";
+import { alwaysThrow, withSection } from "../components/section.ts";
 import { Context } from "../deco.ts";
 import type { DeepPartial } from "../deps.ts";
 import type {
@@ -20,6 +16,7 @@ import type {
 } from "../engine/block.ts";
 import type { Resolver } from "../engine/core/resolver.ts";
 import { HttpError } from "../engine/errors.ts";
+import { fnContextFromHttpContext, type RequestState } from "./utils.ts";
 
 /**
  * @widget none
diff --git a/blocks/utils.tsx b/blocks/utils.ts
similarity index 96%
rename from blocks/utils.tsx
rename to blocks/utils.ts
index 89e8c2ade..26ff08e80 100644
--- a/blocks/utils.tsx
+++ b/blocks/utils.ts
@@ -1,13 +1,8 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
 // deno-lint-ignore-file no-explicit-any
 import type { StatusCode as Status } from "@std/http/status";
 import type { JSX } from "preact";
-import type { AppManifest, ImportMap } from "../blocks/app.ts";
-import { isInvokeCtx } from "../blocks/loader.ts";
 import type { InvocationFunc } from "../clients/withManifest.ts";
-import { withSection } from "../components/section.tsx";
+import { withSection } from "../components/section.ts";
 import type {
   Block,
   BlockModule,
@@ -25,8 +20,10 @@ import type { Flag } from "../types.ts";
 import { buildInvokeFunc } from "../utils/invoke.server.ts";
 import type { InvocationProxy } from "../utils/invoke.types.ts";
 import { type Device, deviceOf, isBot as isUABot } from "../utils/userAgent.ts";
-import type { HttpContext } from "./handler.ts";
 import type { Vary } from "../utils/vary.ts";
+import type { AppManifest, ImportMap } from "./app.ts";
+import type { HttpContext } from "./handler.ts";
+import { isInvokeCtx } from "./loader.ts";
 
 export type SingleFlightKeyFunc<TConfig = any, TCtx = any> = (
   args: TConfig,
diff --git a/blocks/workflow.ts b/blocks/workflow.ts
index c8d3f36b6..d5db3ff0c 100644
--- a/blocks/workflow.ts
+++ b/blocks/workflow.ts
@@ -1,13 +1,14 @@
 // deno-lint-ignore-file no-explicit-any
 import {
   type Arg,
-  type LocalActivityCommand,
-  type Metadata,
   type Workflow as DurableWorkflow,
   WorkflowContext as DurableWorkflowContext,
+  type LocalActivityCommand,
+  type Metadata,
   type WorkflowExecution,
 } from "../deps.ts";
 import type { Block, BlockModule, InstanceOf } from "../engine/block.ts";
+import type { AppManifest, DecoSiteState, DecoState } from "../types.ts";
 import type {
   AvailableActions,
   AvailableFunctions,
@@ -18,14 +19,13 @@ import type {
   ManifestFunction,
   ManifestLoader,
 } from "../utils/invoke.types.ts";
-import type { AppManifest, DecoSiteState, DecoState } from "../types.ts";
 import type { DotNestedKeys } from "../utils/object.ts";
 import type { HttpContext } from "./handler.ts";
 import {
   type FnContext,
   fnContextFromHttpContext,
   type RequestState,
-} from "./utils.tsx";
+} from "./utils.ts";
 
 export interface WorkflowMetadata extends Metadata {
   defaultInvokeHeaders?: Record<string, string>;
diff --git a/components/JsonViewer.tsx b/components/JsonViewer.ts
similarity index 69%
rename from components/JsonViewer.tsx
rename to components/JsonViewer.ts
index 557cd328e..3ffc6d570 100644
--- a/components/JsonViewer.tsx
+++ b/components/JsonViewer.ts
@@ -1,8 +1,10 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
-import { useFramework } from "../runtime/handler.tsx";
 import type { JSX } from "preact";
+import {
+  Fragment as _Fragment,
+  jsx as _jsx,
+  jsxs as _jsxs,
+} from "preact/jsx-runtime";
+import { useFramework } from "../runtime/handler.ts";
 
 export interface Props {
   body: string;
@@ -52,16 +54,21 @@ const snippet = (json: string) => {
  */
 export default function JsonViewer(p: Props): JSX.Element {
   const { Head } = useFramework();
-  return (
-    <>
-      {/** @ts-ignore: could not type it well */}
-      <Head>
-        <script
-          type="module"
-          dangerouslySetInnerHTML={{ __html: `(${snippet})(${p.body});` }}
-        />
-      </Head>
-      <pre id="json-renderer">{p.body}</pre>
-    </>
-  );
+  return /*#__PURE__*/ _jsxs(_Fragment, {
+    children: [
+      // @ts-expect-error: JSX does not have a script element
+      /*#__PURE__*/ _jsx(Head, {
+        children: /*#__PURE__*/ _jsx("script", {
+          type: "module",
+          dangerouslySetInnerHTML: {
+            __html: `(${snippet})(${p.body});`,
+          },
+        }),
+      }),
+      /*#__PURE__*/ _jsx("pre", {
+        id: "json-renderer",
+        children: p.body,
+      }),
+    ],
+  });
 }
diff --git a/components/LiveControls.tsx b/components/LiveControls.ts
similarity index 89%
rename from components/LiveControls.tsx
rename to components/LiveControls.ts
index 20f251c6f..0bd849461 100644
--- a/components/LiveControls.tsx
+++ b/components/LiveControls.ts
@@ -1,6 +1,8 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
+import {
+  Fragment as _Fragment,
+  jsx as _jsx,
+  jsxs as _jsxs,
+} from "preact/jsx-runtime";
 import { context } from "../deco.ts";
 import { DomInspector, DomInspectorActivators } from "../deps.ts";
 import type { Flag, Site } from "../types.ts";
@@ -174,23 +176,27 @@ const main = () => {
 };
 
 function LiveControls({ site, page, flags }: Props) {
-  return (
-    <>
-      <script
-        type="application/json"
-        id="__DECO_STATE"
-        dangerouslySetInnerHTML={{
-          __html: JSON.stringify({ page, site, flags }),
-        }}
-      />
-      <script
-        type="module"
-        dangerouslySetInnerHTML={{
+  return /*#__PURE__*/ _jsxs(_Fragment, {
+    children: [
+      /*#__PURE__*/ _jsx("script", {
+        type: "application/json",
+        id: "__DECO_STATE",
+        dangerouslySetInnerHTML: {
+          __html: JSON.stringify({
+            page,
+            site,
+            flags,
+          }),
+        },
+      }),
+      /*#__PURE__*/ _jsx("script", {
+        type: "module",
+        dangerouslySetInnerHTML: {
           __html: `${domInspectorModule}\n(${main})()`,
-        }}
-      />
-    </>
-  );
+        },
+      }),
+    ],
+  });
 }
 
 export default LiveControls;
diff --git a/components/PreviewNotAvailable.ts b/components/PreviewNotAvailable.ts
new file mode 100644
index 000000000..4d479b62e
--- /dev/null
+++ b/components/PreviewNotAvailable.ts
@@ -0,0 +1,11 @@
+import { jsxs as _jsxs } from "preact/jsx-runtime";
+
+export default function PreviewNotAvailable({ block }: { block: string }) {
+  return /*#__PURE__*/ _jsxs("div", {
+    children: [
+      "The preview of ",
+      block,
+      " is not available.",
+    ],
+  });
+}
diff --git a/components/PreviewNotAvailable.tsx b/components/PreviewNotAvailable.tsx
deleted file mode 100644
index cc77fdb31..000000000
--- a/components/PreviewNotAvailable.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
-export default function PreviewNotAvailable({ block }: { block: string }) {
-  return <div>The preview of {block} is not available.</div>;
-}
diff --git a/components/StubSection.ts b/components/StubSection.ts
new file mode 100644
index 000000000..8968c3ebb
--- /dev/null
+++ b/components/StubSection.ts
@@ -0,0 +1,18 @@
+import { jsxs as _jsxs } from "preact/jsx-runtime";
+export interface StubSectionProps {
+  component: string;
+}
+
+export default function StubSection({ component }: StubSectionProps) {
+  return /*#__PURE__*/ _jsxs("div", {
+    children: [
+      "Oops! the reference for the component ",
+      component,
+      " is dangling",
+    ],
+  });
+}
+
+export function Empty() {
+  return null;
+}
diff --git a/components/StubSection.tsx b/components/StubSection.tsx
deleted file mode 100644
index 5fbf81a88..000000000
--- a/components/StubSection.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
-export interface StubSectionProps {
-  component: string;
-}
-
-export default function StubSection({ component }: StubSectionProps) {
-  return (
-    <div>Oops! the reference for the component {component} is dangling</div>
-  );
-}
-
-export function Empty() {
-  return null;
-}
diff --git a/components/section.tsx b/components/section.ts
similarity index 65%
rename from components/section.tsx
rename to components/section.ts
index 1614bb8f2..ed67e63e4 100644
--- a/components/section.tsx
+++ b/components/section.ts
@@ -1,7 +1,4 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
-import type { Context as PreactContext, JSX } from "preact";
+import type { JSX, Context as PreactContext } from "preact";
 import {
   Component,
   type ComponentChildren,
@@ -9,15 +6,16 @@ import {
   createContext,
 } from "preact";
 import { useContext } from "preact/hooks";
+import { Fragment as _Fragment, jsx as _jsx } from "preact/jsx-runtime";
 import type { HttpContext } from "../blocks/handler.ts";
-import type { RequestState } from "../blocks/utils.tsx";
+import type { RequestState } from "../blocks/utils.ts";
 import { Context } from "../deco.ts";
 import { type DeepPartial, Murmurhash3 } from "../deps.ts";
 import type { ComponentFunc, ComponentMetadata } from "../engine/block.ts";
 import type { FieldResolver } from "../engine/core/resolver.ts";
 import { HttpError } from "../engine/errors.ts";
 import { logger } from "../observability/otel/config.ts";
-import { useFramework } from "../runtime/handler.tsx";
+import { useFramework } from "../runtime/handler.ts";
 import { type Device, deviceOf } from "../utils/userAgent.ts";
 
 export interface SectionContext extends HttpContext<RequestState> {
@@ -92,14 +90,16 @@ export class ErrorBoundary extends Component<BoundaryProps, BoundaryState> {
     }
 
     if (mode === "loading") {
-      return <Loading />;
+      return /*#__PURE__*/ _jsx(Loading, {});
     }
-
     if (mode === "error") {
-      return <Error error={error!} />;
+      return /*#__PURE__*/ _jsx(Error, {
+        error: error as Error,
+      });
     }
-
-    return <>{children}</>;
+    return /*#__PURE__*/ _jsx(_Fragment, {
+      children: children,
+    });
   }
 }
 
@@ -171,97 +171,89 @@ export function withSection<TProps, TLoaderProps = TProps>(
 
     return {
       props,
-      Component: (props: TProps) => {
+      Component: (props) => {
         const { isDeploy, deploymentId } = Context.active();
-
         // if parent salt is not defined it means that we are at the root level, meaning that we are the first partial in the rendering tree.
         const { renderSalt: parentRenderSalt } = useContext(SectionContext) ??
           {};
         const binding = useFramework();
-
         // if this is the case, so we can use the renderSaltFromState - which means that we are in a partial rendering phase
         const renderSalt = parentRenderSalt === undefined
           ? renderSaltFromState ?? `${renderCount}`
           : `${parentRenderSalt ?? ""}${renderCount}`; // the render salt is used to prevent duplicate ids in the same page, it starts with parent renderSalt and appends how many time this function is called.
         const id = `${idPrefix}-${renderSalt}`; // all children of the same parent will have the same renderSalt, but different renderCount
         renderCount = ++renderCount % MAX_RENDER_COUNT;
-
-        return (
-          <SectionContext.Provider
-            value={{
-              ...ctx,
-              deploymentId,
-              renderSalt,
-              FallbackWrapper: ({ children, ...props }) => (
-                <binding.LoadingFallback id={id} {...props}>
-                  {children}
-                </binding.LoadingFallback>
-              ),
-              get device() {
-                return device ??= deviceOf(ctx.request);
-              },
-            }}
-          >
-            <binding.Wrapper id={id} partialMode={partialMode}>
-              <section
-                id={id}
-                data-manifest-key={resolver}
-                data-resolve-chain={isPreview(ctx.resolveChain)
-                  ? JSON.stringify(ctx.resolveChain)
-                  : undefined}
-              >
-                <ErrorBoundary
-                  component={resolver}
-                  loading={() => (
-                    <binding.LoadingFallback id={id}>
-                      {LoadingFallback
-                        ? (
-                          // @ts-ignore difficult typing this
-                          <LoadingFallback
-                            {...new Proxy<Partial<TProps>>(props, {
-                              get: (value: Partial<TProps>, prop) => {
-                                try {
-                                  return Reflect.get(value, prop);
-                                } catch (_) {
-                                  return undefined;
-                                }
-                              },
-                            })}
-                          />
-                        )
-                        : <></>}
-                    </binding.LoadingFallback>
-                  )}
-                  error={({ error }) => (
-                    ErrorFallback
-                      ? <ErrorFallback error={error} />
-                      : (
-                        <binding.ErrorFallback
-                          id={id}
-                          name={resolver}
-                          error={error}
-                          isDeploy={isDeploy}
-                          debugEnabled={debugEnabled}
-                        />
-                      )
-                  )}
-                >
-                  <ComponentFunc {...props} />
-                </ErrorBoundary>
-              </section>
-            </binding.Wrapper>
-          </SectionContext.Provider>
-        );
+        return /*#__PURE__*/ _jsx(SectionContext.Provider, {
+          value: {
+            ...ctx,
+            deploymentId,
+            renderSalt,
+            FallbackWrapper: ({ children, ...props }) =>
+              /*#__PURE__*/ _jsx(binding.LoadingFallback, {
+                id: id,
+                ...props,
+                children: children,
+              }),
+            get device() {
+              return device ??= deviceOf(ctx.request);
+            },
+          },
+          children: /*#__PURE__*/ _jsx(binding.Wrapper, {
+            id: id,
+            partialMode: partialMode,
+            children: /*#__PURE__*/ _jsx("section", {
+              id: id,
+              "data-manifest-key": resolver,
+              "data-resolve-chain": isPreview(ctx.resolveChain)
+                ? JSON.stringify(ctx.resolveChain)
+                : undefined,
+              children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                component: resolver,
+                loading: () =>
+                  /*#__PURE__*/ _jsx(binding.LoadingFallback, {
+                    id: id,
+                    children: LoadingFallback // @ts-ignore difficult typing this
+                      ? /*#__PURE__*/ _jsx(LoadingFallback, {
+                        ...new Proxy(props as object, {
+                          get: (value, prop) => {
+                            try {
+                              return Reflect.get(value, prop);
+                            } catch (_) {
+                              return undefined;
+                            }
+                          },
+                        }),
+                      })
+                      : /*#__PURE__*/ _jsx(_Fragment, {}),
+                  }),
+                error: ({ error }) =>
+                  ErrorFallback
+                    ? /*#__PURE__*/ _jsx(ErrorFallback, {
+                      error: error,
+                    })
+                    : /*#__PURE__*/ _jsx(binding.ErrorFallback, {
+                      id: id,
+                      name: resolver,
+                      error: error,
+                      isDeploy: isDeploy,
+                      debugEnabled: debugEnabled,
+                    }),
+                children: /*#__PURE__*/ _jsx(ComponentFunc, {
+                  ...props,
+                }),
+              }),
+            }),
+          }),
+        });
       },
       metadata,
       ...LoadingFallback
         ? {
           LoadingFallback: () => {
-            return (
-              // @ts-ignore: could not it type well
-              <LoadingFallback
-                {...(loaderProps ?? props) as DeepPartial<TLoaderProps>}
-              />
+            return ( // @ts-ignore: could not it type well
+              /*#__PURE__*/ _jsx(LoadingFallback, {
+                ...loaderProps ?? props,
+              })
             );
           },
         }
diff --git a/deno.json b/deno.json
index 8f8607b4d..59ec9626f 100644
--- a/deno.json
+++ b/deno.json
@@ -1,6 +1,6 @@
 {
   "name": "@deco/deco",
-  "version": "1.101.18",
+  "version": "1.101.19-alpha.1",
   "exports": {
     ".": "./mod.ts",
     "./web": "./mod.web.ts",
@@ -61,25 +61,36 @@
     }
   },
   "imports": {
+    "@deco/deco": "./mod.ts",
+    "@deco/deco/hooks": "./hooks/mod.ts",
+    "@deco/deco/htmx": "./runtime/htmx/mod.ts",
     "$fresh/": "https://denopkg.com/denoland/fresh@1.6.8/",
     "@cliffy/prompt": "jsr:@cliffy/prompt@^1.0.0-rc.5",
     "@core/asyncutil": "jsr:@core/asyncutil@^1.0.2",
+    "@core/asyncutil/": "jsr:/@core/asyncutil@^1.0.2/",
     "@deco/codemod-toolkit": "jsr:@deco/codemod-toolkit@^0.3.1",
     "@deco/durable": "jsr:@deco/durable@^0.5.3",
     "@deco/warp": "jsr:@deco/warp@^0.3.8",
     "@hono/hono": "jsr:@hono/hono@^4.5.4",
+    "@hono/hono/": "jsr:/@hono/hono@^4.5.4/",
     "@std/assert": "jsr:@std/assert@^1.0.2",
     "@std/async": "jsr:@std/async@^0.224.1",
+    "@std/async/": "jsr:/@std/async@^0.224.1/",
     "@std/cli": "jsr:@std/cli@^1.0.3",
     "@std/crypto": "jsr:@std/crypto@1.0.0-rc.1",
     "@std/datetime": "jsr:@std/datetime@^0.224.0",
     "@std/encoding": "jsr:@std/encoding@^1.0.0-rc.1",
     "@std/flags": "jsr:@std/flags@^0.224.0",
     "@std/fmt": "jsr:@std/fmt@^0.225.3",
+    "@std/fmt/": "jsr:/@std/fmt@^0.225.3/",
     "@std/fs": "jsr:@std/fs@^0.229.1",
+    "@std/fs/": "jsr:/@std/fs@^0.229.1/",
     "@std/http": "jsr:@std/http@^1.0.0",
+    "@std/http/": "jsr:/@std/http@^1.0.0/",
     "@std/io": "jsr:@std/io@^0.224.4",
+    "@std/io/": "jsr:/@std/io@^0.224.4/",
     "@std/log": "jsr:@std/log@^0.224.5",
+    "@std/log/": "jsr:/@std/log@^0.224.5/",
     "@std/media-types": "jsr:@std/media-types@^1.0.0-rc.1",
     "@std/path": "jsr:@std/path@^0.225.2",
     "@std/semver": "jsr:@std/semver@^0.224.3",
@@ -89,6 +100,7 @@
     "fast-json-patch": "npm:fast-json-patch@^3.1.1",
     "partytown/": "https://deno.land/x/partytown@0.3.0/",
     "preact": "npm:preact@10.23.1",
+    "preact/": "npm:/preact@10.23.1/",
     "preact-render-to-string": "npm:preact-render-to-string@6.4.0",
     "simple-git": "npm:simple-git@^3.25.0",
     "std/": "https://deno.land/std@0.203.0/"
diff --git a/engine/manifest/defaults.ts b/engine/manifest/defaults.ts
index 75a9c42a5..fa58c1adf 100644
--- a/engine/manifest/defaults.ts
+++ b/engine/manifest/defaults.ts
@@ -1,4 +1,4 @@
-import PreviewNotAvailable from "../../components/PreviewNotAvailable.tsx";
+import PreviewNotAvailable from "../../components/PreviewNotAvailable.ts";
 import { type DotNestedKeys, pickPaths } from "../../utils/object.ts";
 import type { ResolveOptions } from "../core/mod.ts";
 import {
diff --git a/engine/manifest/manifest.ts b/engine/manifest/manifest.ts
index 4dfd3558f..30be010df 100644
--- a/engine/manifest/manifest.ts
+++ b/engine/manifest/manifest.ts
@@ -10,7 +10,7 @@ import {
 } from "../../blocks/app.ts";
 import { buildRuntime } from "../../blocks/appsUtil.ts";
 import blocks from "../../blocks/index.ts";
-import { buildImportMap } from "../../blocks/utils.tsx";
+import { buildImportMap } from "../../blocks/utils.ts";
 import {
   Context,
   context,
diff --git a/hooks/useDevice.ts b/hooks/useDevice.ts
index 071d7f041..99d28f948 100644
--- a/hooks/useDevice.ts
+++ b/hooks/useDevice.ts
@@ -1,6 +1,6 @@
 import { useContext } from "preact/hooks";
 
-import { SectionContext } from "../components/section.tsx";
+import { SectionContext } from "../components/section.ts";
 import type { Device } from "../utils/userAgent.ts";
 
 /**
diff --git a/hooks/useSection.ts b/hooks/useSection.ts
index b9edd9450..257555795 100644
--- a/hooks/useSection.ts
+++ b/hooks/useSection.ts
@@ -1,6 +1,6 @@
 import type { ComponentType } from "preact";
 import { useContext } from "preact/hooks";
-import { SectionContext } from "../components/section.tsx";
+import { SectionContext } from "../components/section.ts";
 import { FieldResolver } from "../engine/core/resolver.ts";
 
 import { Murmurhash3 } from "../deps.ts";
diff --git a/mod.ts b/mod.ts
index d8c1d7eed..ef6babfba 100644
--- a/mod.ts
+++ b/mod.ts
@@ -2,12 +2,12 @@ export type {
   AppMiddlewareContext,
   ManifestOf,
   MatchContext,
-  WorkflowContext,
+  WorkflowContext
 } from "./blocks/mod.ts";
 export * from "./commons/workflows/mod.ts";
 export * from "./commons/workflows/types.ts";
-export * as JsonViewer from "./components/JsonViewer.tsx";
-export type { Framework } from "./components/section.tsx";
+export * as JsonViewer from "./components/JsonViewer.ts";
+export type { Framework } from "./components/section.ts";
 export * from "./deco.ts";
 export { Context } from "./deco.ts";
 export { ValueType } from "./deps.ts";
@@ -22,25 +22,25 @@ export type {
   IntrospectParams,
   PreactComponent,
   ResolvableOf,
-  ResolverLike,
+  ResolverLike
 } from "./engine/block.ts";
 export type { HintNode } from "./engine/core/hints.ts";
 export {
   asResolved,
   isDeferred,
-  isResolvable,
+  isResolvable
 } from "./engine/core/resolver.ts";
 export type {
   BaseContext,
   Resolvable,
-  Resolved,
+  Resolved
 } from "./engine/core/resolver.ts";
 export { $live, initContext, newContext } from "./engine/manifest/manifest.ts";
 export { lazySchemaFor } from "./engine/schema/lazy.ts";
 export * from "./runtime/errors.ts";
 export { fetch } from "./runtime/fetch/mod.ts";
 export type { RequestInit } from "./runtime/fetch/mod.ts";
-export { useFramework } from "./runtime/handler.tsx";
+export { useFramework } from "./runtime/handler.ts";
 export { type DecoRouteState } from "./runtime/middleware.ts";
 export * from "./runtime/mod.ts";
 export { Deco } from "./runtime/mod.ts";
@@ -51,5 +51,6 @@ export type { StreamProps } from "./utils/invoke.ts";
 export type {
   AvailableActions,
   AvailableInvocations,
-  AvailableLoaders,
+  AvailableLoaders
 } from "./utils/invoke.types.ts";
+
diff --git a/runtime/deps.ts b/runtime/deps.ts
index 2c743fbb0..6d458f3a9 100644
--- a/runtime/deps.ts
+++ b/runtime/deps.ts
@@ -1,4 +1,4 @@
-import type { Page } from "../blocks/page.tsx";
+import type { Page } from "../blocks/page.ts";
 
 export { Hono } from "@hono/hono";
 export type { Context, Handler, Input, MiddlewareHandler } from "@hono/hono";
diff --git a/runtime/features/preview.tsx b/runtime/features/preview.ts
similarity index 92%
rename from runtime/features/preview.tsx
rename to runtime/features/preview.ts
index b0307e12c..200361615 100644
--- a/runtime/features/preview.tsx
+++ b/runtime/features/preview.ts
@@ -1,7 +1,4 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
-import type { Page } from "../../blocks/page.tsx";
+import type { Page } from "../../blocks/page.ts";
 import type { AppManifest } from "../../types.ts";
 import type { State } from "../mod.ts";
 
diff --git a/runtime/features/render.tsx b/runtime/features/render.ts
similarity index 83%
rename from runtime/features/render.tsx
rename to runtime/features/render.ts
index c7de65a76..151ffb117 100644
--- a/runtime/features/render.tsx
+++ b/runtime/features/render.ts
@@ -1,13 +1,11 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
-import type { Page } from "../../blocks/page.tsx";
-import { getSectionID } from "../../components/section.tsx";
+import { jsx as _jsx } from "preact/jsx-runtime";
+import type { Page } from "../../blocks/page.ts";
+import { getSectionID } from "../../components/section.ts";
 import type { FieldResolver, Resolvable } from "../../engine/core/resolver.ts";
 import { HttpError } from "../../engine/errors.ts";
 import { useScriptAsDataURI } from "../../hooks/useScript.ts";
 import type { AppManifest } from "../../types.ts";
-import { useFramework } from "../handler.tsx";
+import { useFramework } from "../handler.ts";
 import type { State } from "../mod.ts";
 
 export interface Options {
@@ -117,17 +115,16 @@ export const render = async <TAppManifest extends AppManifest = AppManifest>(
         },
         Component: (props: Props) => {
           const binding = useFramework();
-          return (
-            <binding.Wrapper id={partialId}>
-              <div>
-                <script
-                  type="text/javascript"
-                  defer
-                  src={useScriptAsDataURI(snippet, props.url)}
-                />
-              </div>
-            </binding.Wrapper>
-          );
+          return /*#__PURE__*/ _jsx(binding.Wrapper, {
+            id: partialId,
+            children: /*#__PURE__*/ _jsx("div", {
+              children: /*#__PURE__*/ _jsx("script", {
+                type: "text/javascript",
+                defer: true,
+                src: useScriptAsDataURI(snippet, props.url),
+              }),
+            }),
+          });
         },
       };
     }
diff --git a/runtime/fresh/plugin.tsx b/runtime/fresh/plugin.tsx
index 646bf6269..3d81d0562 100644
--- a/runtime/fresh/plugin.tsx
+++ b/runtime/fresh/plugin.tsx
@@ -1,11 +1,11 @@
 // TODO make fresh plugin use @deco/deco from JSR. so that we can use the same code for both
 
+import type { Plugin } from "$fresh/server.ts";
 import type { AppManifest, SiteInfo } from "@deco/deco";
 import { Deco, type PageData, type PageParams } from "@deco/deco";
 import { framework as htmxFramework } from "@deco/deco/htmx";
 import type { ComponentType } from "preact";
 import framework from "./Bindings.tsx";
-import type { Plugin } from "$fresh/server.ts";
 export type { Plugin } from "$fresh/server.ts";
 
 export interface PluginRoute {
diff --git a/runtime/handler.tsx b/runtime/handler.ts
similarity index 89%
rename from runtime/handler.tsx
rename to runtime/handler.ts
index ab4d3eac9..3f9389f8d 100644
--- a/runtime/handler.tsx
+++ b/runtime/handler.ts
@@ -1,32 +1,30 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-import "../utils/patched_fetch.ts";
-
 import {
   type ComponentChildren,
   type ComponentType,
   createContext,
 } from "preact";
 import { useContext } from "preact/hooks";
-import type { Framework } from "../components/section.tsx";
+import { jsx as _jsx } from "preact/jsx-runtime";
+import type { Framework } from "../components/section.ts";
 import type { AppManifest } from "../types.ts";
 import "../utils/patched_fetch.ts";
 import { Hono, type PageData } from "./deps.ts";
-import { HTMX } from "./htmx/mod.tsx";
+import { HTMX } from "./htmx/framework.ts";
 import type { DecoHandler, DecoRouteState, HonoHandler } from "./middleware.ts";
 import { middlewareFor } from "./middleware.ts";
 import type { Deco } from "./mod.ts";
 import { handler as metaHandler } from "./routes/_meta.ts";
 import { handler as invokeHandler } from "./routes/batchInvoke.ts";
-import { handler as previewHandler } from "./routes/blockPreview.tsx";
-import { handler as entrypoint } from "./routes/entrypoint.tsx";
+import { handler as previewHandler } from "./routes/blockPreview.ts";
+import { handler as entrypoint } from "./routes/entrypoint.ts";
 import { handler as inspectHandler } from "./routes/inspect.ts";
 import { handler as invokeKeyHandler } from "./routes/invoke.ts";
-import { handler as previewsHandler } from "./routes/previews.tsx";
+import { handler as previewsHandler } from "./routes/previews.ts";
 import { handler as releaseHandler } from "./routes/release.ts";
-import { handler as renderHandler } from "./routes/render.tsx";
+import { handler as renderHandler } from "./routes/render.ts";
 import { styles } from "./routes/styles.css.ts";
 import { handler as workflowHandler } from "./routes/workflow.ts";
+
 export interface RendererOpts {
   Layout?: ComponentType<
     { req: Request; children: ComponentChildren; revision: string }
@@ -138,11 +136,12 @@ export const handlerFor = <TAppManifest extends AppManifest = AppManifest>(
           ...data,
           page: {
             Component: (props) => {
-              return (
-                <FrameworkContext.Provider value={framework ?? HTMX}>
-                  <data.page.Component {...props} />
-                </FrameworkContext.Provider>
-              );
+              return /*#__PURE__*/ _jsx(FrameworkContext.Provider, {
+                value: framework ?? HTMX,
+                children: /*#__PURE__*/ _jsx(data.page.Component, {
+                  ...props,
+                }),
+              });
             },
             props: data.page.props,
             metadata: data.page.metadata,
diff --git a/runtime/htmx/Bindings.ts b/runtime/htmx/Bindings.ts
new file mode 100644
index 000000000..4cdcd7bf5
--- /dev/null
+++ b/runtime/htmx/Bindings.ts
@@ -0,0 +1,54 @@
+import type { ComponentChildren } from "preact";
+import {
+  Fragment as _Fragment,
+  jsx as _jsx,
+  jsxs as _jsxs,
+} from "preact/jsx-runtime";
+import type { Framework } from "../../components/section.ts";
+import { useSection } from "../../hooks/useSection.ts";
+
+export const Head = (_: { children: ComponentChildren }): null => {
+  return null;
+};
+const bindings: Framework = {
+  name: "htmx",
+  Head,
+  Wrapper: ({ children }) =>
+    /*#__PURE__*/ _jsx(_Fragment, {
+      children: children,
+    }),
+  ErrorFallback: function ({ isDeploy, debugEnabled, name, error }) {
+    return /*#__PURE__*/ _jsxs("div", {
+      style: isDeploy && !debugEnabled ? "display: none" : undefined,
+      children: [
+        /*#__PURE__*/ _jsxs("p", {
+          children: [
+            "Error happened rendering ",
+            name,
+            ": ",
+            error.message,
+          ],
+        }),
+        /*#__PURE__*/ _jsx("button", {
+          "hx-get": useSection(),
+          "hx-target": "closest section",
+          "hx-swap": "outerHTML transition:true",
+          children: "Retry",
+        }),
+      ],
+    });
+  },
+  LoadingFallback: function ({ children, props }) {
+    return /*#__PURE__*/ _jsx("div", {
+      "hx-get": useSection({
+        props,
+      }),
+      "hx-trigger": "load once delay:6s, intersect once threshold:0.0",
+      "hx-target": "closest section",
+      "hx-swap": "outerHTML transition:true",
+      children: children,
+    });
+  },
+};
+
+export default bindings;
diff --git a/runtime/htmx/Bindings.tsx b/runtime/htmx/Bindings.tsx
deleted file mode 100644
index 3ac7c9f91..000000000
--- a/runtime/htmx/Bindings.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
-import type { ComponentChildren } from "preact";
-import type { Framework } from "../../components/section.tsx";
-import { useSection } from "../../hooks/useSection.ts";
-
-export const Head = (_: { children: ComponentChildren }): null => {
-  return null;
-};
-const bindings: Framework = {
-  name: "htmx",
-  Head,
-  Wrapper: ({ children }) => <>{children}</>,
-  ErrorFallback: function ({ isDeploy, debugEnabled, name, error }) {
-    return (
-      <div style={isDeploy && !debugEnabled ? "display: none" : undefined}>
-        <p>Error happened rendering {name}: {error.message}</p>
-        <button
-          hx-get={useSection()}
-          hx-target="closest section"
-          hx-swap="outerHTML transition:true"
-        >
-          Retry
-        </button>
-      </div>
-    );
-  },
-  LoadingFallback: function ({ children, props }) {
-    return (
-      <div
-        hx-get={useSection({ props })}
-        hx-trigger="load once delay:6s, intersect once threshold:0.0"
-        hx-target="closest section"
-        hx-swap="outerHTML transition:true"
-      >
-        {children}
-      </div>
-    );
-  },
-};
-
-export default bindings;
diff --git a/runtime/htmx/Renderer.tsx b/runtime/htmx/Renderer.ts
similarity index 70%
rename from runtime/htmx/Renderer.tsx
rename to runtime/htmx/Renderer.ts
index 8b9792273..540e31b53 100644
--- a/runtime/htmx/Renderer.tsx
+++ b/runtime/htmx/Renderer.ts
@@ -1,11 +1,9 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
 import { renderToString } from "npm:preact-render-to-string@6.4.0";
 import { type ComponentChildren, options } from "preact";
+import { Fragment as _Fragment, jsx as _jsx } from "preact/jsx-runtime";
 import type { ContextRenderer, PageData } from "../deps.ts";
-import { Head } from "./Bindings.tsx";
-export { Head } from "./Bindings.tsx";
+import { Head } from "./Bindings.ts";
+export { Head };
 
 export const renderFn: ContextRenderer = <TData extends PageData = PageData>(
   { page }: TData,
@@ -24,11 +22,10 @@ export const renderFn: ContextRenderer = <TData extends PageData = PageData>(
     }
     return original?.(vnode);
   };
-  const body = renderToString(
-    <page.Component
-      {...page.props}
-    />,
-  );
+  const body = renderToString(/*#__PURE__*/ _jsx(page.Component, {
+    ...page.props,
+  }));
+
   options.vnode = original;
   return new Response(
     `<!DOCTYPE html>
@@ -36,18 +33,13 @@ export const renderFn: ContextRenderer = <TData extends PageData = PageData>(
                     <head>
                     <meta charset="utf-8">
                     <meta name="viewport" content="width=device-width, initial-scale=1.0">${
-      renderToString(
-        <>
-          {((htmlHead ??
-            []) as ComponentChildren[]).map(
-              (child) => (
-                <>
-                  {child}
-                </>
-              ),
-            )}
-        </>,
-      )
+      renderToString(/*#__PURE__*/ _jsx(_Fragment, {
+        children: (htmlHead ?? []).map((child) =>
+          /*#__PURE__*/ _jsx(_Fragment, {
+            children: child,
+          })
+        ),
+      }))
     }</head><body>${body}</body></html>`,
     {
       status: 200,
diff --git a/runtime/htmx/mod.tsx b/runtime/htmx/framework.ts
similarity index 78%
rename from runtime/htmx/mod.tsx
rename to runtime/htmx/framework.ts
index 27ac12d7d..363693049 100644
--- a/runtime/htmx/mod.tsx
+++ b/runtime/htmx/framework.ts
@@ -1,20 +1,23 @@
 /** @jsxRuntime automatic */
 /** @jsxImportSource preact */
-
 import type { ComponentChildren, ComponentType } from "preact";
+import {
+  Fragment as _Fragment,
+  jsx as _jsx,
+  jsxs as _jsxs,
+} from "preact/jsx-runtime";
 import { Context } from "../../deco.ts";
 import type { AppManifest } from "../../types.ts";
 import { Hono, upgradeWebSocket } from "../deps.ts";
-import type { Bindings } from "../handler.tsx";
+import type { Bindings } from "../handler.ts";
 import type { DecoRouteState } from "../middleware.ts";
-import framework from "./Bindings.tsx";
-import { renderFn } from "./Renderer.tsx";
+import framework from "./Bindings.ts";
+import { renderFn } from "./Renderer.ts";
 import { staticFiles } from "./serveStatic.ts";
 const DEV_SERVER_PATH = `/deco/dev`;
-const DEV_SERVER_SCRIPT = (
-  <script
-    dangerouslySetInnerHTML={{
-      __html: `
+const DEV_SERVER_SCRIPT = /*#__PURE__*/ _jsx("script", {
+  dangerouslySetInnerHTML: {
+    __html: `
 if (!window.HAS_PREVIEW_SCRIPT) {
   // Debounce function to limit the rate of page refreshes
   function debounce(func, delay) {
@@ -64,10 +67,8 @@ if (!window.HAS_PREVIEW_SCRIPT) {
   window.HAS_PREVIEW_SCRIPT = true;
 }
 `,
-    }}
-  >
-  </script>
-);
+  },
+});
 let hmrUniqueId = crypto.randomUUID();
 const sockets = new Map<string, WebSocket>();
 
@@ -101,7 +102,11 @@ export const HTMX = <
     }),
   );
   hono.use(staticFiles(opts?.staticRoot));
-  const Layout = opts?.Layout ?? (({ children }) => <>{children}</>);
+  const Layout = opts?.Layout ??
+    (({ children }) =>
+      /*#__PURE__*/ _jsx(_Fragment, {
+        children: children,
+      }));
   return {
     server: hono,
     framework,
@@ -113,12 +118,17 @@ export const HTMX = <
           page: {
             metadata: page.metadata,
             Component: () => {
-              return (
-                <Layout hmrUniqueId={hmrUniqueId} revision={revision!}>
-                  {!active.isDeploy ? DEV_SERVER_SCRIPT : null}
-                  <page.Component {...page.props} />
-                </Layout>
-              );
+              // @ts-expect-error: i dont know why this is happening
+              return /*#__PURE__*/ _jsxs(Layout, {
+                hmrUniqueId: hmrUniqueId,
+                revision: revision,
+                children: [
+                  !active.isDeploy ? DEV_SERVER_SCRIPT : null,
+                  /*#__PURE__*/ _jsx(page.Component, {
+                    ...page.props,
+                  }),
+                ],
+              });
             },
             props: {},
           },
diff --git a/runtime/htmx/mod.ts b/runtime/htmx/mod.ts
index 01bbae9d5..93f33a62e 100644
--- a/runtime/htmx/mod.ts
+++ b/runtime/htmx/mod.ts
@@ -1,4 +1,5 @@
-export { default as framework } from "./Bindings.tsx";
-export { HTMX as bindings } from "./mod.tsx";
-export { Head } from "./Renderer.tsx";
+export { default as framework } from "./Bindings.ts";
+export { HTMX as bindings } from "./framework.ts";
+export { Head } from "./Renderer.ts";
 export { asset } from "./serveStatic.ts";
+
diff --git a/runtime/mod.ts b/runtime/mod.ts
index 163928998..63aefdfdb 100644
--- a/runtime/mod.ts
+++ b/runtime/mod.ts
@@ -1,7 +1,6 @@
 // deno-lint-ignore-file no-explicit-any
 import { join, toFileUrl } from "@std/path";
-import type { RequestState } from "../blocks/utils.tsx";
-import { vary } from "../utils/vary.ts";
+import type { RequestState } from "../blocks/utils.ts";
 import type { DecoContext } from "../deco.ts";
 import { Context } from "../deco.ts";
 import { context as otelContext } from "../deps.ts";
@@ -23,6 +22,7 @@ import type { AppManifest, DecoSiteState, DecoState } from "../types.ts";
 import { defaultHeaders, forceHttps } from "../utils/http.ts";
 import { buildInvokeFunc } from "../utils/invoke.server.ts";
 import { createServerTimings } from "../utils/timings.ts";
+import { vary } from "../utils/vary.ts";
 import type { ContextRenderer } from "./deps.ts";
 import { batchInvoke, invoke } from "./features/invoke.ts";
 import {
@@ -30,14 +30,14 @@ import {
   meta,
   type VersionedMetaInfo,
 } from "./features/meta.ts";
-import { preview } from "./features/preview.tsx";
+import { preview } from "./features/preview.ts";
 import {
   type Options,
   render,
   type RenderResponse,
-} from "./features/render.tsx";
+} from "./features/render.ts";
 import { styles } from "./features/styles.css.ts";
-import { type Bindings, handlerFor } from "./handler.tsx";
+import { type Bindings, handlerFor } from "./handler.ts";
 
 export interface PageParams<TData = any> {
   data: TData;
@@ -265,4 +265,5 @@ export class Deco<TAppManifest extends AppManifest = AppManifest> {
 
 export type { PageData } from "./deps.ts";
 export { DECO_SEGMENT } from "./middleware.ts";
-export { usePageContext, useRouterContext } from "./routes/entrypoint.tsx";
+export { usePageContext, useRouterContext } from "./routes/entrypoint.ts";
+
diff --git a/runtime/routes/blockPreview.tsx b/runtime/routes/blockPreview.ts
similarity index 90%
rename from runtime/routes/blockPreview.tsx
rename to runtime/routes/blockPreview.ts
index eb6187b29..a352e790c 100644
--- a/runtime/routes/blockPreview.tsx
+++ b/runtime/routes/blockPreview.ts
@@ -1,11 +1,9 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
-import type { Page } from "../../blocks/page.tsx";
+import { Fragment as _Fragment, jsx as _jsx } from "preact/jsx-runtime";
+import type { Page } from "../../blocks/page.ts";
 import { bodyFromUrl } from "../../utils/http.ts";
 import { createHandler, type DecoMiddlewareContext } from "../middleware.ts";
 import type { PageParams } from "../mod.ts";
-import Render from "./entrypoint.tsx";
+import Render from "./entrypoint.ts";
 
 const decoder = new TextDecoder();
 export default function Preview(
@@ -18,11 +16,11 @@ export default function Preview(
     },
   };
 
-  return (
-    <>
-      <Render {...renderProps}></Render>
-    </>
-  );
+  return /*#__PURE__*/ _jsx(_Fragment, {
+    children: /*#__PURE__*/ _jsx(Render, {
+      ...renderProps,
+    }),
+  });
 }
 
 const getPropsFromRequest = async (req: Request) => {
diff --git a/runtime/routes/entrypoint.tsx b/runtime/routes/entrypoint.ts
similarity index 87%
rename from runtime/routes/entrypoint.tsx
rename to runtime/routes/entrypoint.ts
index b2ecee92e..781be7cdb 100644
--- a/runtime/routes/entrypoint.tsx
+++ b/runtime/routes/entrypoint.ts
@@ -1,10 +1,8 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
 import { createContext } from "preact";
 import { useContext } from "preact/hooks";
+import { jsx as _jsx } from "preact/jsx-runtime";
 import type { Handler } from "../../blocks/handler.ts";
-import type { Page } from "../../blocks/page.tsx";
+import type { Page } from "../../blocks/page.ts";
 import type { PageContext } from "../../engine/block.ts";
 import type { Flag } from "../../types.ts";
 import { forceHttps, setCSPHeaders } from "../../utils/http.ts";
@@ -69,13 +67,19 @@ export default function Render({
     return null;
   }
   const { Component, props, metadata } = page;
-  return (
-    <routerCtx.Provider value={routerInfo}>
-      <ctx.Provider value={{ metadata, params, url }}>
-        <Component {...props}></Component>
-      </ctx.Provider>
-    </routerCtx.Provider>
-  );
+  return /*#__PURE__*/ _jsx(routerCtx.Provider, {
+    value: routerInfo,
+    children: /*#__PURE__*/ _jsx(ctx.Provider, {
+      value: {
+        metadata,
+        params,
+        url,
+      },
+      children: /*#__PURE__*/ _jsx(Component, {
+        ...props,
+      }),
+    }),
+  });
 }
 
 export const handler = createHandler(async (
diff --git a/runtime/routes/previews.tsx b/runtime/routes/previews.ts
similarity index 71%
rename from runtime/routes/previews.tsx
rename to runtime/routes/previews.ts
index 10981fd98..114770ab1 100644
--- a/runtime/routes/previews.tsx
+++ b/runtime/routes/previews.ts
@@ -1,8 +1,6 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
-import type { Page } from "../../blocks/page.tsx";
-import LiveControls from "../../components/LiveControls.tsx";
+import { Fragment as _Fragment, jsx as _jsx } from "preact/jsx-runtime";
+import type { Page } from "../../blocks/page.ts";
+import LiveControls from "../../components/LiveControls.ts";
 import { Context } from "../../deco.ts";
 import type { ComponentMetadata } from "../../engine/block.ts";
 import { createHandler } from "../middleware.ts";
@@ -33,14 +31,17 @@ function Preview(props: PageParams<Page>) {
   const pageId = pageIdFromMetadata(data?.metadata);
   const context = Context.active();
 
-  return (
-    <>
-      <LiveControls
-        site={{ id: context.siteId, name: context.site }}
-        page={{ id: pageId }}
-      />
-    </>
-  );
+  return /*#__PURE__*/ _jsx(_Fragment, {
+    children: /*#__PURE__*/ _jsx(LiveControls, {
+      site: {
+        id: context.siteId,
+        name: context.site,
+      },
+      page: {
+        id: pageId,
+      },
+    }),
+  });
 }
 
 export const handler = createHandler((ctx) => {
diff --git a/runtime/routes/render.tsx b/runtime/routes/render.ts
similarity index 96%
rename from runtime/routes/render.tsx
rename to runtime/routes/render.ts
index 5eed59809..5d98d18c7 100644
--- a/runtime/routes/render.tsx
+++ b/runtime/routes/render.ts
@@ -1,11 +1,8 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
 import { FieldResolver } from "../../engine/core/resolver.ts";
 import { badRequest } from "../../engine/errors.ts";
 import { createHandler } from "../middleware.ts";
 import type { PageParams } from "../mod.ts";
-import Render, { type PageData } from "./entrypoint.tsx";
+import Render, { type PageData } from "./entrypoint.ts";
 
 interface Options {
   resolveChain?: FieldResolver[];
diff --git a/runtime/utils.ts b/runtime/utils.ts
index fb23f01d6..5e748ddd7 100644
--- a/runtime/utils.ts
+++ b/runtime/utils.ts
@@ -1,7 +1,7 @@
-import type { RequestState } from "../blocks/utils.tsx";
-import { vary } from "../utils/vary.ts";
+import type { RequestState } from "../blocks/utils.ts";
 import { Context } from "../deco.ts";
 import { defaultHeaders } from "../utils/http.ts";
+import { vary } from "../utils/vary.ts";
 
 export const sha1 = async (text: string) => {
   const buffer = await crypto.subtle
diff --git a/transpile.ts b/transpile.ts
new file mode 100644
index 000000000..3f2d8f1ae
--- /dev/null
+++ b/transpile.ts
@@ -0,0 +1,62 @@
+import { ensureDir } from "https://deno.land/std@0.224.0/fs/ensure_dir.ts";
+import { walk } from "https://deno.land/std@0.224.0/fs/walk.ts";
+import { extname, join } from "https://deno.land/std@0.224.0/path/mod.ts";
+import { transpile } from "jsr:@deno/emit";
+
+const transpileEntry = async (entry: { path: string }, outputDir: string) => {
+  const sourceFilePath = entry.path;
+  const relativePath = sourceFilePath.replace(inputDir, ".");
+  const outputFilePath = join(
+    outputDir,
+    relativePath.replace(`${extname(sourceFilePath)}`, ".js"),
+  );
+
+  console.log(
+    `Transpiling ${sourceFilePath} to ${outputFilePath} `,
+  );
+
+  // Ensure the output directory exists
+  console.log(
+    "dist",
+    join(outputDir, relativePath.split("/").slice(0, -1).join("/")),
+  );
+  await ensureDir(
+    join(
+      outputDir,
+      relativePath.split("/").slice(0, -1).join("/"),
+    ),
+  );
+
+  const url = new URL(sourceFilePath, import.meta.url);
+  console.log(`file://${join(Deno.cwd(), "deno.json")}`);
+
+  const result = await transpile(url, {
+    allowRemote: true,
+    compilerOptions: {
+      "jsx": "react-jsx",
+      "jsxImportSource": "preact",
+    },
+    importMap: join(Deno.cwd(), "deno.json"),
+  });
+
+  const code = result.get(url.href);
+
+  console.log(code);
+};
+// Function to transpile TSX to JS using esbuild
+async function transpileTSXToJS(inputDir: string, outputDir: string) {
+  for await (
+    const entry of walk(inputDir, { exts: [".tsx"], includeDirs: false })
+  ) {
+    transpileEntry(entry, outputDir);
+  }
+}
+
+// Set the input and output directories
+const inputDir = "."; // Directory containing .tsx files
+
+// Transpile all TSX files
+// await transpileTSXToJS(inputDir, Deno.cwd());
+
+await transpileEntry({ path: Deno.args[0]! }, Deno.cwd());
+console.log("Transpilation complete.");
diff --git a/types.ts b/types.ts
index 225dd6db7..7875bbc03 100644
--- a/types.ts
+++ b/types.ts
@@ -14,9 +14,9 @@ import type handlerBlock from "./blocks/handler.ts";
 import type { Handler } from "./blocks/handler.ts";
 import type loaderBlock from "./blocks/loader.ts";
 import type matcherBlock from "./blocks/matcher.ts";
-import type pageBlock from "./blocks/page.tsx";
+import type pageBlock from "./blocks/page.ts";
 import type sectionBlock from "./blocks/section.ts";
-import type { FnContext } from "./blocks/utils.tsx";
+import type { FnContext } from "./blocks/utils.ts";
 import type workflowBlock from "./blocks/workflow.ts";
 import type { InvocationFunc } from "./clients/withManifest.ts";
 import type { JSONSchema7, JSONSchema7Definition } from "./deps.ts";
@@ -35,7 +35,7 @@ import type { createServerTimings } from "./utils/timings.ts";
 export type { App } from "./blocks/app.ts";
 export type {
   ErrorBoundaryComponent,
-  ErrorBoundaryParams,
+  ErrorBoundaryParams
 } from "./blocks/section.ts";
 export type { AppContext, AppManifest, AppModule, AppRuntime };
 export type JSONSchema = JSONSchema7;
@@ -134,7 +134,7 @@ export type DecoState<
 export type { JSONSchema7 } from "npm:@types/json-schema@7.0.11/index.d.ts";
 export type { PropsLoader } from "./blocks/propsLoader.ts";
 export type { LoadingFallbackProps, SectionProps } from "./blocks/section.ts";
-export type { FnContext } from "./blocks/utils.tsx";
+export type { FnContext } from "./blocks/utils.ts";
 export type { ResolveOptions } from "./engine/core/mod.ts";
 export type { ResolveFunc } from "./engine/core/resolver.ts";
 export type { RouteContext } from "./engine/manifest/manifest.ts";
diff --git a/utils/metabase.tsx b/utils/metabase.ts
similarity index 54%
rename from utils/metabase.tsx
rename to utils/metabase.ts
index 49b3ebac1..9023d1e8d 100644
--- a/utils/metabase.tsx
+++ b/utils/metabase.ts
@@ -1,6 +1,4 @@
-/** @jsxRuntime automatic */
-/** @jsxImportSource preact */
-
+import { jsx as _jsx } from "preact/jsx-runtime";
 import type { PreactComponent } from "../engine/block.ts";
 
 export type MetabaseProps = {
@@ -8,12 +6,11 @@ export type MetabaseProps = {
 };
 
 export const metabasePreview = (iframeSrc: string): PreactComponent => ({
-  Component: () => (
-    <iframe
-      style={"min-width: 100vw; min-height: 100vh;"}
-      src={`${iframeSrc}#bordered=false&titled=false`}
-    />
-  ),
+  Component: () =>
+    /*#__PURE__*/ _jsx("iframe", {
+      style: "min-width: 100vw; min-height: 100vh;",
+      src: `${iframeSrc}#bordered=false&titled=false`,
+    }),
   props: {},
   metadata: {
     resolveChain: [],
diff --git a/utils/mod.ts b/utils/mod.ts
index 99f4b9206..9d0007367 100644
--- a/utils/mod.ts
+++ b/utils/mod.ts
@@ -1,14 +1,15 @@
-export { default as JsonViewer } from "../components/JsonViewer.tsx";
+export { default as JsonViewer } from "../components/JsonViewer.ts";
 export {
   isAwaitable,
   notUndefined,
-  singleFlight,
+  singleFlight
 } from "../engine/core/utils.ts";
 export type { PromiseOrValue } from "../engine/core/utils.ts";
 export { decoManifestBuilder } from "../engine/manifest/manifestGen.ts";
 export { adminUrlFor, isAdmin, resolvable } from "./admin.ts";
 export { readFromStream } from "./http.ts";
-export { metabasePreview } from "./metabase.tsx";
+export { metabasePreview } from "./metabase.ts";
 export { tryOrDefault } from "./object.ts";
 export type { DotNestedKeys } from "./object.ts";
 export { createServerTimings } from "./timings.ts";
+
diff --git a/utils/segment.ts b/utils/segment.ts
index 025b90ec9..7844e4335 100644
--- a/utils/segment.ts
+++ b/utils/segment.ts
@@ -1,6 +1,6 @@
 import { getSetCookies } from "@std/http/cookie";
 import { DECO_MATCHER_PREFIX } from "../blocks/matcher.ts";
-import type { RequestState } from "../blocks/utils.tsx";
+import type { RequestState } from "../blocks/utils.ts";
 import { Context } from "../deco.ts";
 import { Murmurhash3 } from "../deps.ts";