diff --git a/website/docs/debugging.md b/website/docs/debugging.md
index 3d814c7e52..715d77c142 100644
--- a/website/docs/debugging.md
+++ b/website/docs/debugging.md
@@ -17,14 +17,10 @@ export TS_JEST_LOG=ts-jest.log
 
 **Windows**
 
-Command Prompt (cmd)
-
-```
+```Command Prompt tab
 set TS_JEST_LOG=ts-jest.log
 ```
 
-PowerShell
-
-```
+```PowerShell tab
 $env:TS_JEST_LOG = 'ts-jest.log'
 ```
diff --git a/website/docs/getting-started/installation.md b/website/docs/getting-started/installation.md
index 62ea81eec4..ce10bbc49f 100644
--- a/website/docs/getting-started/installation.md
+++ b/website/docs/getting-started/installation.md
@@ -7,18 +7,10 @@ title: Installation
 
 You can install `ts-jest` and dependencies all at once with one of the following commands.
 
-#### NPM
-
-```sh
+```bash npm2yarn
 npm install --save-dev jest typescript ts-jest @types/jest
 ```
 
-#### Yarn
-
-```sh
-yarn add --dev jest typescript ts-jest @types/jest
-```
-
 :::tip
 
 Tip: If you get an error with the following `npm` commands such as `npx: command not found`, you can replace `npx XXX` with `node node_modules/.bin/XXX` from the root of your project.
@@ -34,15 +26,11 @@ To make it transpile TypeScript with `ts-jest`, we will need to create a configu
 
 `ts-jest` can create the configuration file for you automatically:
 
-#### NPM
-
-```sh
+```npm tab
 npx ts-jest config:init
 ```
 
-#### Yarn
-
-```sh
+```Yarn tab
 yarn ts-jest config:init
 ```
 
diff --git a/website/docs/getting-started/options.md b/website/docs/getting-started/options.md
index c7feeb993a..7c32104afd 100644
--- a/website/docs/getting-started/options.md
+++ b/website/docs/getting-started/options.md
@@ -8,27 +8,8 @@ title: Options
 All `ts-jest` specific options can be defined in Jest `transform` config object in the `package.json` file of your project,
 or through a `jest.config.js`, or `jest.config.ts` file.
 
-```json
-// package.json
-{
-  // [...]
-  "jest": {
-    "transform": {
-      "<regex_match_files>": [
-        "ts-jest",
-        {
-          // ts-jest configuration goes here
-        }
-      ]
-    }
-  }
-}
-```
-
-Or through JavaScript:
-
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -42,44 +23,36 @@ module.exports = {
 }
 ```
 
-:::tip
+```ts tab
+import type { JestConfigWithTsJest } from './types'
 
-To utilize IDE suggestions, you can use `JSDoc` comments to provide suggested `ts-jest` configs for your Jest config:
-
-```js
-/** @type {import('ts-jest').JestConfigWithTsJest} */
-module.exports = config = {
+const jestConfig: JestConfigWithTsJest = {
   // [...]
   transform: {
     '<regex_match_files>': [
       'ts-jest',
       {
-        // ts-jest configuration goes here and your IDE will suggest which configs when typing
+        // ts-jest configuration goes here
       },
     ],
   },
 }
 ```
 
-:::
-
-Or through TypeScript (if `ts-node` is installed):
-
-```ts
-// jest.config.ts
-import type { JestConfigWithTsJest } from 'ts-jest'
-
-const config: JestConfigWithTsJest = {
-  transform: {
-    '<regex_match_files>': [
-      'ts-jest',
-      {
-        // ts-jest configuration goes here
-      },
-    ],
-  },
+```JSON tab
+{
+  // [...]
+  "jest": {
+    "transform": {
+      "<regex_match_files>": [
+        "ts-jest",
+        {
+          // ts-jest configuration goes here
+        }
+      ]
+    }
+  }
 }
-export default config
 ```
 
 :::important
diff --git a/website/docs/getting-started/options/astTransformers.md b/website/docs/getting-started/options/astTransformers.md
index 1998f7746d..d42801457e 100644
--- a/website/docs/getting-started/options/astTransformers.md
+++ b/website/docs/getting-started/options/astTransformers.md
@@ -16,8 +16,8 @@ The option is `astTransformers` and it allows ones to specify which 3 types of T
 
 #### Basic Transformers
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -33,8 +33,27 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files>': [
+      'ts-jest',
+      {
+        astTransformers: {
+          before: ['my-custom-transformer'],
+        },
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
@@ -54,8 +73,8 @@ module.exports = {
 
 #### Configuring transformers with options
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -76,8 +95,32 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files>': [
+      'ts-jest',
+      {
+        astTransformers: {
+          before: [
+            {
+              path: 'my-custom-transformer-that-needs-extra-opts',
+              options: {}, // extra options to pass to transformers here
+            },
+          ],
+        },
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
diff --git a/website/docs/getting-started/options/babelConfig.md b/website/docs/getting-started/options/babelConfig.md
index 73a6ee27c4..4cd781ecab 100644
--- a/website/docs/getting-started/options/babelConfig.md
+++ b/website/docs/getting-started/options/babelConfig.md
@@ -14,8 +14,8 @@ The option is `babelConfig` and it works pretty much as the `tsconfig` option, e
 
 #### Use default `babelrc` file
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -29,7 +29,25 @@ module.exports = {
 }
 ```
 
-```json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files>': [
+      'ts-jest',
+      {
+        babelConfig: true,
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 // OR package.json
 {
   // [...]
@@ -50,8 +68,8 @@ module.exports = {
 
 The path should be relative to the current working directory where you start Jest from. You can also use `\<rootDir>` in the path, or use an absolute path (this last one is strongly not recommended).
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -65,23 +83,25 @@ module.exports = {
 }
 ```
 
-```js
-// OR jest.config.js with require for babelrc
-module.exports = {
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
   // [...]
   transform: {
     '<regex_match_files>': [
       'ts-jest',
       {
-        babelConfig: require('./babelrc.test.js'),
+        babelConfig: 'babelrc.test.js',
       },
     ],
   },
 }
+
+export default jestConfig
 ```
 
-```json
-// OR package.json
+```JSON tab
 {
   // [...]
   "jest": {
@@ -97,12 +117,48 @@ module.exports = {
 }
 ```
 
+or importing directly the config file:
+
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
+module.exports = {
+  // [...]
+  transform: {
+    '<regex_match_files>': [
+      'ts-jest',
+      {
+        babelConfig: require('./babelrc.test.js'),
+      },
+    ],
+  },
+}
+```
+
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+import babelConfig from './babelrc.test.js'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files>': [
+      'ts-jest',
+      {
+        babelConfig,
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
 #### Inline compiler options
 
 Refer to the [Babel options](https://babeljs.io/docs/en/next/options) to know what can be used there.
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -119,8 +175,28 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files>': [
+      'ts-jest',
+      {
+        babelConfig: {
+          comments: false,
+          plugins: ['@babel/plugin-transform-for-of'],
+        },
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
diff --git a/website/docs/getting-started/options/compiler.md b/website/docs/getting-started/options/compiler.md
index 0d21700a85..85752446cc 100644
--- a/website/docs/getting-started/options/compiler.md
+++ b/website/docs/getting-started/options/compiler.md
@@ -11,8 +11,8 @@ If you use a custom compiler, such as `ttypescript`, make sure its API is the sa
 
 ### Example
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -26,8 +26,25 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files': [
+      'ts-jest',
+      {
+        compiler: 'ttypescript',
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
diff --git a/website/docs/getting-started/options/diagnostics.md b/website/docs/getting-started/options/diagnostics.md
index 09958e8e00..a46cdae138 100644
--- a/website/docs/getting-started/options/diagnostics.md
+++ b/website/docs/getting-started/options/diagnostics.md
@@ -31,8 +31,8 @@ The `diagnostics` option's value can also accept an object for more advanced con
 
 #### Disabling diagnostics
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -46,8 +46,25 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files': [
+      'ts-jest',
+      {
+        diagnostics: false,
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
@@ -69,8 +86,8 @@ module.exports = {
 
 Assuming all your test files ends with `.spec.ts` or `.test.ts`, using the following config will enable error reporting only for those files:
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -86,7 +103,27 @@ module.exports = {
 }
 ```
 
-```json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files': [
+      'ts-jest',
+      {
+        diagnostics: {
+          exclude: ['!**/*.(spec|test).ts'],
+        },
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 // OR package.json
 {
   // [...]
@@ -109,8 +146,8 @@ module.exports = {
 
 While some diagnostics are stop-blockers for the compilation, most of them are not. If you want the compilation (and so your tests) to continue when encountering those, set the `warnOnly` to `true`:
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -126,8 +163,27 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files': [
+      'ts-jest',
+      {
+        diagnostics: {
+          warnOnly: true,
+        },
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
@@ -154,8 +210,8 @@ All TypeScript error codes can be found [there](https://github.com/Microsoft/Typ
 3. A `string` with a list of the above (example: `"1009, TS2571, 4072"`)
 4. An `array` of one or more from `1` or `3` (example: `[1009, "TS2571", "6031"]`)
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -171,8 +227,27 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files': [
+      'ts-jest',
+      {
+        diagnostics: {
+          ignoreCodes: [2571, 6031, 18003],
+        },
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
diff --git a/website/docs/getting-started/options/isolatedModules.md b/website/docs/getting-started/options/isolatedModules.md
index fa74347415..42583151b7 100644
--- a/website/docs/getting-started/options/isolatedModules.md
+++ b/website/docs/getting-started/options/isolatedModules.md
@@ -12,8 +12,8 @@ Here is how to disable type-checking and compile each file as an isolated module
 
 ### Example
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -27,8 +27,25 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from 'ts-jest'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files': [
+      'ts-jest',
+      {
+        isolatedModules: true,
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
diff --git a/website/docs/getting-started/options/stringifyContentPathRegex.md b/website/docs/getting-started/options/stringifyContentPathRegex.md
index f3302665d0..cd4bbe8053 100644
--- a/website/docs/getting-started/options/stringifyContentPathRegex.md
+++ b/website/docs/getting-started/options/stringifyContentPathRegex.md
@@ -14,20 +14,35 @@ Let's say for example that you have a file `foo.ts` which contains `export defau
 
 In the `jest.config.js` version, you could do as in the `package.json` version of the config, but extending from the preset will ensure more compatibility without any changes when updating.
 
-```js
-// jest.config.js
-// Here `defaults` can be replaced with any other preset
+```js tab
 const { defaults: tsjPreset } = require('ts-jest/presets')
 
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   moduleFileExtensions: [...tsjPreset.moduleFileExtensions, 'html'],
   transform: {
     ...tsjPreset.transform,
-    '\\.html$': 'ts-jest',
+    '\\.html$': [
+      'ts-jest',
+      {
+        stringifyContentPathRegex: /\.html$/,
+      },
+    ],
   },
+}
+```
+
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+import tsJestPresets from 'ts-jest/presets'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  moduleFileExtensions: [...tsJestPresets.defaults.moduleFileExtensions, 'html'],
   transform: {
-    '<regex_match_files': [
+    ...tsJestPresets.defaults.transform,
+    '\\.html$': [
       'ts-jest',
       {
         stringifyContentPathRegex: /\.html$/,
@@ -37,8 +52,7 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```JSON tab
 {
   // [...]
   "jest": {
diff --git a/website/docs/getting-started/options/tsconfig.md b/website/docs/getting-started/options/tsconfig.md
index 062c7f888e..9ff0caff42 100644
--- a/website/docs/getting-started/options/tsconfig.md
+++ b/website/docs/getting-started/options/tsconfig.md
@@ -14,8 +14,8 @@ If you need to use defaults and force `ts-jest` to use the defaults even if ther
 
 The path should be relative to the current working directory where you start Jest from. You can also use `<rootDir>` in the path to start from the project root dir.
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -29,8 +29,25 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.test.json',
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
@@ -51,8 +68,8 @@ module.exports = {
 Refer to the TypeScript [compiler options][] for reference.
 It's basically the same object you'd put in your `tsconfig.json`'s `compilerOptions`.
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -68,8 +85,27 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files': [
+      'ts-jest',
+      {
+        tsconfig: {
+          importHelpers: true,
+        },
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
@@ -91,8 +127,8 @@ module.exports = {
 
 By default `ts-jest` will try to find a `tsconfig.json` in your project. But you may not want to use it at all and keep TypeScript default options. You can achieve this by setting `tsconfig` to `false`.
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -106,8 +142,25 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files': [
+      'ts-jest',
+      {
+        tsconfig: false,
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
diff --git a/website/docs/getting-started/options/useESM.md b/website/docs/getting-started/options/useESM.md
index 9bd28aa794..3f61df9711 100644
--- a/website/docs/getting-started/options/useESM.md
+++ b/website/docs/getting-started/options/useESM.md
@@ -8,8 +8,8 @@ The default value is **false**, `ts-jest` will transform codes to `CommonJS` syn
 
 ### Examples
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -23,8 +23,25 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  transform: {
+    '<regex_match_files': [
+      'ts-jest',
+      {
+        useESM: true,
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
diff --git a/website/docs/getting-started/paths-mapping.md b/website/docs/getting-started/paths-mapping.md
index ab1584623d..579bfa8b40 100644
--- a/website/docs/getting-started/paths-mapping.md
+++ b/website/docs/getting-started/paths-mapping.md
@@ -28,8 +28,8 @@ With the below config in your `tsconfig`:
 
 #### Jest config (without helper)
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   moduleNameMapper: {
@@ -39,8 +39,21 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  moduleNameMapper: {
+    '^@App/(.*)$': '<rootDir>/src/$1',
+    '^lib/(.*)$': '<rootDir>/common/$1',
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
@@ -54,15 +67,30 @@ module.exports = {
 
 #### Jest config (with helper)
 
-```js
-// jest.config.js
+```js tab
 const { pathsToModuleNameMapper } = require('ts-jest')
 // In the following statement, replace `./tsconfig` with the path to your `tsconfig` file
 // which contains the path mapping (ie the `compilerOptions.paths` option):
 const { compilerOptions } = require('./tsconfig')
 
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths /*, { prefix: '<rootDir>/' } */),
 }
 ```
+
+```ts tab
+import { pathsToModuleNameMapper } from 'ts-jest'
+// In the following statement, replace `./tsconfig` with the path to your `tsconfig` file
+// which contains the path mapping (ie the `compilerOptions.paths` option):
+import { compilerOptions } from './tsconfig'
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths /*, { prefix: '<rootDir>/' } */),
+}
+
+export default jestConfig
+```
diff --git a/website/docs/getting-started/presets.md b/website/docs/getting-started/presets.md
index e78a108899..53d347cc39 100644
--- a/website/docs/getting-started/presets.md
+++ b/website/docs/getting-started/presets.md
@@ -33,8 +33,8 @@ Starting from **v28.0.0**, `ts-jest` will gradually opt in adoption of `esbuild`
 In most cases, simply setting the `preset` key to the desired preset name in your Jest config should be enough to start
 using TypeScript with Jest (assuming you added `ts-jest` to your `devDependencies` of course):
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   // Replace `ts-jest` with the preset you want to use
@@ -43,8 +43,20 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  // Replace `ts-jest` with the preset you want to use
+  // from the above list
+  preset: 'ts-jest',
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
@@ -63,8 +75,7 @@ Any preset can also be used with other options.
 If you're already using another preset, you might want only some specific settings from the chosen `ts-jest` preset.
 In this case you'll need to use the JavaScript version of Jest config (comment/uncomment according to your use case):
 
-```js
-// jest.config.js
+```js tab
 const { defaults: tsjPreset } = require('ts-jest/presets')
 // const { defaultsESM: tsjPreset } = require('ts-jest/presets')
 // const { jsWithTs: tsjPreset } = require('ts-jest/presets')
@@ -72,6 +83,7 @@ const { defaults: tsjPreset } = require('ts-jest/presets')
 // const { jsWithBabel: tsjPreset } = require('ts-jest/presets')
 // const { jsWithBabelESM: tsjPreset } = require('ts-jest/presets')
 
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   transform: {
@@ -81,19 +93,17 @@ module.exports = {
 }
 ```
 
-Or through TypeScript (if `ts-node` is installed):
+```ts tab
+import type { JestConfigWithTsJest } from './types'
 
-```ts
-// jest.config.ts
-import type { JestConfigWithTsJest } from 'ts-jest'
 import { defaults as tsjPreset } from 'ts-jest/presets'
-// import { defaultsESM as tsjPreset } from 'ts-jest/presets'
-// import { jsWithTs as tsjPreset } from 'ts-jest/presets'
-// import { jsWithTsESM as tsjPreset } from 'ts-jest/presets'
-// import { jsWithBabel as tsjPreset } from 'ts-jest/presets'
-// import { jsWithBabelESM as tsjPreset } from 'ts-jest/presets'
+// import { defaultsESM as tsjPreset } from 'ts-jest/presets';
+// import { jsWithTs as tsjPreset } from 'ts-jest/presets';
+// import { jsWithTsESM as tsjPreset } from 'ts-jest/presets';
+// import { jsWithBabel as tsjPreset } from 'ts-jest/presets';
+// import { jsWithBabelESM as tsjPreset } from 'ts-jest/presets';
 
-const config: JestConfigWithTsJest = {
+const jestConfig: JestConfigWithTsJest = {
   // [...]
   transform: {
     ...tsjPreset.transform,
@@ -101,5 +111,5 @@ const config: JestConfigWithTsJest = {
   },
 }
 
-export default config
+export default jestConfig
 ```
diff --git a/website/docs/guides/esm-support.md b/website/docs/guides/esm-support.md
index a36682263d..5e78bfa750 100644
--- a/website/docs/guides/esm-support.md
+++ b/website/docs/guides/esm-support.md
@@ -18,8 +18,8 @@ There are also [3 presets](../getting-started/presets.md) to work with ESM.
 
 #### Manual configuration
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   extensionsToTreatAsEsm: ['.ts'],
@@ -37,8 +37,29 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  extensionsToTreatAsEsm: ['.ts'],
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+  transform: {
+    '<regex_match_files': [
+      'ts-jest',
+      {
+        useESM: true,
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
@@ -66,8 +87,8 @@ Starting from **v28.0.0**, `ts-jest` will gradually switch to `esbuild`/`swc` to
 
 :::
 
-```js
-// jest.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   // [...]
   preset: 'ts-jest/presets/default-esm', // or other ESM presets
@@ -85,8 +106,29 @@ module.exports = {
 }
 ```
 
-```json
-// OR package.json
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  // [...]
+  preset: 'ts-jest/presets/default-esm', // or other ESM presets
+  moduleNameMapper: {
+    '^(\\.{1,2}/.*)\\.js$': '$1',
+  },
+  transform: {
+    '<regex_match_files': [
+      'ts-jest',
+      {
+        useESM: true,
+      },
+    ],
+  },
+}
+
+export default jestConfig
+```
+
+```JSON tab
 {
   // [...]
   "jest": {
diff --git a/website/docs/guides/mock-es6-class.md b/website/docs/guides/mock-es6-class.md
index ef9d91573f..07649fc13c 100644
--- a/website/docs/guides/mock-es6-class.md
+++ b/website/docs/guides/mock-es6-class.md
@@ -7,7 +7,15 @@ TypeScript is transpiling your ts file and your module is likely being imported
 `const soundPlayer = require('./sound-player')`. Therefore creating an instance of the class that was exported as
 a default will look like this: `new soundPlayer.default()`. However if you are mocking the class as suggested by the documentation.
 
-```js
+```js tab
+jest.mock('./sound-player', () => {
+  return jest.fn().mockImplementation(() => {
+    return { playSoundFile: mockPlaySoundFile }
+  })
+})
+```
+
+```ts tab
 jest.mock('./sound-player', () => {
   return jest.fn().mockImplementation(() => {
     return { playSoundFile: mockPlaySoundFile }
@@ -24,7 +32,19 @@ TypeError: sound_player_1.default is not a constructor
 because `soundPlayer.default` does not point to a function. Your mock has to return an object which has a property default
 that points to a function.
 
-```js
+```js tab
+jest.mock('./sound-player', () => {
+  return {
+    default: jest.fn().mockImplementation(() => {
+      return {
+        playSoundFile: mockPlaySoundFile,
+      }
+    }),
+  }
+})
+```
+
+```ts tab
 jest.mock('./sound-player', () => {
   return {
     default: jest.fn().mockImplementation(() => {
@@ -38,7 +58,15 @@ jest.mock('./sound-player', () => {
 
 For named imports, like `import { OAuth2 } from './oauth'`, replace `default` with imported module name, `OAuth2` in this example:
 
-```js
+```js tab
+jest.mock('./oauth', () => {
+    return {
+        OAuth2: ... // mock here
+    }
+})
+```
+
+```ts tab
 jest.mock('./oauth', () => {
     return {
         OAuth2: ... // mock here
diff --git a/website/docs/guides/react-native.md b/website/docs/guides/react-native.md
index bbcf14776e..3e238797ea 100644
--- a/website/docs/guides/react-native.md
+++ b/website/docs/guides/react-native.md
@@ -11,13 +11,23 @@ After that, some little modifications will be required as follows:
 
 If you didn't yet, move any Babel config from `.babelrc` to `babel.config.js`. It should at least contain:
 
-```js
-// babel.config.js
+```js tab
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   presets: ['module:metro-react-native-babel-preset'],
 }
 ```
 
+```ts tab
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  presets: ['module:metro-react-native-babel-preset'],
+}
+
+export default jestConfig
+```
+
 ### TypeScript Configuration
 
 Create a new `tsconfig.spec.json` at the root of your project with the following content
@@ -36,10 +46,10 @@ Create a new `tsconfig.spec.json` at the root of your project with the following
 
 In the same way that you moved Babel config, move Jest config from `jest` key of `package.json` to `jest.config.js`. It should look like this:
 
-```js
-// jest.config.js
+```js tab
 const { defaults: tsjPreset } = require('ts-jest/presets')
 
+/** @type {import('ts-jest').JestConfigWithTsJest} */
 module.exports = {
   preset: 'react-native',
   transform: {
@@ -54,3 +64,24 @@ module.exports = {
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
 }
 ```
+
+```ts tab
+import { defaults as tsjPreset } from 'ts-jest/presets'
+import type { JestConfigWithTsJest } from './types'
+
+const jestConfig: JestConfigWithTsJest = {
+  preset: 'react-native',
+  transform: {
+    '^.+\\.jsx$': 'babel-jest',
+    '^.+\\.tsx?$': [
+      'ts-jest',
+      {
+        tsconfig: 'tsconfig.spec.json',
+      },
+    ],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+}
+
+export default jestConfig
+```
diff --git a/website/docs/migration.md b/website/docs/migration.md
index c55c9ee739..5a788a6b0a 100644
--- a/website/docs/migration.md
+++ b/website/docs/migration.md
@@ -7,28 +7,20 @@ You can use the `config:migrate` tool of `ts-jest` CLI if you're coming from an
 
 _If you're using `jest.config.js`:_
 
-### NPM
-
-```sh
+```npm tab
 npx ts-jest config:migrate jest.config.js
 ```
 
-### Yarn
-
-```sh
+```Yarn tab
 yarn ts-jest config:migrate jest.config.js
 ```
 
 _If you're using `jest` config property of `package.json`:_
 
-### NPM
-
-```sh
+```npm tab
 npx ts-jest config:migrate package.json
 ```
 
-### Yarn
-
-```sh
+```Yarn tab
 yarn ts-jest config:migrate package.json
 ```
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index 7cb1138428..dfe4187cb5 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -82,9 +82,15 @@ module.exports = {
       '@docusaurus/preset-classic',
       {
         docs: {
+          showLastUpdateAuthor: true,
+          showLastUpdateTime: true,
           sidebarPath: require.resolve('./sidebars.js'),
           editUrl: 'https://github.com/kulshekhar/ts-jest/edit/main/website',
-          remarkPlugins: [simplePlantUML],
+          remarkPlugins: [
+            simplePlantUML,
+            [require('@docusaurus/remark-plugin-npm2yarn'), { sync: true }],
+            require('docusaurus-remark-plugin-tab-blocks'),
+          ],
         },
         theme: {
           customCss: require.resolve('./src/css/custom.css'),
diff --git a/website/package-lock.json b/website/package-lock.json
index 756eded2d4..01a7571175 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -13,8 +13,10 @@
         "@docusaurus/plugin-ideal-image": "^2.1.0",
         "@docusaurus/plugin-pwa": "^2.1.0",
         "@docusaurus/preset-classic": "^2.1.0",
+        "@docusaurus/remark-plugin-npm2yarn": "^2.1.0",
         "@mdx-js/react": "^1.6.22",
         "clsx": "^1.2.1",
+        "docusaurus-remark-plugin-tab-blocks": "^1.2.0",
         "latest-version": "^7.0.0",
         "react": "^16.14.0",
         "react-dom": "^16.14.0"
@@ -2514,6 +2516,19 @@
         "react": "*"
       }
     },
+    "node_modules/@docusaurus/remark-plugin-npm2yarn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/remark-plugin-npm2yarn/-/remark-plugin-npm2yarn-2.1.0.tgz",
+      "integrity": "sha512-crlbE7XN4m6f5PMW+1K0w1/r6YsJPBHPAnxBu+dwcObBYFKeNnmtci8mBOX/Ey1eeV9wO1yFwaSWKEn1EAbcbQ==",
+      "dependencies": {
+        "npm-to-yarn": "^1.0.1",
+        "tslib": "^2.4.0",
+        "unist-util-visit": "^2.0.3"
+      },
+      "engines": {
+        "node": ">=16.14"
+      }
+    },
     "node_modules/@docusaurus/responsive-loader": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@docusaurus/responsive-loader/-/responsive-loader-1.7.0.tgz",
@@ -6050,6 +6065,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/docusaurus-remark-plugin-tab-blocks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/docusaurus-remark-plugin-tab-blocks/-/docusaurus-remark-plugin-tab-blocks-1.2.0.tgz",
+      "integrity": "sha512-uG8Bac8JGWeuKY8dali3DqiJaGHYE0k2QKmp9h6qYRPdL+1ruUMNQx5lZpJ6sdiUcyOSHYgvNKuJFbfg6ZlH9w==",
+      "dependencies": {
+        "unist-util-is": "^4.0.0",
+        "unist-util-visit": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -9433,6 +9460,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/npm-to-yarn": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-to-yarn/-/npm-to-yarn-1.0.1.tgz",
+      "integrity": "sha512-bp8T8oNMfLW+N/fE0itFfSu7RReytwhqNd9skbkfHfzGYC+5CCdzS2HnaXz6JiG4AlK2eA0qlT6NJN1SoFvcWQ==",
+      "engines": {
+        "node": ">=6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/nebrelbug/npm-to-yarn?sponsor=1"
+      }
+    },
     "node_modules/nprogress": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
@@ -12813,7 +12851,7 @@
     "node_modules/trim": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
-      "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0="
+      "integrity": "sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ=="
     },
     "node_modules/trim-trailing-lines": {
       "version": "1.1.4",
@@ -16225,6 +16263,16 @@
         "prop-types": "^15.6.2"
       }
     },
+    "@docusaurus/remark-plugin-npm2yarn": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/@docusaurus/remark-plugin-npm2yarn/-/remark-plugin-npm2yarn-2.1.0.tgz",
+      "integrity": "sha512-crlbE7XN4m6f5PMW+1K0w1/r6YsJPBHPAnxBu+dwcObBYFKeNnmtci8mBOX/Ey1eeV9wO1yFwaSWKEn1EAbcbQ==",
+      "requires": {
+        "npm-to-yarn": "^1.0.1",
+        "tslib": "^2.4.0",
+        "unist-util-visit": "^2.0.3"
+      }
+    },
     "@docusaurus/responsive-loader": {
       "version": "1.7.0",
       "resolved": "https://registry.npmjs.org/@docusaurus/responsive-loader/-/responsive-loader-1.7.0.tgz",
@@ -18835,6 +18883,15 @@
         "@leichtgewicht/ip-codec": "^2.0.1"
       }
     },
+    "docusaurus-remark-plugin-tab-blocks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/docusaurus-remark-plugin-tab-blocks/-/docusaurus-remark-plugin-tab-blocks-1.2.0.tgz",
+      "integrity": "sha512-uG8Bac8JGWeuKY8dali3DqiJaGHYE0k2QKmp9h6qYRPdL+1ruUMNQx5lZpJ6sdiUcyOSHYgvNKuJFbfg6ZlH9w==",
+      "requires": {
+        "unist-util-is": "^4.0.0",
+        "unist-util-visit": "^2.0.0"
+      }
+    },
     "dom-converter": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz",
@@ -21254,6 +21311,11 @@
         "path-key": "^3.0.0"
       }
     },
+    "npm-to-yarn": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-to-yarn/-/npm-to-yarn-1.0.1.tgz",
+      "integrity": "sha512-bp8T8oNMfLW+N/fE0itFfSu7RReytwhqNd9skbkfHfzGYC+5CCdzS2HnaXz6JiG4AlK2eA0qlT6NJN1SoFvcWQ=="
+    },
     "nprogress": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/nprogress/-/nprogress-0.2.0.tgz",
@@ -23687,7 +23749,7 @@
     "trim": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz",
-      "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0="
+      "integrity": "sha512-YzQV+TZg4AxpKxaTHK3c3D+kRDCGVEE7LemdlQZoQXn0iennk10RsIoY6ikzAqJTc9Xjl9C1/waHom/J86ziAQ=="
     },
     "trim-trailing-lines": {
       "version": "1.1.4",
diff --git a/website/package.json b/website/package.json
index bdc60d01e2..fb26a4d8a4 100644
--- a/website/package.json
+++ b/website/package.json
@@ -17,8 +17,10 @@
     "@docusaurus/plugin-ideal-image": "^2.1.0",
     "@docusaurus/plugin-pwa": "^2.1.0",
     "@docusaurus/preset-classic": "^2.1.0",
+    "@docusaurus/remark-plugin-npm2yarn": "^2.1.0",
     "@mdx-js/react": "^1.6.22",
     "clsx": "^1.2.1",
+    "docusaurus-remark-plugin-tab-blocks": "^1.2.0",
     "latest-version": "^7.0.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0"