React Code View is a React component library for rendering code with live preview and syntax highlighting. It provides a CodeView component that combines an editable code editor, live preview, and syntax highlighting, allowing developers to create interactive code examples. The library includes build tool plugins (unplugin) for Vite, Webpack, Rollup, esbuild, and Rspack that enable importing markdown files as React components with automatic code block processing. At its core, it uses Sucrase for JSX/TS transformation, Shiki for syntax highlighting, and CodeMirror 6 for the editing experience, with code execution happening in a sandboxed environment.
The kotlin-playground repository provides a self-contained web component for embedding interactive Kotlin code editors in websites. It enables users to write, run, and see the output of Kotlin snippets directly in browser environments, supporting multiple target platforms (JVM, JavaScript, WebAssembly, Native) via communication with the Kotlin compiler service. The architecture follows a modular client-side design with clear separation between UI components (CodeMirror-based editor), execution logic, and API communication. Key features include automatic initialization via HTML attributes, configurable themes and compiler versions, extension points for custom event handlers, and iframe-based sandboxing for secure code execution. While dependent on the external kotlinlang.org compiler service, the frontend implementation demonstrates solid engineering practices with reusable patterns for API abstraction, configuration management, and platform-specific execution handling.