diff --git a/packages/build/src/scripts/generateDefaultTypes.js b/packages/build/src/scripts/generateDefaultTypes.js
index 371c6547b..7388ba4b3 100644
--- a/packages/build/src/scripts/generateDefaultTypes.js
+++ b/packages/build/src/scripts/generateDefaultTypes.js
@@ -25,7 +25,7 @@ const defaultPackages = [
   // '@lowdefy/blocks-color-selectors',
   '@lowdefy/blocks-echarts',
   '@lowdefy/blocks-loaders',
-  // '@lowdefy/blocks-markdown',
+  '@lowdefy/blocks-markdown',
   '@lowdefy/connection-axios-http',
   '@lowdefy/operators-change-case',
   // '@lowdefy/operators-diff',
diff --git a/packages/plugins/blocks/blocks-markdown/package.json b/packages/plugins/blocks/blocks-markdown/package.json
index 9f342068c..7b766a332 100644
--- a/packages/plugins/blocks/blocks-markdown/package.json
+++ b/packages/plugins/blocks/blocks-markdown/package.json
@@ -48,11 +48,13 @@
   "dependencies": {
     "@lowdefy/block-utils": "4.0.0-alpha.5",
     "dompurify": "2.3.3",
+    "process": "0.11.10",
     "react": "18.0.0-alpha-327d5c484-20211106",
     "react-dom": "18.0.0-alpha-327d5c484-20211106",
-    "react-markdown": "5.0.3",
-    "react-syntax-highlighter": "15.4.4",
-    "remark-gfm": "1.0.0"
+    "react-markdown": "7.1.1",
+    "react-syntax-highlighter": "15.4.5",
+    "rehype-raw": "6.1.0",
+    "remark-gfm": "3.0.1"
   },
   "devDependencies": {
     "@babel/preset-react": "7.16.0",
diff --git a/packages/plugins/blocks/blocks-markdown/src/blocks/DangerousMarkdown/DangerousMarkdown.js b/packages/plugins/blocks/blocks-markdown/src/blocks/DangerousMarkdown/DangerousMarkdown.js
index da337b624..97dc63939 100644
--- a/packages/plugins/blocks/blocks-markdown/src/blocks/DangerousMarkdown/DangerousMarkdown.js
+++ b/packages/plugins/blocks/blocks-markdown/src/blocks/DangerousMarkdown/DangerousMarkdown.js
@@ -20,6 +20,7 @@ import { blockDefaultProps } from '@lowdefy/block-utils';
 import ReactMarkdown from 'react-markdown';
 
 import gfm from 'remark-gfm';
+import rehypeRaw from 'rehype-raw';
 
 class DangerousMarkdown extends React.Component {
   constructor(props) {
@@ -34,12 +35,12 @@ class DangerousMarkdown extends React.Component {
       <div id={blockId} className={methods.makeCssClass(properties.style)}>
         <ReactMarkdown
           className="markdown-body"
-          plugins={[gfm]}
+          remarkPlugins={[gfm]}
+          rehypePlugins={[rehypeRaw]}
           allowDangerousHtml={true}
           skipHtml={false}
-        >
-          {DOMPurify.sanitize(this.props.properties.content, this.DOMPurifyOptions)}
-        </ReactMarkdown>
+          children={DOMPurify.sanitize(this.props.properties.content, this.DOMPurifyOptions)}
+        />
       </div>
     );
   }
diff --git a/packages/plugins/blocks/blocks-markdown/src/blocks/Markdown/Markdown.js b/packages/plugins/blocks/blocks-markdown/src/blocks/Markdown/Markdown.js
index c609341e3..a67013491 100644
--- a/packages/plugins/blocks/blocks-markdown/src/blocks/Markdown/Markdown.js
+++ b/packages/plugins/blocks/blocks-markdown/src/blocks/Markdown/Markdown.js
@@ -22,9 +22,12 @@ import gfm from 'remark-gfm';
 
 const Markdown = ({ blockId, properties, methods }) => (
   <div id={blockId} className={methods.makeCssClass(properties.style)}>
-    <ReactMarkdown className="markdown-body" plugins={[gfm]} skipHtml={properties.skipHtml}>
-      {properties.content}
-    </ReactMarkdown>
+    <ReactMarkdown
+      className="markdown-body"
+      skipHtml={properties.skipHtml}
+      children={properties.content}
+      remarkPlugins={[gfm]}
+    />
   </div>
 );
 
diff --git a/packages/plugins/blocks/blocks-markdown/src/blocks/MarkdownWithCode/MarkdownWithCode.js b/packages/plugins/blocks/blocks-markdown/src/blocks/MarkdownWithCode/MarkdownWithCode.js
index a3c34d2c0..96ca723a2 100644
--- a/packages/plugins/blocks/blocks-markdown/src/blocks/MarkdownWithCode/MarkdownWithCode.js
+++ b/packages/plugins/blocks/blocks-markdown/src/blocks/MarkdownWithCode/MarkdownWithCode.js
@@ -20,38 +20,38 @@ import { blockDefaultProps } from '@lowdefy/block-utils';
 import ReactMarkdown from 'react-markdown';
 
 import gfm from 'remark-gfm';
-import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
 
-import javascript from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript';
-import typescript from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript';
-import python from 'react-syntax-highlighter/dist/cjs/languages/hljs/python';
-import java from 'react-syntax-highlighter/dist/cjs/languages/hljs/java';
-import xml from 'react-syntax-highlighter/dist/cjs/languages/hljs/xml';
-import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json';
-import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml';
-import markdown from 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown';
-import handlebars from 'react-syntax-highlighter/dist/cjs/languages/hljs/handlebars';
+import github from 'react-syntax-highlighter/dist/esm/styles/hljs/github.js';
+import javascript from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript.js';
+import typescript from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript.js';
+import python from 'react-syntax-highlighter/dist/esm/languages/hljs/python.js';
+import java from 'react-syntax-highlighter/dist/esm/languages/hljs/java.js';
+import xml from 'react-syntax-highlighter/dist/esm/languages/hljs/xml.js';
+import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json.js';
+import yaml from 'react-syntax-highlighter/dist/esm/languages/hljs/yaml.js';
+import markdown from 'react-syntax-highlighter/dist/esm/languages/hljs/markdown.js';
+import handlebars from 'react-syntax-highlighter/dist/esm/languages/hljs/handlebars.js';
 
-SyntaxHighlighter.registerLanguage('javascript', javascript);
-SyntaxHighlighter.registerLanguage('js', javascript);
-SyntaxHighlighter.registerLanguage('jsx', javascript);
-SyntaxHighlighter.registerLanguage('typescript', typescript);
-SyntaxHighlighter.registerLanguage('ts', typescript);
-SyntaxHighlighter.registerLanguage('python', python);
-SyntaxHighlighter.registerLanguage('py', python);
-SyntaxHighlighter.registerLanguage('java', java);
-SyntaxHighlighter.registerLanguage('xml', xml);
-SyntaxHighlighter.registerLanguage('json', json);
-SyntaxHighlighter.registerLanguage('yaml', yaml);
-SyntaxHighlighter.registerLanguage('markdown', markdown);
 SyntaxHighlighter.registerLanguage('handlebars', handlebars);
 SyntaxHighlighter.registerLanguage('nunjucks', handlebars);
 SyntaxHighlighter.registerLanguage('html', handlebars);
+SyntaxHighlighter.registerLanguage('java', java);
+SyntaxHighlighter.registerLanguage('javascript', javascript);
+SyntaxHighlighter.registerLanguage('js', javascript);
+SyntaxHighlighter.registerLanguage('jsx', javascript);
+SyntaxHighlighter.registerLanguage('json', json);
+SyntaxHighlighter.registerLanguage('markdown', markdown);
+SyntaxHighlighter.registerLanguage('python', python);
+SyntaxHighlighter.registerLanguage('py', python);
+SyntaxHighlighter.registerLanguage('typescript', typescript);
+SyntaxHighlighter.registerLanguage('ts', typescript);
+SyntaxHighlighter.registerLanguage('xml', xml);
+SyntaxHighlighter.registerLanguage('yaml', yaml);
 
 const renderers = {
-  code: ({ language, value }) => (
+  code: ({ language, children }) => (
     <SyntaxHighlighter style={github} language={language}>
-      {value}
+      {children}
     </SyntaxHighlighter>
   ),
 };
@@ -59,12 +59,11 @@ const MarkdownWithCode = ({ blockId, properties, methods }) => (
   <div id={blockId} className={methods.makeCssClass(properties.style)}>
     <ReactMarkdown
       className="markdown-body"
-      renderers={renderers}
-      plugins={[gfm]}
       skipHtml={properties.skipHtml}
-    >
-      {properties.content}
-    </ReactMarkdown>
+      children={properties.content}
+      remarkPlugins={[gfm]}
+      components={renderers}
+    />
   </div>
 );
 
diff --git a/packages/plugins/blocks/blocks-markdown/src/types.js b/packages/plugins/blocks/blocks-markdown/src/types.js
index 9cbc3a1dc..f45f2e087 100644
--- a/packages/plugins/blocks/blocks-markdown/src/types.js
+++ b/packages/plugins/blocks/blocks-markdown/src/types.js
@@ -15,13 +15,13 @@
   limitations under the License.
 */
 
-import * as blocks from './blocks.js';
+// import * as blocks from './blocks.js';
 
-const styles = {};
-Object.keys(blocks).forEach((block) => {
-  styles[block] = blocks[block].styles || [];
-});
+// const styles = {};
+// Object.keys(blocks).forEach((block) => {
+//   styles[block] = blocks[block].styles || [];
+// });
 export default {
-  blocks: Object.keys(blocks),
-  styles: { default: ['style.less'], ...styles },
+  blocks: ['Markdown', 'MarkdownWithCode', 'DangerousMarkdown'],
+  styles: { default: ['style.less'], Markdown: [], MarkdownWithCode: [], DangerousMarkdown: [] },
 };
diff --git a/packages/server/next.config.js b/packages/server/next.config.js
index 9387fd6b6..26785df7d 100644
--- a/packages/server/next.config.js
+++ b/packages/server/next.config.js
@@ -17,7 +17,7 @@ module.exports = withLess({
         events: false,
         fs: false,
         path: false,
-        process: false,
+        process: require.resolve('process/browser'),
         util: false,
       };
     }
diff --git a/packages/server/package.json b/packages/server/package.json
index 324a69d60..c3d6a06c3 100644
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -41,12 +41,16 @@
   "dependencies": {
     "@lowdefy/api": "4.0.0-alpha.5",
     "@lowdefy/block-utils": "4.0.0-alpha.5",
+    "@lowdefy/blocks-antd": "4.0.0-alpha.5",
+    "@lowdefy/blocks-basic": "4.0.0-alpha.5",
+    "@lowdefy/blocks-markdown": "4.0.0-alpha.5",
     "@lowdefy/engine": "4.0.0-alpha.5",
     "@lowdefy/helpers": "4.0.0-alpha.5",
     "@lowdefy/layout": "4.0.0-alpha.5",
     "@lowdefy/operators-js": "4.0.0-alpha.5",
     "next": "12.0.3",
     "next-auth": "4.0.0-beta.6",
+    "process": "0.11.10",
     "react": "18.0.0-alpha-327d5c484-20211106",
     "react-dom": "18.0.0-alpha-327d5c484-20211106",
     "react-icons": "4.3.1"