Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/bethropolis/haze-editor
Haze Editor is an HTML, CSS, and JS code editor with version management, integrated Todo app, themes and plugins.
https://github.com/bethropolis/haze-editor
beercss code code-editor css editor html js madewithsvelte svelte theme
Last synced: about 3 hours ago
JSON representation
Haze Editor is an HTML, CSS, and JS code editor with version management, integrated Todo app, themes and plugins.
- Host: GitHub
- URL: https://github.com/bethropolis/haze-editor
- Owner: bethropolis
- License: mit
- Created: 2023-05-31T12:56:27.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-06-14T07:45:56.000Z (5 months ago)
- Last Synced: 2024-06-14T19:52:00.190Z (5 months ago)
- Topics: beercss, code, code-editor, css, editor, html, js, madewithsvelte, svelte, theme
- Language: Svelte
- Homepage: https://haze-editor.vercel.app
- Size: 6.47 MB
- Stars: 18
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Haze Editor
[](https://madewithsvelte.com/p/haze-editor/shield-link)
Haze Editor is an HTML, CSS, and JS code editor with version management, integrated Todo app, plugins, and more.
LIVE: [haze-editor.vercel.app](https://haze-editor.vercel.app)
BACKUP: [bethropolis.github.io/haze-editor](https://bethropolis.github.io/haze-editor/)
## Table of Contents
- [Haze Editor](#haze-editor)
- [Table of Contents](#table-of-contents)
- [Introduction](#introduction)
- [Installation](#installation)
- [Features](#features)
- [Code editor](#code-editor)
- [version management](#version-management)
- [Library management](#library-management)
- [Todo app](#todo-app)
- [Plugins](#plugins)
- [More](#more)
- [Plugins](#plugins-1)
- [building a plugin/theme](#building-a-plugintheme)
- [testing a plugin/theme](#testing-a-plugintheme)
- [Issues](#issues)
- [License](#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:
```shell
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:
```json
{
"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](https://github.com/bethropolis/haze/issues).
## License
Nothing says more open source than MIT.
Happy Coding! 💜