Haze Editor

Haze Editor is an HTML, CSS, and JS code editor with version management, integrated Todo app, plugins, and more.

LIVE: haze-editor.vercel.app
BACKUP: bethropolis.github.io/haze-editor

Table of Contents

• Haze Editor
  • Table of Contents
  • Introduction
  • Installation
  • Features
    • Code editor
    • version management
    • Library management
    • Todo app
    • Plugins
    • More
  • Plugins
    • building a plugin/theme
    • testing a plugin/theme
  • Issues
  • License

Introduction

Haze Editor is a HTML, CSS, and JS code editor that provides version management, integrated Todo app, plugins, and more. It was developed as a fun project and we hope you enjoy using it.

Installation

To install and run Haze Editor locally, follow these steps:

git clone https://github.com/bethropolis/haze-editor.git
cd haze-editor
npm install

You can use the following command to run it:

npm run dev

To build for deployment, use the command:

npm run build

Features

• Code editor
• Version management
• Library management
• Todo app
• Plugins
• more

Code editor

The code editor in Haze Editor supports HTML, CSS, and JS. It provides features such as syntax highlighting, auto-completion, embedded browser preview, code export, and code import.

version management

It comes with a built-in custom-made version control system, allowing you to manage and track changes to your code effectively.

Library management

This allows you to manage external JS & CSS libraries. The cdnjs API is used to search and get the latest version of a library.

Todo app

This is an in-built todo list app. You can use it to keep track of your tasks, and mark them as done.

Plugins

Extend and customize the editor by adding plugins and themes. Plugins allow you to enhance the functionality of the editor, while themes provide different visual styles.

More

• Themes: Customize the visual appearance of the editor with various themes.
  
  
• Settings: Configure the editor according to your preferences.

Plugins

Plugins allow you to personalize and extend the Editor;

building a plugin/theme

To build a plugin you need to create a json file with the following structure:

 {
  "name": "Aura Theme",
  "description": "A beautiful and elegant theme with a soothing color scheme.",
  "version": "1.0.0",
  "type": "theme", 
  "file": "path/to/theme/file.css",
  "author": "John Doe"
}

"name": The name of the plugin or theme
"description": A brief description of its features or visual style
"version": The version number of the plugin or theme
"type": Specify whether it is a "plugin" or a "theme"
"file": The path to the CSS/JS file that contains the styling or functionality of the plugin or theme.
"author": The name of the author or creator of the plugin or theme

testing a plugin/theme

To try out your plugin or theme, open the Haze Editor, go to the Plugins section, and click the "Load plugin" button.

Themes can also be tested and edited directly in the editor.
Naigate to settings > turn on Theme Editor Mode.

Issues

If you encounter any problems or have suggestions for improvement, please report them on Github issues.

License

Nothing says more open source than MIT.

Happy Coding! 💜