React component for the CodeVideo IDE. Our first "nearly-complete" functionality component for replaying IDE sessions, complete with a file explorer, multiple editor tab support, and a terminal.

IT'S CRITICAL THIS SHIPS TO PRODUCTION ONLY AFTER CONFIRMING THERE ARE NO SSR ISSUES - MONACO IS INFAMOUS FOR SSR ISSUES!

Typically, this is caused by calling monaco.editor by accident, when the react ref globalMonacoRef.current.editor. can be used instead.

There is a Gatsby site (in this repo under the ./example folder) featuring the CodeVideoIDE component in various configurations.

In step mode using the arrow keys to navigate through steps:

https://codevideo.github.io/codevideo-ide-react/step

In replay mode, starting a full replay with sound as soon as the page is interacted with:

https://codevideo.github.io/codevideo-ide-react/replay

In replay mode compatible with puppeteer recording callbacks, starting a full replay with sound as soon as the page is interacted with:

https://codevideo.github.io/codevideo-ide-react/puppeteer

Install the package itself via npm:

npm install @fullstackcraftllc/codevideo-ide-react

Ensure that you include radix CSS in your project. For frameworks like Next.js, you can include this in the root of your project:

import "@radix-ui/themes/styles.css";

For Gatsby, add this to your gatsby-browser.js and gatsby-ssr.js files:

require('@radix-ui/themes/styles.css');