diff --git a/babel.config.js b/babel.config.js
index facc811fe7..970ed58edc 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -79,6 +79,9 @@ module.exports = (api) => {
             // false positive (babel doesn't know types)
             // this is actually only called on arrays
             'String.prototype.includes',
+
+            // just for the PoC
+            'Object.assign',
           ];
           if (defaultShouldInject && !exclude.includes(name)) {
             throw new Error(
diff --git a/packages/instantsearch-jsx/package.json b/packages/instantsearch-jsx/package.json
new file mode 100644
index 0000000000..26fee334b6
--- /dev/null
+++ b/packages/instantsearch-jsx/package.json
@@ -0,0 +1,51 @@
+{
+  "name": "instantsearch-jsx",
+  "version": "1.0.0",
+  "description": "Common JSX components for InstantSearch flavors",
+  "types": "dist/es/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/es/index.js",
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": "./dist/es/index.js",
+      "require": "./dist/cjs/index.js"
+    }
+  },
+  "sideEffects": false,
+  "license": "MIT",
+  "homepage": "https://www.algolia.com/doc/guides/building-search-ui/what-is-instantsearch/react/",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/algolia/instantsearch"
+  },
+  "author": {
+    "name": "Algolia, Inc.",
+    "url": "https://www.algolia.com"
+  },
+  "keywords": [
+    "algolia",
+    "components",
+    "fast",
+    "instantsearch",
+    "react",
+    "search"
+  ],
+  "files": [
+    "README.md",
+    "dist"
+  ],
+  "scripts": {
+    "clean": "rm -rf dist",
+    "watch": "yarn build:cjs --watch",
+    "build": "yarn build:cjs && yarn build:es && yarn build:types",
+    "build:cjs": "BABEL_ENV=cjs babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/cjs --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet && ../../scripts/prepare-cjs.sh",
+    "build:es": "BABEL_ENV=es babel src --root-mode upward --extensions '.js,.ts,.tsx' --out-dir dist/es --ignore '**/__tests__/**/*','**/__mocks__/**/*' --quiet",
+    "build:types": "tsc -p ./tsconfig.declaration.json --outDir ./dist/es",
+    "test:exports": "node ./test/module/is-es-module.mjs && node ./test/module/is-cjs-module.cjs",
+    "version": "./scripts/version.cjs"
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.1.2"
+  }
+}
diff --git a/packages/instantsearch-jsx/src/Hits.tsx b/packages/instantsearch-jsx/src/Hits.tsx
new file mode 100644
index 0000000000..ffa8015a4c
--- /dev/null
+++ b/packages/instantsearch-jsx/src/Hits.tsx
@@ -0,0 +1,100 @@
+/** @jsx createElement */
+
+export type HitsClassNames = {
+  /**
+   * Class names to apply to the root element
+   */
+  root: string;
+  /**
+   * Class names to apply to the root element without results
+   */
+  emptyRoot: string;
+  /**
+   * Class names to apply to the list element
+   */
+  list: string;
+  /**
+   * Class names to apply to each item element
+   */
+  item: string;
+};
+
+type BaseHit = {
+  objectID: string;
+};
+
+export type HitsProps<T extends BaseHit> = {
+  hitComponent?: (props: {
+    hit: T;
+    item: T;
+    sendEvent: (eventName: string, hit: T, event: string) => void;
+  }) => JSX.Element;
+  itemComponent?: (props: { hit: T; index: number }) => JSX.Element;
+  hits: T[];
+  className?: string;
+  classNames?: Partial<HitsClassNames>;
+  sendEvent: (eventName: string, hit: T, event: string) => void;
+};
+
+export function cx(
+  ...classNames: Array<string | number | boolean | undefined | null>
+) {
+  return classNames.filter(Boolean).join(' ');
+}
+
+export function createHits({ createElement }: any) {
+  function DefaultHitComponent({ hit }: { hit: BaseHit }) {
+    return (
+      <div style={{ wordBreak: 'break-all' }}>
+        {JSON.stringify(hit).slice(0, 100)}…
+      </div>
+    );
+  }
+
+  return function Hits<T extends BaseHit>({
+    hitComponent: HitComponent,
+    itemComponent: ItemComponent,
+    classNames = {},
+    hits,
+    sendEvent,
+    ...props
+  }: HitsProps<T>) {
+    return (
+      <div
+        {...props}
+        className={cx(
+          'ais-Hits',
+          classNames.root,
+          hits.length === 0 && cx('ais-Hits--empty', classNames.emptyRoot),
+          props.className
+        )}
+      >
+        <ol className={cx('ais-Hits-list', classNames.list)}>
+          {hits.map((hit, index) =>
+            ItemComponent ? (
+              <ItemComponent hit={hit} index={index} />
+            ) : (
+              <li
+                key={hit.objectID}
+                className={cx('ais-Hits-item', classNames.item)}
+                onClick={() => {
+                  sendEvent('click:internal', hit, 'Hit Clicked');
+                }}
+                onAuxClick={() => {
+                  sendEvent('click:internal', hit, 'Hit Clicked');
+                }}
+              >
+                {HitComponent ? (
+                  // Vue uses `item` and React uses `hit`
+                  <HitComponent item={hit} hit={hit} sendEvent={sendEvent} />
+                ) : (
+                  <DefaultHitComponent hit={hit} />
+                )}
+              </li>
+            )
+          )}
+        </ol>
+      </div>
+    );
+  };
+}
diff --git a/packages/instantsearch-jsx/src/index.ts b/packages/instantsearch-jsx/src/index.ts
new file mode 100644
index 0000000000..c01658da47
--- /dev/null
+++ b/packages/instantsearch-jsx/src/index.ts
@@ -0,0 +1 @@
+export * from './Hits';
diff --git a/packages/instantsearch-jsx/tsconfig.declaration.json b/packages/instantsearch-jsx/tsconfig.declaration.json
new file mode 100644
index 0000000000..1e0c6449f8
--- /dev/null
+++ b/packages/instantsearch-jsx/tsconfig.declaration.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.declaration"
+}
diff --git a/packages/instantsearch.js/package.json b/packages/instantsearch.js/package.json
index 071c9e63b2..71626c1893 100644
--- a/packages/instantsearch.js/package.json
+++ b/packages/instantsearch.js/package.json
@@ -34,6 +34,7 @@
     "@types/hogan.js": "^3.0.0",
     "@types/qs": "^6.5.3",
     "algoliasearch-helper": "3.15.0",
+    "instantsearch-jsx": "1.0.0",
     "hogan.js": "^3.0.2",
     "htm": "^3.0.0",
     "preact": "^10.10.0",
diff --git a/packages/instantsearch.js/src/components/Hits/Hits.tsx b/packages/instantsearch.js/src/components/Hits/Hits.tsx
index 414757f00b..b3cedc7259 100644
--- a/packages/instantsearch.js/src/components/Hits/Hits.tsx
+++ b/packages/instantsearch.js/src/components/Hits/Hits.tsx
@@ -1,6 +1,7 @@
 /** @jsx h */
 
 import { cx } from '@algolia/ui-components-shared';
+import { createHits } from 'instantsearch-jsx';
 import { h } from 'preact';
 
 import { createInsightsEventHandler } from '../../lib/insights/listener';
@@ -26,13 +27,15 @@ export type HitsProps = {
   templateProps: PreparedTemplateProps<HitsComponentTemplates>;
 };
 
+const UiHits = createHits({ createElement: h });
+
 export default function Hits({
   results,
   hits,
   insights,
-  bindEvent,
   sendEvent,
   cssClasses,
+  bindEvent,
   templateProps,
 }: HitsProps) {
   const handleInsightsClick = createInsightsEventHandler({
@@ -55,40 +58,41 @@ export default function Hits({
   }
 
   return (
-    <div className={cssClasses.root}>
-      <ol className={cssClasses.list}>
-        {hits.map((hit, index) => (
-          <Template
-            {...templateProps}
-            templateKey="item"
-            rootTagName="li"
-            rootProps={{
-              className: cssClasses.item,
-              onClick: (event: MouseEvent) => {
-                handleInsightsClick(event);
-                sendEvent('click:internal', hit, 'Hit Clicked');
-              },
-              onAuxClick: (event: MouseEvent) => {
-                handleInsightsClick(event);
-                sendEvent('click:internal', hit, 'Hit Clicked');
-              },
-            }}
-            key={hit.objectID}
-            data={{
-              ...hit,
-              get __hitIndex() {
-                warning(
-                  false,
-                  'The `__hitIndex` property is deprecated. Use the absolute `__position` instead.'
-                );
-                return index;
-              },
-            }}
-            bindEvent={bindEvent}
-            sendEvent={sendEvent}
-          />
-        ))}
-      </ol>
-    </div>
+    <UiHits
+      hits={hits}
+      sendEvent={sendEvent}
+      classNames={cssClasses}
+      itemComponent={({ hit, index }) => (
+        <Template
+          {...templateProps}
+          templateKey="item"
+          rootTagName="li"
+          rootProps={{
+            className: cssClasses.item,
+            onClick: (event: MouseEvent) => {
+              handleInsightsClick(event);
+              sendEvent('click:internal', hit, 'Hit Clicked');
+            },
+            onAuxClick: (event: MouseEvent) => {
+              handleInsightsClick(event);
+              sendEvent('click:internal', hit, 'Hit Clicked');
+            },
+          }}
+          key={hit.objectID}
+          data={{
+            ...hit,
+            get __hitIndex() {
+              warning(
+                false,
+                'The `__hitIndex` property is deprecated. Use the absolute `__position` instead.'
+              );
+              return index;
+            },
+          }}
+          bindEvent={bindEvent}
+          sendEvent={sendEvent}
+        />
+      )}
+    />
   );
 }
diff --git a/packages/react-instantsearch/package.json b/packages/react-instantsearch/package.json
index 1a453ba081..2b3842821e 100644
--- a/packages/react-instantsearch/package.json
+++ b/packages/react-instantsearch/package.json
@@ -49,6 +49,7 @@
   "dependencies": {
     "@babel/runtime": "^7.1.2",
     "instantsearch.js": "4.61.0",
+    "instantsearch-jsx": "1.0.0",
     "react-instantsearch-core": "7.4.0"
   },
   "peerDependencies": {
diff --git a/packages/react-instantsearch/src/ui/Hits.tsx b/packages/react-instantsearch/src/ui/Hits.tsx
index 19c44ebcf7..c6a10c44fc 100644
--- a/packages/react-instantsearch/src/ui/Hits.tsx
+++ b/packages/react-instantsearch/src/ui/Hits.tsx
@@ -1,80 +1,6 @@
-import React from 'react';
+import { createHits } from 'instantsearch-jsx';
+import { createElement } from 'react';
 
-import { cx } from './lib/cx';
-
-import type { Hit } from 'instantsearch.js';
-import type { SendEventForHits } from 'instantsearch.js/es/lib/utils';
-
-export type HitsProps<THit> = React.ComponentProps<'div'> & {
-  hits: THit[];
-  sendEvent: SendEventForHits;
-  hitComponent?: React.JSXElementConstructor<{
-    hit: THit;
-    sendEvent: SendEventForHits;
-  }>;
-  classNames?: Partial<HitsClassNames>;
-};
-
-function DefaultHitComponent({ hit }: { hit: Hit }) {
-  return (
-    <div style={{ wordBreak: 'break-all' }}>
-      {JSON.stringify(hit).slice(0, 100)}…
-    </div>
-  );
-}
-
-export type HitsClassNames = {
-  /**
-   * Class names to apply to the root element
-   */
-  root: string;
-  /**
-   * Class names to apply to the root element without results
-   */
-  emptyRoot: string;
-  /**
-   * Class names to apply to the list element
-   */
-  list: string;
-  /**
-   * Class names to apply to each item element
-   */
-  item: string;
-};
-
-export function Hits<THit extends Hit>({
-  hits,
-  sendEvent,
-  hitComponent: HitComponent = DefaultHitComponent,
-  classNames = {},
-  ...props
-}: HitsProps<THit>) {
-  return (
-    <div
-      {...props}
-      className={cx(
-        'ais-Hits',
-        classNames.root,
-        hits.length === 0 && cx('ais-Hits--empty', classNames.emptyRoot),
-        props.className
-      )}
-    >
-      <ol className={cx('ais-Hits-list', classNames.list)}>
-        {hits.map((hit) => (
-          <li
-            key={hit.objectID}
-            className={cx('ais-Hits-item', classNames.item)}
-            onClick={() => {
-              sendEvent('click:internal', hit, 'Hit Clicked');
-            }}
-            onAuxClick={() => {
-              sendEvent('click:internal', hit, 'Hit Clicked');
-            }}
-          >
-            <HitComponent hit={hit} sendEvent={sendEvent} />
-          </li>
-        ))}
-      </ol>
-    </div>
-  );
-}
+export const Hits = createHits({
+  createElement,
+});
diff --git a/packages/react-instantsearch/src/widgets/Hits.tsx b/packages/react-instantsearch/src/widgets/Hits.tsx
index 5a99c67b67..e7cff6cbe3 100644
--- a/packages/react-instantsearch/src/widgets/Hits.tsx
+++ b/packages/react-instantsearch/src/widgets/Hits.tsx
@@ -3,7 +3,7 @@ import { useHits } from 'react-instantsearch-core';
 
 import { Hits as HitsUiComponent } from '../ui/Hits';
 
-import type { HitsProps as HitsUiComponentProps } from '../ui/Hits';
+import type { HitsProps as HitsUiComponentProps } from 'instantsearch-jsx';
 import type { Hit, BaseHit } from 'instantsearch.js';
 import type { UseHitsProps } from 'react-instantsearch-core';
 
diff --git a/packages/vue-instantsearch/package.json b/packages/vue-instantsearch/package.json
index c4f1a6f3d7..1e9d66fe31 100644
--- a/packages/vue-instantsearch/package.json
+++ b/packages/vue-instantsearch/package.json
@@ -36,6 +36,7 @@
   },
   "dependencies": {
     "instantsearch.js": "4.61.0",
+    "instantsearch-jsx": "1.0.0",
     "mitt": "^2.1.0"
   },
   "peerDependencies": {
diff --git a/packages/vue-instantsearch/src/components/Hits.js b/packages/vue-instantsearch/src/components/Hits.js
new file mode 100644
index 0000000000..3d264ec696
--- /dev/null
+++ b/packages/vue-instantsearch/src/components/Hits.js
@@ -0,0 +1,56 @@
+import { createHits } from 'instantsearch-jsx';
+import { connectHitsWithInsights } from 'instantsearch.js/es/connectors';
+
+import { createSuitMixin } from '../mixins/suit';
+import { createWidgetMixin } from '../mixins/widget';
+import { renderCompat, isVue2 } from '../util/vue-compat';
+
+export default {
+  name: 'AisHits',
+  mixins: [
+    createWidgetMixin(
+      {
+        connector: connectHitsWithInsights,
+      },
+      {
+        $$widgetType: 'ais.hits',
+      }
+    ),
+    createSuitMixin({ name: 'Hits' }),
+  ],
+  props: {
+    escapeHTML: {
+      type: Boolean,
+      default: true,
+    },
+    transformItems: {
+      type: Function,
+      default: undefined,
+    },
+  },
+  computed: {
+    items() {
+      return this.state.hits;
+    },
+    widgetParams() {
+      return {
+        escapeHTML: this.escapeHTML,
+        transformItems: this.transformItems,
+      };
+    },
+  },
+  render: renderCompat(function (h) {
+    if (!this.state) return null;
+
+    return h(createHits({ createElement: h }), {
+      hits: this.state.hits,
+      hitComponent: isVue2 ? this.$scopedSlots.item : this.$slots.item,
+      sendEvent: this.state.sendEvent,
+      classNames: {
+        item: this.suit('item'),
+        list: this.suit('list'),
+        root: this.suit(),
+      },
+    });
+  }),
+};
diff --git a/packages/vue-instantsearch/src/components/Hits.vue b/packages/vue-instantsearch/src/components/Hits.vue
deleted file mode 100644
index 3139b09beb..0000000000
--- a/packages/vue-instantsearch/src/components/Hits.vue
+++ /dev/null
@@ -1,72 +0,0 @@
-<template>
-  <div v-if="state" :class="suit()">
-    <slot
-      :items="items"
-      :insights="state.insights"
-      :send-event="state.sendEvent"
-    >
-      <ol :class="suit('list')">
-        <li
-          v-for="(item, itemIndex) in items"
-          :key="item.objectID"
-          :class="suit('item')"
-          @click="state.sendEvent('click:internal', item, 'Hit Clicked')"
-          @auxclick="state.sendEvent('click:internal', item, 'Hit Clicked')"
-        >
-          <slot
-            name="item"
-            :item="item"
-            :index="itemIndex"
-            :insights="state.insights"
-            :send-event="state.sendEvent"
-          >
-            objectID: {{ item.objectID }}, index: {{ itemIndex }}
-          </slot>
-        </li>
-      </ol>
-    </slot>
-  </div>
-</template>
-
-<script>
-import { connectHitsWithInsights } from 'instantsearch.js/es/connectors';
-
-import { createSuitMixin } from '../mixins/suit';
-import { createWidgetMixin } from '../mixins/widget';
-
-export default {
-  name: 'AisHits',
-  mixins: [
-    createWidgetMixin(
-      {
-        connector: connectHitsWithInsights,
-      },
-      {
-        $$widgetType: 'ais.hits',
-      }
-    ),
-    createSuitMixin({ name: 'Hits' }),
-  ],
-  props: {
-    escapeHTML: {
-      type: Boolean,
-      default: true,
-    },
-    transformItems: {
-      type: Function,
-      default: undefined,
-    },
-  },
-  computed: {
-    items() {
-      return this.state.hits;
-    },
-    widgetParams() {
-      return {
-        escapeHTML: this.escapeHTML,
-        transformItems: this.transformItems,
-      };
-    },
-  },
-};
-</script>
diff --git a/packages/vue-instantsearch/src/util/vue-compat/index-vue2.js b/packages/vue-instantsearch/src/util/vue-compat/index-vue2.js
index 530fb21a45..7695cf044d 100644
--- a/packages/vue-instantsearch/src/util/vue-compat/index-vue2.js
+++ b/packages/vue-instantsearch/src/util/vue-compat/index-vue2.js
@@ -7,9 +7,22 @@ const version = Vue.version;
 
 export { Vue, Vue2, isVue2, isVue3, version };
 
+const augmentCreateElement =
+  (createElement) => (tag, propsWithClassName, children) => {
+    const { className, ...props } = propsWithClassName;
+
+    if (typeof tag === 'function') {
+      return tag(Object.assign(props, { class: className, children }));
+    }
+
+    return createElement(tag, Object.assign(props, { class: className }), [
+      children,
+    ]);
+  };
+
 export function renderCompat(fn) {
   return function (createElement) {
-    return fn.call(this, createElement);
+    return fn.call(this, augmentCreateElement(createElement));
   };
 }
 
diff --git a/packages/vue-instantsearch/src/widgets.js b/packages/vue-instantsearch/src/widgets.js
index 8f0b562738..1a04225e07 100644
--- a/packages/vue-instantsearch/src/widgets.js
+++ b/packages/vue-instantsearch/src/widgets.js
@@ -6,7 +6,7 @@ export { default as AisExperimentalConfigureRelatedItems } from './components/Co
 export { default as AisCurrentRefinements } from './components/CurrentRefinements.vue';
 export { default as AisHierarchicalMenu } from './components/HierarchicalMenu.vue';
 export { default as AisHighlight } from './components/Highlight.vue';
-export { default as AisHits } from './components/Hits.vue';
+export { default as AisHits } from './components/Hits';
 export { default as AisHitsPerPage } from './components/HitsPerPage.vue';
 export { default as AisIndex } from './components/Index';
 export { default as AisInstantSearch } from './components/InstantSearch';