Open-Source Web-Based Code Editor

Introduction

This is an open-source, web-based code editor designed for educational and academic use, such as embedding code examples on websites.

Demo: https://michaelwehar.github.io/Open-Source-Embedded-Code-Editor/

Features

• Customizable toolbar
• Line numbers
• Resizable
• Fonts and colors
• Find and replace
• Word count and statistics
• Save to file
• JSON configuration
• Supports typing animations
• MIT License

JSON Configuration

The editor settings are configured in a JSON file that defines customizable parameters. This file allows users to easily modify the appearance and functionality of the code editor.

Current Parameters:

• width
• height
• color
• backgroundColor
• fontFamily
• fontSize
• toolBarBackgroundColor
• toolBarTextColor
• toolBarButtonColor
• tabLoad
• textWrapLoad
• parensLoad
• hideToolbar

Additionally, dropdown and action buttons can be customized with the following parameters:

• dropdownMode
• dropdownSettings
• actionButtonMode
• actionButtonSettings

Example Use Case

Research Project (Summer 2025)

During Summer 2025, Nick Baldev worked with Professor Michael Wehar to create a code editor intended for educational use cases. Additionally, this code editor was tailored for usage in Michael Wehar's continuing CS Education research project called AlgoArt which is a platform (available @ AlgoArt.org) for algorithmic art generation. It required a lightweight and easy to embed code editor that would allow users to modify the algorithms directly within the browser. Since the existing code editors that were tested had several problems, Michael and Nick decided to create one from scratch.

License

• MIT

Credits

• Nicholas Baldev
• Michael Wehar