Go back to home page

Reflection editor

A self-hosting web code editor (for Hack Club CodeJelly)

HTML/CSS/JS
React
Service workers
Serverless functions

Video demo of CodeJelly entry (out of date version)

Thumbnail of video demo

Reflection editor is a code editor that edits its own code, and uses modern web technologies to run everything on your browser. A "file system" is stored in your browser's IndexedDB, and a service worker serves the pages as if it was an actual server. As much of the code as possible is editable directly from the editor, from the editor frontend (written with React and Monaco) to the service worker's network request handler. Babel is used in the worker to transpile the source code from TypeScript with JSX to plain JavaScript.