diff --git a/apps/doc/docs/get-started.mdx b/apps/doc/docs/get-started.mdx
index c7b4d00..e6711be 100644
--- a/apps/doc/docs/get-started.mdx
+++ b/apps/doc/docs/get-started.mdx
@@ -155,7 +155,7 @@ import 'solive-core/dist/index.css';
 
 Now you can see the SoLive Component on your page:
 
-```solidity solive height="500px" consoleDefaultVisible="true" deployDefaultVisible="true"
+```solidity solive height="500px" consoleDefaultVisible="true" deployDefaultVisible="true" mode="standard"
 /**
    * @filename Storage.sol
    */
diff --git a/apps/doc/docs/introduction.mdx b/apps/doc/docs/introduction.mdx
index f557265..022239c 100644
--- a/apps/doc/docs/introduction.mdx
+++ b/apps/doc/docs/introduction.mdx
@@ -16,7 +16,7 @@ SoLive is the first open-source lightweight browser-based Solidity Integrated De
 
 Below is a SoLive Codeblock, try to play with the contract!
 
-```solidity solive height="500px" consoleDefaultVisible="true" deployDefaultVisible="true"
+```solidity solive height="500px" consoleDefaultVisible="true" deployDefaultVisible="true" mode="standard"
 /**
    * @filename Storage.sol
    */
@@ -57,4 +57,4 @@ SoLive is lightweight and flexible by design. It includes only the essential mod
 1. Edit Module: We employ the Monaco Editor as the code editor.
 2. Compile Module: We utilize `solcjs` to compile smart contracts based on the chosen Solidity version.
 3. Deploy Module: We deploy the compiled contracts to the local EVM using a combination of `ethersjs V5` and `ethereumjs vm`.
-4. Interact Module: To interact with the deployed contracts, we use `ethersjs V5` and a custom ABI-UI converter.
\ No newline at end of file
+4. Interact Module: To interact with the deployed contracts, we use `ethersjs V5` and a custom ABI-UI converter.
diff --git a/packages/docusaurus-plugin/src/theme/SoliveCodeBlock/index.tsx b/packages/docusaurus-plugin/src/theme/SoliveCodeBlock/index.tsx
index 0509c12..c7cc923 100644
--- a/packages/docusaurus-plugin/src/theme/SoliveCodeBlock/index.tsx
+++ b/packages/docusaurus-plugin/src/theme/SoliveCodeBlock/index.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo } from 'react';
 
-import Editor from 'solive-core';
+import StandardEditor, { PureEditor } from 'solive-core';
 import { v4 as uuidv4 } from 'uuid';
 
 import 'solive-core/dist/index.css';
@@ -96,9 +96,10 @@ function SoliveCodeBlock(props: SoliveCodeBlockProps) {
     modelInfos,
   ]);
 
+  console.log(allProps);
   return (
     <div style={{ width: allProps.width, maxWidth: '800px', margin: 'auto' }}>
-      <Editor {...state} />
+      {allProps.mode === 'standard' ? <StandardEditor {...state} /> : <PureEditor {...state} />}
     </div>
   );
 }