diff --git a/libs/remix-ui/renderer/.babelrc b/libs/remix-ui/renderer/.babelrc
new file mode 100644
index 0000000000..09d67939cc
--- /dev/null
+++ b/libs/remix-ui/renderer/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@nrwl/react/babel"],
+  "plugins": []
+}
diff --git a/libs/remix-ui/renderer/.eslintrc b/libs/remix-ui/renderer/.eslintrc
new file mode 100644
index 0000000000..dae5c6feeb
--- /dev/null
+++ b/libs/remix-ui/renderer/.eslintrc
@@ -0,0 +1,19 @@
+{
+  "env": {
+      "browser": true,
+      "es6": true
+  },
+  "extends": "../../../.eslintrc",
+  "globals": {
+      "Atomics": "readonly",
+      "SharedArrayBuffer": "readonly"
+  },
+  "parserOptions": {
+      "ecmaVersion": 11,
+      "sourceType": "module"
+  },
+  "rules": {
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": "error"  
+  }
+} 
diff --git a/libs/remix-ui/renderer/README.md b/libs/remix-ui/renderer/README.md
new file mode 100644
index 0000000000..1fcfae088f
--- /dev/null
+++ b/libs/remix-ui/renderer/README.md
@@ -0,0 +1,7 @@
+# remix-ui-renderer
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test remix-ui-renderer` to execute the unit tests via [Jest](https://jestjs.io).
diff --git a/libs/remix-ui/renderer/src/index.ts b/libs/remix-ui/renderer/src/index.ts
new file mode 100644
index 0000000000..a891eab32e
--- /dev/null
+++ b/libs/remix-ui/renderer/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/renderer'
diff --git a/libs/remix-ui/renderer/src/lib/renderer.css b/libs/remix-ui/renderer/src/lib/renderer.css
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/libs/remix-ui/renderer/src/lib/renderer.tsx b/libs/remix-ui/renderer/src/lib/renderer.tsx
new file mode 100644
index 0000000000..b00a979bc5
--- /dev/null
+++ b/libs/remix-ui/renderer/src/lib/renderer.tsx
@@ -0,0 +1,63 @@
+import React from 'react' //eslint-disable-line
+
+interface RendererProps {
+  message: any;
+  opt: any,
+  warningErrors: any
+  editor: any
+}
+
+export const Renderer = ({ message, opt, editor }: RendererProps) => {
+  const getPositionDetails = (msg: any) => {
+    const result = { } as Record<string, number | string>
+
+    // To handle some compiler warning without location like SPDX license warning etc
+    if (!msg.includes(':')) return { errLine: -1, errCol: -1, errFile: msg }
+
+    // extract line / column
+    let position = msg.match(/^(.*?):([0-9]*?):([0-9]*?)?/)
+    result.errLine = position ? parseInt(position[2]) - 1 : -1
+    result.errCol = position ? parseInt(position[3]) : -1
+
+    // extract file
+    position = msg.match(/^(https:.*?|http:.*?|.*?):/)
+    result.errFile = position ? position[1] : ''
+    return result
+  }
+
+  const handlePointToErrorOnClick = (location, fileName) => {
+    editor.call('editor', 'discardHighlight')
+    editor.call('editor', 'highlight', location, fileName)
+  }
+
+  if (!message) return
+  let position = getPositionDetails(message)
+  if (!position.errFile || (opt.errorType && opt.errorType === position.errFile)) {
+    // Updated error reported includes '-->' before file details
+    const errorDetails = message.split('-->')
+    // errorDetails[1] will have file details
+    if (errorDetails.length > 1) position = getPositionDetails(errorDetails[1])
+  }
+  opt.errLine = position.errLine
+  opt.errCol = position.errCol
+  opt.errFile = position.errFile.trim()
+  const classList = opt.type === 'error' ? 'alert alert-danger' : 'alert alert-warning'
+  return (
+    <div>
+      <div className={`sol ${opt.type} ${classList}`}>
+        <div className="close" data-id="renderer">
+          <i className="fas fa-times"></i>
+        </div>
+        <span className='d-flex flex-column' onClick={() => handlePointToErrorOnClick(opt.location, opt.fileName)}>
+          <span className='h6 font-weight-bold'>{opt.name}</span>
+          { opt.item.warning }
+          {opt.item.more
+            ? <span><a href={opt.item.more} target='_blank'>more</a></span>
+            : <span> </span>
+          }
+          <span title={`Position in ${opt.errFile}`}>Pos: {opt.locationString}</span>
+        </span>
+      </div>
+    </div>
+  )
+}
diff --git a/libs/remix-ui/renderer/tsconfig.json b/libs/remix-ui/renderer/tsconfig.json
new file mode 100644
index 0000000000..6b65264565
--- /dev/null
+++ b/libs/remix-ui/renderer/tsconfig.json
@@ -0,0 +1,16 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "allowJs": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}
diff --git a/libs/remix-ui/renderer/tsconfig.lib.json b/libs/remix-ui/renderer/tsconfig.lib.json
new file mode 100644
index 0000000000..b560bc4dec
--- /dev/null
+++ b/libs/remix-ui/renderer/tsconfig.lib.json
@@ -0,0 +1,13 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../../dist/out-tsc",
+    "types": ["node"]
+  },
+  "files": [
+    "../../../node_modules/@nrwl/react/typings/cssmodule.d.ts",
+    "../../../node_modules/@nrwl/react/typings/image.d.ts"
+  ],
+  "exclude": ["**/*.spec.ts", "**/*.spec.tsx"],
+  "include": ["**/*.js", "**/*.jsx", "**/*.ts", "**/*.tsx"]
+}
diff --git a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
index 362ee4f761..f0572d59f5 100644
--- a/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
+++ b/libs/remix-ui/solidity-compiler/src/lib/solidity-compiler.tsx
@@ -3,6 +3,7 @@ import { SolidityCompilerProps } from './types'
 import { CompilerContainer } from './compiler-container' // eslint-disable-line
 import { Toaster } from '@remix-ui/toaster' // eslint-disable-line
 import { ModalDialog } from '@remix-ui/modal-dialog' // eslint-disable-line
+import { Renderer } from '@remix-ui/renderer'
 
 import './css/style.css'
 
diff --git a/nx.json b/nx.json
index fe85503935..16e4c56d76 100644
--- a/nx.json
+++ b/nx.json
@@ -113,6 +113,9 @@
     },
     "remix-ui-publish-to-storage": {
       "tags": []
+    },
+    "remix-ui-renderer": {
+      "tags": []
     }
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 1c54c30023..87a3bd1b40 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -40,7 +40,8 @@
       "@remix-ui/settings": ["libs/remix-ui/settings/src/index.ts"],
       "@remix-project/core-plugin": ["libs/remix-core-plugin/src/index.ts"],
       "@remix-ui/solidity-compiler": ["libs/remix-ui/solidity-compiler/src/index.ts"],
-      "@remix-ui/publish-to-storage": ["libs/remix-ui/publish-to-storage/src/index.ts"]
+      "@remix-ui/publish-to-storage": ["libs/remix-ui/publish-to-storage/src/index.ts"],
+      "@remix-ui/renderer": ["libs/remix-ui/renderer/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]
diff --git a/workspace.json b/workspace.json
index 256cf52172..cf80740abd 100644
--- a/workspace.json
+++ b/workspace.json
@@ -806,6 +806,22 @@
           }
         }
       }
+    },
+    "remix-ui-renderer": {
+      "root": "libs/remix-ui/renderer",
+      "sourceRoot": "libs/remix-ui/renderer/src",
+      "projectType": "library",
+      "schematics": {},
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:lint",
+          "options": {
+            "linter": "eslint",
+            "tsConfig": ["libs/remix-ui/renderer/tsconfig.lib.json"],
+            "exclude": ["**/node_modules/**", "!libs/remix-ui/renderer/**/*"]
+          }
+        }
+      }
     }
   },
   "remix-ui-solidity-compiler": {