diff --git a/src/components/ComponentExample.js b/src/components/ComponentExample.js
index 7774f6bda..dae98b05a 100644
--- a/src/components/ComponentExample.js
+++ b/src/components/ComponentExample.js
@@ -8,20 +8,36 @@ import styles from './ComponentExample.module.scss';
 
 const TRAILING_SEMI = /;\s*$/;
 
-const ComponentExample = ({ className, example }) => (
-  <div className={cx(styles.container, className)}>
-    <h3 className={styles.title}>{example.label}</h3>
-    <LiveProvider
-      scope={window.__NR1_SDK__.default}
-      code={formatCode(example.sourceCode).replace(TRAILING_SEMI, '')}
-      theme={github}
-    >
-      <LivePreview className={styles.preview} />
-      <LiveEditor style={{ fontSize: '0.75rem' }} />
-      <LiveError className={styles.error} />
-    </LiveProvider>
-  </div>
-);
+const ComponentExample = ({ className, example }) => {
+  let formattedCode;
+
+  try {
+    formattedCode = formatCode(example.sourceCode).replace(TRAILING_SEMI, '');
+  } catch (e) {
+    formattedCode = example.sourceCode;
+  }
+
+  return (
+    <div className={cx(styles.container, className)}>
+      <h3 className={styles.title}>{example.label}</h3>
+      <LiveProvider
+        scope={{
+          ...window.__NR1_SDK__.default,
+          navigation: {
+            // eslint-disable-next-line no-empty-function
+            getOpenLauncherLocation() {},
+          },
+        }}
+        code={formattedCode}
+        theme={github}
+      >
+        <LivePreview className={styles.preview} />
+        <LiveEditor style={{ fontSize: '0.75rem' }} />
+        <LiveError className={styles.error} />
+      </LiveProvider>
+    </div>
+  );
+};
 
 ComponentExample.propTypes = {
   className: PropTypes.string,