diff --git a/.gitignore b/.gitignore
index c47b25945..af5f0247e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -31,3 +31,5 @@ tests-examples
 
 /editor/*
 !/editor/readonly-editor.tsx
+!/editor/renderer/renderer.ts
+!/editor/renderer/index.tsx
diff --git a/editor/renderer/index.tsx b/editor/renderer/index.tsx
new file mode 100644
index 000000000..aa8d1947a
--- /dev/null
+++ b/editor/renderer/index.tsx
@@ -0,0 +1,14 @@
+export function Renderer(props: any) {
+  return (
+    <div className="fixed bottom-0 left-0 right-0 top-0 z-[9999] border bg-white p-5 text-black">
+      <h2 className="mb-2 text-xl font-semibold">Private Component</h2>
+      <p className="mb-4">
+        Renderer is a private component. If you are a collaborator and have
+        access to it. Run the following command:
+      </p>
+      <code className="mt-5 rounded-md bg-gray-800 p-2 text-white">
+        npm run generate-renderer
+      </code>
+    </div>
+  );
+}
diff --git a/editor/renderer/renderer.ts b/editor/renderer/renderer.ts
new file mode 100644
index 000000000..b83d71068
--- /dev/null
+++ b/editor/renderer/renderer.ts
@@ -0,0 +1,5 @@
+export function renderFlowJSON(data: any, options?: any) {
+  console.warn("renderFlowJSON is not implemented");
+  console.warn("run the following command to generate the renderer:");
+  console.warn("> npm run generate-renderer");
+}
diff --git a/scripts/generate-renderer.sh b/scripts/generate-renderer.sh
index faf9519e5..0bc2d3e20 100644
--- a/scripts/generate-renderer.sh
+++ b/scripts/generate-renderer.sh
@@ -29,4 +29,6 @@ done
 
 
 # ignore the worktree changes for the editor directory
-git update-index --assume-unchanged editor/readonly-editor.tsx || true
\ No newline at end of file
+git update-index --assume-unchanged editor/readonly-editor.tsx || true
+git update-index --assume-unchanged editor/renderer/index.tsx || true
+git update-index --assume-unchanged editor/renderer/renderer.ts || true