diff --git a/docs/pages/core/add-passkey.mdx b/docs/pages/core/add-passkey.mdx
index c9c7792649..947cd48ebb 100644
--- a/docs/pages/core/add-passkey.mdx
+++ b/docs/pages/core/add-passkey.mdx
@@ -30,8 +30,6 @@ const signerSubscription = watchSignerStatus(config)(async (status) => {
 });
 ```
 
-```ts twoslash [config.ts] filename="config.ts"
-// [!include ~/shared/core/config.ts]
-```
+<Markdown src="../../shared/core/config.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/core/authenticate-users.mdx b/docs/pages/core/authenticate-users.mdx
index 31b12c9b20..ca7057f1b0 100644
--- a/docs/pages/core/authenticate-users.mdx
+++ b/docs/pages/core/authenticate-users.mdx
@@ -44,9 +44,7 @@ if (!bundle) {
 await signer.authenticate({ type: "email", bundle });
 ```
 
-```ts twoslash [config.ts] filename="config.ts"
-// [!include ~/shared/core/config.ts]
-```
+<Markdown src="../../shared/core/config.mdx" />
 
 </CodeBlocks>
 
@@ -85,9 +83,7 @@ await signer.authenticate({
 });
 ```
 
-```ts twoslash [config.ts] filename="config.ts"
-// [!include ~/shared/core/config.ts]
-```
+<Markdown src="../../shared/core/config.mdx" />
 
 </CodeBlocks>
 
@@ -120,9 +116,7 @@ await signer.authenticate({
 });
 ```
 
-```ts twoslash [config.ts] filename="config.ts"
-// [!include ~/shared/core/config.ts]
-```
+<Markdown src="../../shared/core/config.mdx" />
 
 </CodeBlocks>
 
@@ -150,8 +144,6 @@ await signer.authenticate({
 });
 ```
 
-```ts twoslash [client.ts] filename="client.ts"
-// [!include ~/shared/core/config.ts]
-```
+<Markdown src="../../shared/core/config.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/core/quickstart.mdx b/docs/pages/core/quickstart.mdx
index c1600bfade..79a8307b5d 100644
--- a/docs/pages/core/quickstart.mdx
+++ b/docs/pages/core/quickstart.mdx
@@ -43,9 +43,7 @@ npm i -s @account-kit/core @account-kit/infra
 Now, you're ready to create a config. The config we create should be a static object that you can import anywhere into your application. It contains all of the state that the functions within
 this package use.
 
-```ts twoslash
-// [!include ~/shared/core/config.ts]
-```
+<Markdown src="../../shared/core/config.mdx" />
 
 ## Authenticate the user
 
@@ -84,9 +82,7 @@ if (!bundle) {
 await signer.authenticate({ type: "email", bundle });
 ```
 
-```ts twoslash [config.ts] filename="config.ts"
-// [!include ~/shared/core/config.ts]
-```
+<Markdown src="../../shared/core/config.mdx" />
 
 </CodeBlocks>
 
@@ -131,9 +127,7 @@ await client.sendUserOperation({
 });
 ```
 
-```ts twoslash [client.ts] filename="client.ts"
-// [!include ~/shared/core/config.ts]
-```
+<Markdown src="../../shared/core/config.mdx" />
 
 </CodeBlocks>
 
diff --git a/docs/pages/core/send-user-operations.mdx b/docs/pages/core/send-user-operations.mdx
index 6463ee06cd..645e7566f7 100644
--- a/docs/pages/core/send-user-operations.mdx
+++ b/docs/pages/core/send-user-operations.mdx
@@ -56,9 +56,7 @@ await client.sendUserOperation({
 });
 ```
 
-```ts twoslash [config.ts] filename="config.ts"
-// [!include ~/shared/core/config.ts]
-```
+<Markdown src="../../shared/core/config.mdx" />
 
 </CodeBlocks>
 
@@ -112,8 +110,6 @@ await client.sendUserOperation({
 });
 ```
 
-```ts twoslash [config.ts] filename="config.ts"
-// [!include ~/shared/core/config.ts]
-```
+<Markdown src="../../shared/core/config.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/core/sponsor-gas.mdx b/docs/pages/core/sponsor-gas.mdx
index c477f680ee..bf7fc0bb3f 100644
--- a/docs/pages/core/sponsor-gas.mdx
+++ b/docs/pages/core/sponsor-gas.mdx
@@ -72,9 +72,7 @@ const clientSubscription = watchSmartAccountClient(
 // .. do stuff with the client state
 ```
 
-```ts twoslash [config.ts] filename="config.ts"
-// [!include ~/shared/core/config.ts]
-```
+<Markdown src="../../shared/core/config.mdx" />
 
 </CodeBlocks>
 
diff --git a/docs/pages/core/ssr.mdx b/docs/pages/core/ssr.mdx
index cd29a8be4a..9f401defcf 100644
--- a/docs/pages/core/ssr.mdx
+++ b/docs/pages/core/ssr.mdx
@@ -44,9 +44,7 @@ if (typeof window !== "undefined") {
 }
 ```
 
-```ts twoslash [config.ts] filename="config.ts"
-// [!include ~/shared/core/ssr-config.ts]
-```
+<Markdown src="../../shared/core/ssr-config.mdx" />
 
 </CodeBlocks>
 
diff --git a/docs/pages/infra/drop-and-replace.mdx b/docs/pages/infra/drop-and-replace.mdx
index 9a22759186..8c38b84fc2 100644
--- a/docs/pages/infra/drop-and-replace.mdx
+++ b/docs/pages/infra/drop-and-replace.mdx
@@ -35,9 +35,7 @@ try {
 }
 ```
 
-```ts twoslash [client.ts] filename="client.ts"
-// [!include ~/shared/infra/client.ts]
-```
+<Markdown src="../../shared/infra/client.mdx" />
 
 </CodeBlocks>
 
diff --git a/docs/pages/infra/quickstart.mdx b/docs/pages/infra/quickstart.mdx
index c203e93f3a..72b8c60442 100644
--- a/docs/pages/infra/quickstart.mdx
+++ b/docs/pages/infra/quickstart.mdx
@@ -50,9 +50,7 @@ Now that you have an API key and a Policy ID, you can create a [Smart Account Cl
   above.
 </Warning>
 
-```ts twoslash
-// [!include ~/shared/infra/client.ts]
-```
+<Markdown src="../../shared/infra/client.mdx" />
 
 ## Send a user operation
 
@@ -72,8 +70,6 @@ const { hash } = await client.sendUserOperation({
 });
 ```
 
-```ts twoslash [client.ts] filename="client.ts"
-// [!include ~/shared/infra/client.ts]
-```
+<Markdown src="../../shared/infra/client.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/infra/send-user-operations.mdx b/docs/pages/infra/send-user-operations.mdx
index 86cb07b319..e78bd08c30 100644
--- a/docs/pages/infra/send-user-operations.mdx
+++ b/docs/pages/infra/send-user-operations.mdx
@@ -25,9 +25,7 @@ const { hash } = await client.sendUserOperation({
 });
 ```
 
-```ts twoslash [client.ts] filename="client.ts"
-// [!include ~/shared/infra/client.ts]
-```
+<Markdown src="../../shared/infra/client.mdx" />
 
 </CodeBlocks>
 
@@ -56,8 +54,6 @@ const { hash } = await client.sendUserOperation({
 });
 ```
 
-```ts twoslash [client.ts] filename="client.ts"
-// [!include ~/shared/infra/client.ts]
-```
+<Markdown src="../../shared/infra/client.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/infra/sponsor-gas.mdx b/docs/pages/infra/sponsor-gas.mdx
index 9eb0eed801..971bf15d7e 100644
--- a/docs/pages/infra/sponsor-gas.mdx
+++ b/docs/pages/infra/sponsor-gas.mdx
@@ -18,9 +18,7 @@ how to use other paymaster providers as well.
 
 Now you can create a Smart Account Client which is configured to sponsor gas.
 
-```ts twoslash
-// [!include ~/shared/infra/client.ts]
-```
+<Markdown src="../../shared/infra/client.mdx" />
 
 ### 3. Send a user operation with gas sponsorship
 
@@ -38,9 +36,7 @@ const { hash } = await client.sendUserOperation({
 });
 ```
 
-```ts twoslash [client.ts] filename="client.ts"
-// [!include ~/shared/infra/client.ts]
-```
+<Markdown src="../../shared/infra/client.mdx" />
 
 </CodeBlocks>
 
diff --git a/docs/pages/react-native/signer/authenticating-users/setting-up-the-accounts-provider.mdx b/docs/pages/react-native/signer/authenticating-users/setting-up-the-accounts-provider.mdx
index 05246eb24f..9854791ee0 100644
--- a/docs/pages/react-native/signer/authenticating-users/setting-up-the-accounts-provider.mdx
+++ b/docs/pages/react-native/signer/authenticating-users/setting-up-the-accounts-provider.mdx
@@ -16,13 +16,7 @@ Here's an example of how to do this:
 
 <CodeBlocks>
 
-```tsx [_layout.tsx (Expo)] twoslash
-// [!include ~/shared/react-native/account-provider-setup.tsx]
-```
-
-```tsx [App.tsx (Bare React Native)] twoslash
-// [!include ~/shared/react-native/account-provider-setup.tsx]
-```
+<Markdown src="../../../../shared/react-native/account-provider-setup.mdx" />
 
 </CodeBlocks>
 
diff --git a/docs/pages/signer/as-an-eoa.mdx b/docs/pages/signer/as-an-eoa.mdx
index 6e7b522270..f4cc67fe1a 100644
--- a/docs/pages/signer/as-an-eoa.mdx
+++ b/docs/pages/signer/as-an-eoa.mdx
@@ -33,8 +33,6 @@ export const walletClient = createWalletClient({
 });
 ```
 
-```ts twoslash [signer.ts] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/signer/authentication/add-passkey.mdx b/docs/pages/signer/authentication/add-passkey.mdx
index 77290baf41..698c318c05 100644
--- a/docs/pages/signer/authentication/add-passkey.mdx
+++ b/docs/pages/signer/authentication/add-passkey.mdx
@@ -21,8 +21,6 @@ import { signer } from "./signer";
 await signer.addPasskey({});
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/signer/authentication/auth0.mdx b/docs/pages/signer/authentication/auth0.mdx
index 08452968a1..f7b8f559a6 100644
--- a/docs/pages/signer/authentication/auth0.mdx
+++ b/docs/pages/signer/authentication/auth0.mdx
@@ -59,8 +59,6 @@ await authenticate({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/signer/authentication/email-magic-link.mdx b/docs/pages/signer/authentication/email-magic-link.mdx
index bfeda656e6..06c3f10e6a 100644
--- a/docs/pages/signer/authentication/email-magic-link.mdx
+++ b/docs/pages/signer/authentication/email-magic-link.mdx
@@ -46,8 +46,6 @@ await signer.authenticate({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/signer/authentication/email-otp.mdx b/docs/pages/signer/authentication/email-otp.mdx
index e702af653e..b53199442b 100644
--- a/docs/pages/signer/authentication/email-otp.mdx
+++ b/docs/pages/signer/authentication/email-otp.mdx
@@ -33,8 +33,6 @@ await signer.authenticate({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/signer/authentication/mfa.mdx b/docs/pages/signer/authentication/mfa.mdx
index 126ab7a875..0d6ba385f6 100644
--- a/docs/pages/signer/authentication/mfa.mdx
+++ b/docs/pages/signer/authentication/mfa.mdx
@@ -35,9 +35,7 @@ const totpUrl = result?.multiFactors[0].multiFactorTotpUrl;
 const multiFactorId = result?.multiFactors[0].multiFactorId;
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
 
@@ -58,9 +56,7 @@ await signer.verifyMfa({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
 
@@ -78,9 +74,7 @@ await signer.removeMfa({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
 
@@ -94,9 +88,7 @@ import { signer } from "./signer";
 const { multiFactors } = await signer.getMfaFactors();
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
 
@@ -116,9 +108,7 @@ signer.authenticate({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
 
@@ -135,9 +125,7 @@ signer.authenticate({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
 
@@ -153,9 +141,7 @@ const user = await signer?.validateMultiFactors({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
 
@@ -205,9 +191,7 @@ try {
 }
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
 
@@ -236,8 +220,6 @@ await signer.authenticate({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/signer/authentication/passkey-login.mdx b/docs/pages/signer/authentication/passkey-login.mdx
index 71ad366e58..6ad3d6afa0 100644
--- a/docs/pages/signer/authentication/passkey-login.mdx
+++ b/docs/pages/signer/authentication/passkey-login.mdx
@@ -28,9 +28,7 @@ const result = await signer.authenticate({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
 
@@ -47,8 +45,6 @@ const result = await signer.authenticate({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/signer/authentication/passkey-signup.mdx b/docs/pages/signer/authentication/passkey-signup.mdx
index 67999bb37a..51848912fc 100644
--- a/docs/pages/signer/authentication/passkey-signup.mdx
+++ b/docs/pages/signer/authentication/passkey-signup.mdx
@@ -30,8 +30,6 @@ const result = await signer.authenticate({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/signer/authentication/social-login.mdx b/docs/pages/signer/authentication/social-login.mdx
index 265e5f96c6..e42e4ea020 100644
--- a/docs/pages/signer/authentication/social-login.mdx
+++ b/docs/pages/signer/authentication/social-login.mdx
@@ -28,8 +28,6 @@ await signer.authenticate({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/signer/export-private-key.mdx b/docs/pages/signer/export-private-key.mdx
index b8d317133b..3f7d11d856 100644
--- a/docs/pages/signer/export-private-key.mdx
+++ b/docs/pages/signer/export-private-key.mdx
@@ -103,8 +103,6 @@ export const ExportPrivateKeyView = () => {
 };
 ```
 
-```ts twoslash [signer.ts] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/signer/quickstart.mdx b/docs/pages/signer/quickstart.mdx
index dbd0d86770..9d3cf2bf20 100644
--- a/docs/pages/signer/quickstart.mdx
+++ b/docs/pages/signer/quickstart.mdx
@@ -34,9 +34,7 @@ yarn add @account-kit/signer
 
 ## Create a signer instance
 
-```ts twoslash
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../shared/signer/signer.mdx" />
 
 ## Authenticate a user
 
@@ -58,9 +56,7 @@ const result = await signer.authenticate({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
 
@@ -83,8 +79,6 @@ const account = await createLightAccount({
 });
 ```
 
-```ts twoslash [signer] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/signer/user-sessions.mdx b/docs/pages/signer/user-sessions.mdx
index d1f193c5bc..a5086af181 100644
--- a/docs/pages/signer/user-sessions.mdx
+++ b/docs/pages/signer/user-sessions.mdx
@@ -21,9 +21,7 @@ import { signer } from "./signer";
 const user = await signer.getAuthDetails().catch(() => null);
 ```
 
-```ts twoslash [signer.ts] filename="signer.ts"
-// [!include ~/shared/signer/signer.ts]
-```
+<Markdown src="../../shared/signer/signer.mdx" />
 
 </CodeBlocks>
 
diff --git a/docs/pages/smart-contracts/other-accounts/light-account/multi-owner-light-account.mdx b/docs/pages/smart-contracts/other-accounts/light-account/multi-owner-light-account.mdx
index 90770e56ed..209a2ee8bc 100644
--- a/docs/pages/smart-contracts/other-accounts/light-account/multi-owner-light-account.mdx
+++ b/docs/pages/smart-contracts/other-accounts/light-account/multi-owner-light-account.mdx
@@ -36,9 +36,7 @@ import { multiOwnerLightAccountClient } from "./client";
 const owners = await multiOwnerLightAccountClient.account.getOwnerAddresses();
 ```
 
-```ts [client.ts] twoslash filename="client.ts"
-// [!include ~/shared/smart-contracts/multi-owner-light-account-client.ts]
-```
+<Markdown src="../../../../shared/smart-contracts/multi-owner-light-account-client.mdx" />
 
 </CodeBlocks>
 
@@ -65,8 +63,6 @@ const txHash =
   });
 ```
 
-```ts [client.ts] twoslash filename="client.ts"
-// [!include ~/shared/smart-contracts/multi-owner-light-account-client.ts]
-```
+<Markdown src="../../../../shared/smart-contracts/multi-owner-light-account-client.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/smart-contracts/other-accounts/light-account/transfer-ownership-light-account.mdx b/docs/pages/smart-contracts/other-accounts/light-account/transfer-ownership-light-account.mdx
index 97e4a27252..96ef726831 100644
--- a/docs/pages/smart-contracts/other-accounts/light-account/transfer-ownership-light-account.mdx
+++ b/docs/pages/smart-contracts/other-accounts/light-account/transfer-ownership-light-account.mdx
@@ -48,9 +48,7 @@ const transferredClient = await createLightAccountClient({
 });
 ```
 
-```ts [client.ts] twoslash filename="client.ts"
-// [!include ~/shared/smart-contracts/light-account-client.ts]
-```
+<Markdown src="../../../../shared/smart-contracts/light-account-client.mdx" />
 
 </CodeBlocks>
 
@@ -77,9 +75,7 @@ const result = await lightAccountClient.sendUserOperation({
 await lightAccountClient.waitForUserOperationTransaction(result);
 ```
 
-```ts [client.ts] twoslash filename="client.ts"
-// [!include ~/shared/smart-contracts/light-account-client.ts]
-```
+<Markdown src="../../../../shared/smart-contracts/light-account-client.mdx" />
 
 </CodeBlocks>
 
diff --git a/docs/pages/smart-contracts/other-accounts/modular-account/manage-ownership-mav1.mdx b/docs/pages/smart-contracts/other-accounts/modular-account/manage-ownership-mav1.mdx
index 2b46b58af1..075daf62c6 100644
--- a/docs/pages/smart-contracts/other-accounts/modular-account/manage-ownership-mav1.mdx
+++ b/docs/pages/smart-contracts/other-accounts/modular-account/manage-ownership-mav1.mdx
@@ -58,9 +58,7 @@ const isOwner = await modularAccountClient.isOwnerOf({
 });
 ```
 
-```ts [client.ts] filename="client.ts" twoslash
-// [!include ~/shared/smart-contracts/modular-account-client.ts]
-```
+<Markdown src="../../../../shared/smart-contracts/modular-account-client.mdx" />
 
 </CodeBlocks>
 
@@ -77,9 +75,7 @@ import { modularAccountClient } from "./client";
 const owners = await modularAccountClient.readOwners();
 ```
 
-```ts [client.ts] filename="client.ts" twoslash
-// [!include ~/shared/smart-contracts/modular-account-client.ts]
-```
+<Markdown src="../../../../shared/smart-contracts/modular-account-client.mdx" />
 
 </CodeBlocks>
 
@@ -104,8 +100,6 @@ const txHash = await modularAccountClient.waitForUserOperationTransaction(
 );
 ```
 
-```ts [client.ts]  filename="client.ts" twoslash
-// [!include ~/shared/smart-contracts/modular-account-client.ts]
-```
+<Markdown src="../../../../shared/smart-contracts/modular-account-client.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/smart-contracts/other-accounts/modular-account/manage-plugins/get-installed-plugins.mdx b/docs/pages/smart-contracts/other-accounts/modular-account/manage-plugins/get-installed-plugins.mdx
index ff73e3a390..4b1808e338 100644
--- a/docs/pages/smart-contracts/other-accounts/modular-account/manage-plugins/get-installed-plugins.mdx
+++ b/docs/pages/smart-contracts/other-accounts/modular-account/manage-plugins/get-installed-plugins.mdx
@@ -59,9 +59,7 @@ console.log(JSON.stringify(metadata, null, 2));
 // }
 ```
 
-```ts [client.ts] twoslash filename="client.ts"
-// [!include ~/shared/smart-contracts/modular-account-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/modular-account-client.mdx" />
 
 </CodeBlocks>
 
diff --git a/docs/pages/smart-contracts/other-accounts/modular-account/manage-plugins/install-plugins.mdx b/docs/pages/smart-contracts/other-accounts/modular-account/manage-plugins/install-plugins.mdx
index 721dc7c262..c15448b5c5 100644
--- a/docs/pages/smart-contracts/other-accounts/modular-account/manage-plugins/install-plugins.mdx
+++ b/docs/pages/smart-contracts/other-accounts/modular-account/manage-plugins/install-plugins.mdx
@@ -62,9 +62,7 @@ const { hash } = await sessionKeyExtendedClient.installSessionKeyPlugin({
 await client.waitForUserOperationTransaction({ hash });
 ```
 
-```ts [client.ts] twoslash filename="client.ts"
-// [!include ~/shared/smart-contracts/modular-account-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/modular-account-client.mdx" />
 
 </CodeBlocks>
 
@@ -99,9 +97,7 @@ const { hash } = await modularAccountClient.uninstallPlugin({
 await modularAccountClient.waitForUserOperationTransaction({ hash });
 ```
 
-```ts [client.ts] twoslash filename="client.ts"
-// [!include ~/shared/smart-contracts/modular-account-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/modular-account-client.mdx" />
 
 </CodeBlocks>
 
diff --git a/docs/pages/smart-contracts/other-accounts/modular-account/multisig-plugin/getting-started.mdx b/docs/pages/smart-contracts/other-accounts/modular-account/multisig-plugin/getting-started.mdx
index 89f421d1a5..4453ffe87e 100644
--- a/docs/pages/smart-contracts/other-accounts/modular-account/multisig-plugin/getting-started.mdx
+++ b/docs/pages/smart-contracts/other-accounts/modular-account/multisig-plugin/getting-started.mdx
@@ -16,9 +16,7 @@ If you have an existing Modular Account (which has multi-owner plugin by default
 
 </Warning>
 
-```ts twoslash
-// [!include ~/shared/smart-contracts/multisig-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/multisig-client.mdx" />
 
 ## 3. Propose a User Operation
 
@@ -42,9 +40,7 @@ const {
 });
 ```
 
-```ts twoslash [client.ts] filename="client.ts"
-// [!include ~/shared/smart-contracts/multisig-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/multisig-client.mdx" />
 
 </CodeBlocks>
 
@@ -75,9 +71,7 @@ const { aggregatedSignature, signatureObj: secondSig } =
   });
 ```
 
-```ts twoslash [client.ts] filename="client.ts"
-// [!include ~/shared/smart-contracts/multisig-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/multisig-client.mdx" />
 
 </CodeBlocks>
 
@@ -110,9 +104,7 @@ const result = await multisigAccountClient.sendUserOperation({
 });
 ```
 
-```ts twoslash [client.ts] filename="client.ts"
-// [!include ~/shared/smart-contracts/multisig-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/multisig-client.mdx" />
 
 </CodeBlocks>
 
@@ -140,9 +132,7 @@ const result = await multisigAccountClient.sendUserOperation({
 });
 ```
 
-```ts twoslash [client.ts] filename="client.ts"
-// [!include ~/shared/smart-contracts/multisig-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/multisig-client.mdx" />
 
 </CodeBlocks>
 
diff --git a/docs/pages/smart-contracts/other-accounts/modular-account/session-keys/getting-started.mdx b/docs/pages/smart-contracts/other-accounts/modular-account/session-keys/getting-started.mdx
index db4871094d..17c2628302 100644
--- a/docs/pages/smart-contracts/other-accounts/modular-account/session-keys/getting-started.mdx
+++ b/docs/pages/smart-contracts/other-accounts/modular-account/session-keys/getting-started.mdx
@@ -12,9 +12,7 @@ We also export the necessary decorators which can be used to extend your `modula
 
 Let's take a look at a full example that demonstrates how to use session keys with a Modular Account.
 
-```ts twoslash
-// [!include ~/shared/smart-contracts/session-keys/full-example.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/session-keys/full-example.mdx" />
 
 ## Breaking it down
 
@@ -45,9 +43,7 @@ import { sessionKeyPluginActions } from "@account-kit/smart-contracts";
 const extendedClient = modularAccountClient.extend(sessionKeyPluginActions);
 ```
 
-```ts [client.ts] filename="client.ts" twoslash
-// [!include ~/shared/smart-contracts/modular-account-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/modular-account-client.mdx" />
 
 </CodeBlocks>
 
@@ -79,9 +75,7 @@ const isPluginInstalled = await modularAccountClient
   .then((x) => x.includes(SessionKeyPlugin.meta.addresses[chain.id]));
 ```
 
-```ts [client.ts] filename="client.ts" twoslash
-// [!include ~/shared/smart-contracts/modular-account-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/modular-account-client.mdx" />
 
 </CodeBlocks>
 
@@ -137,9 +131,7 @@ if (!isPluginInstalled) {
 }
 ```
 
-```ts [client.ts] filename="client.ts" twoslash
-// [!include ~/shared/smart-contracts/modular-account-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/modular-account-client.mdx" />
 
 </CodeBlocks>
 
@@ -164,7 +156,7 @@ import {
 
 const extendedClient = modularAccountClient.extend(sessionKeyPluginActions);
 
-//---cut---
+// ---cut---
 import { SessionKeyPermissionsBuilder } from "@account-kit/smart-contracts";
 
 const initialPermissions =
@@ -177,9 +169,7 @@ const result = await extendedClient.updateKeyPermissions({
 });
 ```
 
-```ts [client.ts] filename="client.ts" twoslash
-// [!include ~/shared/smart-contracts/modular-account-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/modular-account-client.mdx" />
 
 </CodeBlocks>
 
@@ -211,9 +201,7 @@ const result = await client.addSessionKey({
 });
 ```
 
-```ts [base-client.ts] filename="base-client.ts" twoslash
-// [!include ~/shared/smart-contracts/session-keys/base-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/session-keys/base-client.mdx" />
 
 </CodeBlocks>
 
@@ -231,9 +219,7 @@ const result = await client.removeSessionKey({
 });
 ```
 
-```ts [base-client.ts] filename="base-client.ts" twoslash
-// [!include ~/shared/smart-contracts/session-keys/base-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/session-keys/base-client.mdx" />
 
 </CodeBlocks>
 
@@ -260,9 +246,7 @@ const result = await client.updateSessionKeyPermissions({
 });
 ```
 
-```ts [base-client.ts] filename="base-client.ts" twoslash
-// [!include ~/shared/smart-contracts/session-keys/base-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/session-keys/base-client.mdx" />
 
 </CodeBlocks>
 
@@ -281,8 +265,6 @@ const result = await client.rotateSessionKey({
 });
 ```
 
-```ts [base-client.ts] filename="base-client.ts" twoslash
-// [!include ~/shared/smart-contracts/session-keys/base-client.ts]
-```
+<Markdown src="../../../../../shared/smart-contracts/session-keys/base-client.mdx" />
 
 </CodeBlocks>
diff --git a/docs/pages/smart-contracts/other-accounts/modular-account/session-keys/supported-permissions.mdx b/docs/pages/smart-contracts/other-accounts/modular-account/session-keys/supported-permissions.mdx
index 744672aee4..7cf5a52453 100644
--- a/docs/pages/smart-contracts/other-accounts/modular-account/session-keys/supported-permissions.mdx
+++ b/docs/pages/smart-contracts/other-accounts/modular-account/session-keys/supported-permissions.mdx
@@ -58,19 +58,43 @@ The permissions data may be specified in 3 places:
 #### Generating the permissions
 
 ```ts
-// [!include ~/shared/smart-contracts/session-keys/supported-permissions.ts:generatepermissions]
+// Let's create an initial permission set for the session key giving it an eth spend limit
+const keyPermissions = new SessionKeyPermissionsBuilder()
+  .setNativeTokenSpendLimit({
+    spendLimit: 1000000n,
+  })
+  // this will allow the session key plugin to interact with all addresses
+  .setContractAccessControlType(SessionKeyAccessListType.ALLOW_ALL_ACCESS)
+  .setTimeRange({
+    validFrom: Math.round(Date.now() / 1000),
+    // valid for 1 hour
+    validUntil: Math.round(Date.now() / 1000 + 60 * 60),
+  });
 ```
 
 #### Example: Permissions in plugin install data
 
 ```ts
-// [!include ~/shared/smart-contracts/session-keys/supported-permissions.ts:permissionsinplugininstall]
+const result = await client.installSessionKeyPlugin({
+  // 1st arg is the initial set of session keys
+  // 2nd arg is the tags for the session keys
+  // 3rd arg is the initial set of permissions
+  args: [
+    [await sessionKeySigner.getAddress()],
+    [zeroHash],
+    [keyPermissions.encode()],
+  ],
+});
 ```
 
 #### Example: Initial permissions for a new key
 
 ```ts
-// [!include ~/shared/smart-contracts/session-keys/supported-permissions.ts:permissionsinadd]
+const result = await client.addSessionKey({
+  key: "0x1234123412341234123412341234123412341234", // Session key address
+  tag: keccak256(new TextEncoder().encode("session-key-tag")), // Session key tag
+  permissions: keyPermissions.encode(), // Initial permissions
+});
 ```
 
 #### Exmaple: Updating a session key's permissions
@@ -78,7 +102,17 @@ The permissions data may be specified in 3 places:
 This example updates a key's time range, but leaves other permissions to their current values.
 
 ```ts
-// [!include ~/shared/smart-contracts/session-keys/supported-permissions.ts:permissionsinupdate]
+const result = await client.updateSessionKeyPermissions({
+  key: "0x1234123412341234123412341234123412341234", // Session key address
+  // add other permissions to the builder, if needed
+  permissions: new SessionKeyPermissionsBuilder()
+    .setTimeRange({
+      validFrom: Math.round(Date.now() / 1000),
+      // valid for 1 hour
+      validUntil: Math.round(Date.now() / 1000 + 60 * 60),
+    })
+    .encode(),
+});
 ```
 
 ### Permissions Builder full reference
@@ -98,7 +132,102 @@ You may wish to view the current permissions of a given session key. This can be
 Here's an example of viewing all permissions in TypeScript:
 
 ```ts
-// [!include ~/shared/smart-contracts/session-keys/supported-permissions.ts:viewpermissions]
+const sessionKeyPluginView = SessionKeyPlugin.getContract(client).read;
+const accountAddress = client.getAddress();
+const sessionKeyAddress = await sessionKeySigner.getAddress();
+
+const exampleTargetAddress = "0x4567456745674567456745674567456745674567";
+const exampleTargetSelector = "0x78907890";
+const exampleERC20Address = "0xabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd";
+
+// Using session key permissions view functions
+
+// The key's current access control type. One of:
+// - SessionKeyAccessListType.ALLOWLIST
+// - SessionKeyAccessListType.DENYLIST
+// - SessionKeyAccessListType.ALLOW_ALL_ACCESS
+const accessControlType = await sessionKeyPluginView.getAccessControlType([
+  accountAddress,
+  sessionKeyAddress,
+]);
+
+// - Whether or not the address is on the access control list (either allowlist or denylist, depending on setting).
+// - Whether or not the function selectors should be checked for the target address (checked according to the access control type).
+const [isTargetAddressOnList, checkSelectors] =
+  await sessionKeyPluginView.getAccessControlEntry([
+    accountAddress,
+    sessionKeyAddress,
+    exampleTargetAddress,
+  ]);
+
+// Whether or not the selector is on the access control list
+const isTargetSelectorOnList =
+  await sessionKeyPluginView.isSelectorOnAccessControlList([
+    accountAddress,
+    sessionKeyAddress,
+    exampleTargetAddress,
+    exampleTargetSelector,
+  ]);
+
+// The start and end timestamp of a key.
+// If either is zero, that means the value is unset.
+const [validAfter, validUntil] = await sessionKeyPluginView.getKeyTimeRange([
+  accountAddress,
+  sessionKeyAddress,
+]);
+
+// The native token spending limit of a key. Details below
+const nativeTokenSpendingLimit =
+  await sessionKeyPluginView.getNativeTokenSpendLimitInfo([
+    accountAddress,
+    sessionKeyAddress,
+  ]);
+
+const {
+  hasLimit: hasNativeTokenSpendLimit, // Whether or not a native token spending limit is enforced on the session key
+  limit: nativeTokenSpendLimit, // The limit's maximum value. If a refresh interval is set, this is the max per interval.
+  limitUsed: nativeTokenSpendLimitUsed, // How much of the limit is used. If a refresh interval is set, this is the amount used in the current interval.
+  refreshInterval: nativeTokenRefreshInterval, // How often to reset the limit and start counting again. If zero, never refresh the limit.
+  lastUsedTime: nativeTokenLastUsedTime, // The start of the latest interval, if using the refresh interval.
+} = nativeTokenSpendingLimit;
+
+// The spending limit for an ERC-20 token.
+const erc20SpendingLimit = await sessionKeyPluginView.getERC20SpendLimitInfo([
+  accountAddress,
+  sessionKeyAddress,
+  exampleERC20Address,
+]);
+
+const {
+  hasLimit: hasErc20TokenSpendLimit, // Whether or not an ERC-20 token spending limit is enforced on the session key for this token address.
+  limit: erc20TokenSpendLimit, // The limit's maximum value. If a refresh interval is set, this is the max per interval.
+  limitUsed: erc20TokenSpendLimitUsed, // How much of the limit is used. If a refresh interval is set, this is the amount used in the current interval.
+  refreshInterval: erc20TokenRefreshInterval, // How often to reset the limit and start counting again. If zero, never refresh the limit.
+  lastUsedTime: erc20TokenLastUsedTime, // The start of the latest interval, if using the refresh interval.
+} = erc20SpendingLimit;
+
+// - The spending limit on gas for a given session key, measured in wei.
+// - Whether or not the spending limit will reset in the next interval, if a refresh interval is set.
+const [gasSpendingLimit, shouldReset] =
+  await sessionKeyPluginView.getGasSpendLimit([
+    accountAddress,
+    sessionKeyAddress,
+  ]);
+
+const {
+  hasLimit: hasGasSpendLimit, // Whether or not a gas spending limit is enforced on the session key
+  limit: gasSpendLimit, // The gas limit's maximum spend amount, in wei. If a refresh interval is set, this is the max per interval.
+  limitUsed: gasSpendLimitUsed, // How much of the limit is used. If a refresh interval is set, this is the amount used in the current interval.
+  refreshInterval: gasRefreshInterval, // How often to reset the limit and start counting again. If zero, never refresh the limit.
+  lastUsedTime: gasLastUsedTime, // The start of the latest interval, if using the refresh interval.
+} = gasSpendingLimit;
+
+// The paymaster address required for a given session key.
+// If there is no required paymaster, this will return the zero address.
+const requiredPaymaster = await sessionKeyPluginView.getRequiredPaymaster([
+  accountAddress,
+  sessionKeyAddress,
+]);
 ```
 
 ### Permission View Functions
diff --git a/docs/pages/third-party/signers.mdx b/docs/pages/third-party/signers.mdx
index cc08afd307..96bcfbfc23 100644
--- a/docs/pages/third-party/signers.mdx
+++ b/docs/pages/third-party/signers.mdx
@@ -36,7 +36,4 @@ Viem allows you to create a `WalletClient`, which can be used to wrap local or J
 
 We support a `SmartAccountSigner` implementation called `WalletClientSigner` that makes it really easy to use a viem `WalletClient` as a signer on your Smart Contract Account. If your Signer is [EIP-1193](https://eips.ethereum.org/EIPS/eip-1193) compliant, it is really easy to use with `WalletClient`. Let's take a look at a simple example:
 
-```ts [wallet-client-signer.ts] twoslash
-// @noErrors
-// [!include ~/shared/signer/wallet-client-signer.ts]
-```
+<Markdown src="../../shared/signer/wallet-client-signer.mdx" />
diff --git a/docs/shared/core/config.ts b/docs/shared/core/config.mdx
similarity index 90%
rename from docs/shared/core/config.ts
rename to docs/shared/core/config.mdx
index 8c73a8b8fc..1bb049acce 100644
--- a/docs/shared/core/config.ts
+++ b/docs/shared/core/config.mdx
@@ -1,3 +1,4 @@
+```ts twoslash config.ts
 import { createConfig } from "@account-kit/core";
 import { alchemy, sepolia } from "@account-kit/infra";
 
@@ -7,3 +8,4 @@ export const config = createConfig({
   // optional if you want to sponsor gas
   policyId: "YOUR_POLICY_ID",
 });
+```
diff --git a/docs/shared/core/ssr-config.ts b/docs/shared/core/ssr-config.mdx
similarity index 88%
rename from docs/shared/core/ssr-config.ts
rename to docs/shared/core/ssr-config.mdx
index b819469a24..614d4b77a4 100644
--- a/docs/shared/core/ssr-config.ts
+++ b/docs/shared/core/ssr-config.mdx
@@ -1,3 +1,4 @@
+```ts twoslash config.ts
 import { createConfig } from "@account-kit/core";
 import { alchemy, sepolia } from "@account-kit/infra";
 
@@ -6,3 +7,4 @@ export const config = createConfig({
   chain: sepolia,
   ssr: true,
 });
+```
diff --git a/docs/shared/infra/client.ts b/docs/shared/infra/client.mdx
similarity index 96%
rename from docs/shared/infra/client.ts
rename to docs/shared/infra/client.mdx
index 0a06bb69b1..e040f47a81 100644
--- a/docs/shared/infra/client.ts
+++ b/docs/shared/infra/client.mdx
@@ -1,3 +1,4 @@
+```ts twoslash client.ts
 import {
   alchemy,
   createAlchemySmartAccountClient,
@@ -23,3 +24,4 @@ export const client = createAlchemySmartAccountClient({
     signer: LocalAccountSigner.privateKeyToAccountSigner(generatePrivateKey()),
   }),
 });
+```
diff --git a/docs/shared/react-native/account-provider-setup.mdx b/docs/shared/react-native/account-provider-setup.mdx
new file mode 100644
index 0000000000..1eab162c6d
--- /dev/null
+++ b/docs/shared/react-native/account-provider-setup.mdx
@@ -0,0 +1,67 @@
+```ts twoslash _layout.tsx (Expo)
+import "react-native-get-random-values"; // Shims for the crypto module
+import React from "react";
+import { alchemy, sepolia } from "@account-kit/infra";
+import {
+  AlchemyAccountProvider,
+  createConfig,
+} from "@account-kit/react-native";
+import { QueryClient } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+const config = createConfig({
+  chain: sepolia,
+  transport: alchemy({
+    apiKey: "YOUR_ALCHEMY_API_KEY",
+  }),
+  signerConnection: {
+    apiKey: "YOUR_ALCHEMY_API_KEY",
+  },
+  sessionConfig: {
+    expirationTimeMs: 1000 * 60 * 60 * 24, // <-- Adjust the session expiration time as needed (currently 24 hours)
+  },
+});
+
+export default function App() {
+  return (
+    <AlchemyAccountProvider config={config} queryClient={queryClient}>
+      {/* The rest of your app here... */}
+    </AlchemyAccountProvider>
+  );
+}
+```
+
+```ts twoslash App.tsx (Bare React Native)
+import "react-native-get-random-values"; // Shims for the crypto module
+import React from "react";
+import { alchemy, sepolia } from "@account-kit/infra";
+import {
+  AlchemyAccountProvider,
+  createConfig,
+} from "@account-kit/react-native";
+import { QueryClient } from "@tanstack/react-query";
+
+const queryClient = new QueryClient();
+
+const config = createConfig({
+  chain: sepolia,
+  transport: alchemy({
+    apiKey: "YOUR_ALCHEMY_API_KEY",
+  }),
+  signerConnection: {
+    apiKey: "YOUR_ALCHEMY_API_KEY",
+  },
+  sessionConfig: {
+    expirationTimeMs: 1000 * 60 * 60 * 24, // <-- Adjust the session expiration time as needed (currently 24 hours)
+  },
+});
+
+export default function App() {
+  return (
+    <AlchemyAccountProvider config={config} queryClient={queryClient}>
+      {/* The rest of your app here... */}
+    </AlchemyAccountProvider>
+  );
+}
+```
diff --git a/docs/shared/react-native/account-provider-setup.tsx b/docs/shared/react-native/account-provider-setup.tsx
deleted file mode 100644
index ef737c7b82..0000000000
--- a/docs/shared/react-native/account-provider-setup.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import "react-native-get-random-values"; // Shims for the crypto module
-import React from "react";
-import { alchemy, sepolia } from "@account-kit/infra";
-import {
-  AlchemyAccountProvider,
-  createConfig,
-} from "@account-kit/react-native";
-import { QueryClient } from "@tanstack/react-query";
-
-const queryClient = new QueryClient();
-
-const config = createConfig({
-  chain: sepolia,
-  transport: alchemy({
-    apiKey: "YOUR_ALCHEMY_API_KEY",
-  }),
-  signerConnection: {
-    apiKey: "YOUR_ALCHEMY_API_KEY",
-  },
-  sessionConfig: {
-    expirationTimeMs: 1000 * 60 * 60 * 24, // <-- Adjust the session expiration time as needed (currently 24 hours)
-  },
-});
-
-export default function App() {
-  return (
-    <AlchemyAccountProvider config={config} queryClient={queryClient}>
-      {/* The rest of your app here... */}
-    </AlchemyAccountProvider>
-  );
-}
diff --git a/docs/shared/react-native/signer.ts b/docs/shared/react-native/signer.ts
deleted file mode 100644
index 8b4b308006..0000000000
--- a/docs/shared/react-native/signer.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { RNAlchemySigner } from "@account-kit/react-native-signer";
-
-export const signer = RNAlchemySigner({
-  client: { connection: { apiKey: "API_KEY" } },
-  // optional param to override session settings
-  sessionConfig: {
-    // sets the expiration to 60 minutes
-    expirationTimeMs: 1000 * 60 * 60,
-  },
-});
diff --git a/docs/shared/signer/signer.ts b/docs/shared/signer/signer.mdx
similarity index 89%
rename from docs/shared/signer/signer.ts
rename to docs/shared/signer/signer.mdx
index 092a76c01a..92efe46874 100644
--- a/docs/shared/signer/signer.ts
+++ b/docs/shared/signer/signer.mdx
@@ -1,3 +1,4 @@
+```ts twoslash signer.ts
 import { AlchemyWebSigner } from "@account-kit/signer";
 
 export const signer = new AlchemyWebSigner({
@@ -10,3 +11,4 @@ export const signer = new AlchemyWebSigner({
     },
   },
 });
+```
diff --git a/docs/shared/signer/wallet-client-signer.ts b/docs/shared/signer/wallet-client-signer.mdx
similarity index 92%
rename from docs/shared/signer/wallet-client-signer.ts
rename to docs/shared/signer/wallet-client-signer.mdx
index aa609f1574..b72e3d3a91 100644
--- a/docs/shared/signer/wallet-client-signer.ts
+++ b/docs/shared/signer/wallet-client-signer.mdx
@@ -1,3 +1,4 @@
+```ts twoslash wallet-client-signer.ts
 import { WalletClientSigner, type SmartAccountSigner } from "@aa-sdk/core";
 import { createWalletClient, custom } from "viem";
 import { sepolia } from "viem/chains";
@@ -13,3 +14,4 @@ export const signer: SmartAccountSigner = new WalletClientSigner(
   walletClient,
   "json-rpc" // signerType
 );
+```
diff --git a/docs/shared/smart-contracts/light-account-client.ts b/docs/shared/smart-contracts/light-account-client.mdx
similarity index 94%
rename from docs/shared/smart-contracts/light-account-client.ts
rename to docs/shared/smart-contracts/light-account-client.mdx
index 927b01d37b..2335374c38 100644
--- a/docs/shared/smart-contracts/light-account-client.ts
+++ b/docs/shared/smart-contracts/light-account-client.mdx
@@ -1,3 +1,4 @@
+```ts twoslash client.ts
 import { LocalAccountSigner } from "@aa-sdk/core";
 import { alchemy, sepolia } from "@account-kit/infra";
 import { createLightAccountAlchemyClient } from "@account-kit/smart-contracts";
@@ -8,3 +9,4 @@ export const lightAccountClient = await createLightAccountAlchemyClient({
   chain: sepolia,
   transport: alchemy({ apiKey: "YOUR_API_KEY" }),
 });
+```
diff --git a/docs/shared/smart-contracts/modular-account-client.ts b/docs/shared/smart-contracts/modular-account-client.mdx
similarity index 94%
rename from docs/shared/smart-contracts/modular-account-client.ts
rename to docs/shared/smart-contracts/modular-account-client.mdx
index f62907ca4c..19ef060ea9 100644
--- a/docs/shared/smart-contracts/modular-account-client.ts
+++ b/docs/shared/smart-contracts/modular-account-client.mdx
@@ -1,3 +1,4 @@
+```ts twoslash client.ts
 import { LocalAccountSigner } from "@aa-sdk/core";
 import { alchemy, sepolia } from "@account-kit/infra";
 import { createModularAccountAlchemyClient } from "@account-kit/smart-contracts";
@@ -10,3 +11,4 @@ export const modularAccountClient = await createModularAccountAlchemyClient({
   chain,
   transport: alchemy({ apiKey: "YOUR_API_KEY" }),
 });
+```
diff --git a/docs/shared/smart-contracts/multi-owner-light-account-client.ts b/docs/shared/smart-contracts/multi-owner-light-account-client.mdx
similarity index 94%
rename from docs/shared/smart-contracts/multi-owner-light-account-client.ts
rename to docs/shared/smart-contracts/multi-owner-light-account-client.mdx
index 93d118e7b1..5b1eade903 100644
--- a/docs/shared/smart-contracts/multi-owner-light-account-client.ts
+++ b/docs/shared/smart-contracts/multi-owner-light-account-client.mdx
@@ -1,3 +1,4 @@
+```ts twoslash client.ts
 import { LocalAccountSigner } from "@aa-sdk/core";
 import { alchemy, sepolia } from "@account-kit/infra";
 import { createMultiOwnerLightAccountAlchemyClient } from "@account-kit/smart-contracts";
@@ -11,3 +12,4 @@ export const multiOwnerLightAccountClient =
       apiKey: "YOUR_API_KEY",
     }),
   });
+```
diff --git a/docs/shared/smart-contracts/multisig-client.ts b/docs/shared/smart-contracts/multisig-client.mdx
similarity index 97%
rename from docs/shared/smart-contracts/multisig-client.ts
rename to docs/shared/smart-contracts/multisig-client.mdx
index 377adc8780..b51008c42f 100644
--- a/docs/shared/smart-contracts/multisig-client.ts
+++ b/docs/shared/smart-contracts/multisig-client.mdx
@@ -1,3 +1,4 @@
+```ts twoslash client.ts
 import { LocalAccountSigner } from "@aa-sdk/core";
 import { alchemy, sepolia } from "@account-kit/infra";
 import { createMultisigAccountAlchemyClient } from "@account-kit/smart-contracts";
@@ -33,3 +34,4 @@ export const multisigAccountClient = await createMultisigAccountAlchemyClient({
     apiKey: "YOUR_API_KEY",
   }),
 });
+```
diff --git a/docs/shared/smart-contracts/session-keys/base-client.ts b/docs/shared/smart-contracts/session-keys/base-client.mdx
similarity index 93%
rename from docs/shared/smart-contracts/session-keys/base-client.ts
rename to docs/shared/smart-contracts/session-keys/base-client.mdx
index b3e14e9e91..bed0efc27e 100644
--- a/docs/shared/smart-contracts/session-keys/base-client.ts
+++ b/docs/shared/smart-contracts/session-keys/base-client.mdx
@@ -1,3 +1,4 @@
+```ts twoslash base-client.ts
 import { LocalAccountSigner } from "@aa-sdk/core";
 import { alchemy, sepolia } from "@account-kit/infra";
 import {
@@ -12,3 +13,4 @@ export const client = (
     transport: alchemy({ apiKey: "ALCHEMY_API_KEY" }),
   })
 ).extend(sessionKeyPluginActions);
+```
diff --git a/docs/shared/smart-contracts/session-keys/full-example.ts b/docs/shared/smart-contracts/session-keys/full-example.mdx
similarity index 99%
rename from docs/shared/smart-contracts/session-keys/full-example.ts
rename to docs/shared/smart-contracts/session-keys/full-example.mdx
index 76d7e05c8e..c2d638139a 100644
--- a/docs/shared/smart-contracts/session-keys/full-example.ts
+++ b/docs/shared/smart-contracts/session-keys/full-example.mdx
@@ -1,3 +1,4 @@
+```ts twoslash
 /* eslint-disable @typescript-eslint/no-unused-vars */
 import { LocalAccountSigner } from "@aa-sdk/core";
 import { alchemy, sepolia } from "@account-kit/infra";
@@ -84,3 +85,4 @@ const result = await sessionKeyClient.executeWithSessionKey({
     await sessionKeySigner.getAddress(),
   ],
 });
+```
diff --git a/docs/shared/smart-contracts/session-keys/supported-permissions.ts b/docs/shared/smart-contracts/session-keys/supported-permissions.ts
deleted file mode 100644
index 07bbeac4e4..0000000000
--- a/docs/shared/smart-contracts/session-keys/supported-permissions.ts
+++ /dev/null
@@ -1,188 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unused-vars */
-import { LocalAccountSigner } from "@aa-sdk/core";
-import { alchemy, sepolia } from "@account-kit/infra";
-import {
-  createModularAccountAlchemyClient,
-  SessionKeyAccessListType,
-  SessionKeyPermissionsBuilder,
-  SessionKeyPlugin,
-  sessionKeyPluginActions,
-  SessionKeySigner,
-} from "@account-kit/smart-contracts";
-import { keccak256, zeroHash } from "viem";
-
-const transport = alchemy({ apiKey: "ALCHEMY_API_KEY" });
-export const client = (
-  await createModularAccountAlchemyClient({
-    chain: sepolia,
-    signer: LocalAccountSigner.mnemonicToAccountSigner("MNEMONIC"),
-    transport,
-  })
-).extend(sessionKeyPluginActions);
-
-const sessionKeySigner = new SessionKeySigner();
-
-// [!region generatepermissions]
-// Let's create an initial permission set for the session key giving it an eth spend limit
-const keyPermissions = new SessionKeyPermissionsBuilder()
-  .setNativeTokenSpendLimit({
-    spendLimit: 1000000n,
-  })
-  // this will allow the session key plugin to interact with all addresses
-  .setContractAccessControlType(SessionKeyAccessListType.ALLOW_ALL_ACCESS)
-  .setTimeRange({
-    validFrom: Math.round(Date.now() / 1000),
-    // valid for 1 hour
-    validUntil: Math.round(Date.now() / 1000 + 60 * 60),
-  });
-// [!endregion generatepermissions]
-
-{
-  // [!region permissionsinplugininstall]
-  const result = await client.installSessionKeyPlugin({
-    // 1st arg is the initial set of session keys
-    // 2nd arg is the tags for the session keys
-    // 3rd arg is the initial set of permissions
-    args: [
-      [await sessionKeySigner.getAddress()],
-      [zeroHash],
-      [keyPermissions.encode()],
-    ],
-  });
-  // [!endregion permissionsinplugininstall]
-}
-
-{
-  // [!region permissionsinadd]
-  const result = await client.addSessionKey({
-    key: "0x1234123412341234123412341234123412341234", // Session key address
-    tag: keccak256(new TextEncoder().encode("session-key-tag")), // Session key tag
-    permissions: keyPermissions.encode(), // Initial permissions
-  });
-  // [!endregion permissionsinadd]
-}
-
-{
-  // [!region permissionsinupdate]
-  const result = await client.updateSessionKeyPermissions({
-    key: "0x1234123412341234123412341234123412341234", // Session key address
-    // add other permissions to the builder, if needed
-    permissions: new SessionKeyPermissionsBuilder()
-      .setTimeRange({
-        validFrom: Math.round(Date.now() / 1000),
-        // valid for 1 hour
-        validUntil: Math.round(Date.now() / 1000 + 60 * 60),
-      })
-      .encode(),
-  });
-  // [!endregion permissionsinupdate]
-}
-
-// [!region viewpermissions]
-const sessionKeyPluginView = SessionKeyPlugin.getContract(client).read;
-const accountAddress = client.getAddress();
-const sessionKeyAddress = await sessionKeySigner.getAddress();
-
-const exampleTargetAddress = "0x4567456745674567456745674567456745674567";
-const exampleTargetSelector = "0x78907890";
-const exampleERC20Address = "0xabcdabcdabcdabcdabcdabcdabcdabcdabcdabcd";
-
-// Using session key permissions view functions
-
-// The key's current access control type. One of:
-// - SessionKeyAccessListType.ALLOWLIST
-// - SessionKeyAccessListType.DENYLIST
-// - SessionKeyAccessListType.ALLOW_ALL_ACCESS
-const accessControlType = await sessionKeyPluginView.getAccessControlType([
-  accountAddress,
-  sessionKeyAddress,
-]);
-
-// - Whether or not the address is on the access control list (either allowlist or denylist, depending on setting).
-// - Whether or not the function selectors should be checked for the target address (checked according to the access control type).
-const [isTargetAddressOnList, checkSelectors] =
-  await sessionKeyPluginView.getAccessControlEntry([
-    accountAddress,
-    sessionKeyAddress,
-    exampleTargetAddress,
-  ]);
-
-// Whether or not the selector is on the access control list
-const isTargetSelectorOnList =
-  await sessionKeyPluginView.isSelectorOnAccessControlList([
-    accountAddress,
-    sessionKeyAddress,
-    exampleTargetAddress,
-    exampleTargetSelector,
-  ]);
-
-// The start and end timestamp of a key.
-// If either is zero, that means the value is unset.
-const [validAfter, validUntil] = await sessionKeyPluginView.getKeyTimeRange([
-  accountAddress,
-  sessionKeyAddress,
-]);
-
-// The native token spending limit of a key. Details below
-const nativeTokenSpendingLimit =
-  await sessionKeyPluginView.getNativeTokenSpendLimitInfo([
-    accountAddress,
-    sessionKeyAddress,
-  ]);
-
-const {
-  hasLimit: hasNativeTokenSpendLimit, // Whether or not a native token spending limit is enforced on the session key
-  limit: nativeTokenSpendLimit, // The limit's maximum value. If a refresh interval is set, this is the max per interval.
-  limitUsed: nativeTokenSpendLimitUsed, // How much of the limit is used. If a refresh interval is set, this is the amount used in the current interval.
-  refreshInterval: nativeTokenRefreshInterval, // How often to reset the limit and start counting again. If zero, never refresh the limit.
-  lastUsedTime: nativeTokenLastUsedTime, // The start of the latest interval, if using the refresh interval.
-} = nativeTokenSpendingLimit;
-
-// The spending limit for an ERC-20 token.
-const erc20SpendingLimit = await sessionKeyPluginView.getERC20SpendLimitInfo([
-  accountAddress,
-  sessionKeyAddress,
-  exampleERC20Address,
-]);
-
-const {
-  hasLimit: hasErc20TokenSpendLimit, // Whether or not an ERC-20 token spending limit is enforced on the session key for this token address.
-  limit: erc20TokenSpendLimit, // The limit's maximum value. If a refresh interval is set, this is the max per interval.
-  limitUsed: erc20TokenSpendLimitUsed, // How much of the limit is used. If a refresh interval is set, this is the amount used in the current interval.
-  refreshInterval: erc20TokenRefreshInterval, // How often to reset the limit and start counting again. If zero, never refresh the limit.
-  lastUsedTime: erc20TokenLastUsedTime, // The start of the latest interval, if using the refresh interval.
-} = erc20SpendingLimit;
-
-// - The spending limit on gas for a given session key, measured in wei.
-// - Whether or not the spending limit will reset in the next interval, if a refresh interval is set.
-const [gasSpendingLimit, shouldReset] =
-  await sessionKeyPluginView.getGasSpendLimit([
-    accountAddress,
-    sessionKeyAddress,
-  ]);
-
-const {
-  hasLimit: hasGasSpendLimit, // Whether or not a gas spending limit is enforced on the session key
-  limit: gasSpendLimit, // The gas limit's maximum spend amount, in wei. If a refresh interval is set, this is the max per interval.
-  limitUsed: gasSpendLimitUsed, // How much of the limit is used. If a refresh interval is set, this is the amount used in the current interval.
-  refreshInterval: gasRefreshInterval, // How often to reset the limit and start counting again. If zero, never refresh the limit.
-  lastUsedTime: gasLastUsedTime, // The start of the latest interval, if using the refresh interval.
-} = gasSpendingLimit;
-
-// The paymaster address required for a given session key.
-// If there is no required paymaster, this will return the zero address.
-const requiredPaymaster = await sessionKeyPluginView.getRequiredPaymaster([
-  accountAddress,
-  sessionKeyAddress,
-]);
-// [!endregion viewpermissions]
-
-// To suppress typescript errors about unused variables from destructuring, "use" the variables here.
-// For some reason, this is an error, and not just a warning. (TS error 6198)
-
-// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-hasNativeTokenSpendLimit;
-// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-hasErc20TokenSpendLimit;
-// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-hasGasSpendLimit;