https://github.com/Sim3-14159/simplicode
An online HTML editor and website designer, with a live preview and a built-in AI assistant.
https://github.com/Sim3-14159/simplicode
ai assistant best built-in code console design edit editor highlight html javascript js live online preview program syntax syntax-highlighted website
Last synced: 5 days ago
JSON representation
An online HTML editor and website designer, with a live preview and a built-in AI assistant.
- Host: GitHub
- URL: https://github.com/Sim3-14159/simplicode
- Owner: Sim3-14159
- License: mit
- Created: 2025-10-13T04:30:28.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2025-12-19T23:39:39.000Z (about 1 month ago)
- Last Synced: 2025-12-21T11:12:27.574Z (about 1 month ago)
- Topics: ai, assistant, best, built-in, code, console, design, edit, editor, highlight, html, javascript, js, live, online, preview, program, syntax, syntax-highlighted, website
- Language: HTML
- Homepage: https://sim3-14159.github.io/simplicode/
- Size: 1.13 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
$$\color{blue}{\text{SIMpliCode}}$$
[ 
](https://sim3-14159.github.io/simplicode)
**SIMpliCode** is an AI assisted *HTML* editor and website designer with import/export options, automatic save, and a live preview. You can export your code and chats. In the codespace, you and AI can work together at the same time, on the same code. You can see the website [here](https://Sim3-14159.github.io/simplicode).
> [!IMPORTANT]
> **SIMpliCode** is a work in progress, and is not finished yet. Therefore, some features may not work yet:
>
>
>> #### To Do:
>> - [ ] Get ~~**Settings** button~~ menubar buttons to work
>> - [ ] Add accounts
>> - [ ] Change deployment from GitHub Pages to Vercel
>> - [ ] Enable use of virutal files so that users can create their own files (*e.g.* ``)
>> - [ ] Make sure automatic indentation keeps the cursor in the same position
>> - [ ] Use better AI API (sort of fixed)
>> - [ ] Add console
>> - [ ] Move buttons from sidebar to menubar.
>> - [ ] Make all buttons in ~~sidebar~~ menubar work
>> - [ ] Get ~~**Find**, **Replace**, etc.~~ buttons above codespace to work
>> - [ ] Let AI edit code in codespace directly
>> - [x] Add menubar
>> - [x] Add fullscreen mode for ~~console and~~ preview
>>
>> :x: ~~Sanitize output from AI~~
>>
>> …
---
#### [`✨ Features`](#features)⋅[`🛠️ Tech Stack`](#tech-stack)⋅[`🔧 How It Works`](#how-it-works)⋅[`📦 How to Run`](#how-to-run)⋅[`🗂️ File Tree`](#file-tree)⋅[`📝 License`](#license)
---
✨ $\color{green}\text{Features}$
- 🧠 $\color{green}\text{AI-Powered Chat Assistant}$
**SIMpliCode** has a built-in AI assistant that can help you with designing your website, without the need to go searching through your code to copy and paste. Type questions or coding issues in the chat panel, and formatted answers and working code.
- 💻 $\color{green}\text{Live Code Editor}$
Powered by [CodeMirror](https://codemirror.net/), you can write and edit *HTML*, *CSS*, and *JavaScript* — with syntax highlighting, real-time preview, automatic indentation.
- 📤 $\color{green}\text{Import/Export Options}$
* **Download Chat** – Export your conversation with the AI as a *rich text file* (`.rtf`).
* **Download Code** – Save your current HTML project as a file.
* **New Project** – Reset everything to start fresh.
- 📥 $\color{green}\text{Auto Save}$
Any code you write is automatically saved to your browsers local cache, so you don't need to worry if you forgot to export it.
---
🛠️ $\color{darkorange}\text{Tech Stack}$
$\color{orange}\text{Libraries:}$
- [CodeMirror](https://codemirror.net/) – Live code editing
- [Marked.js](https://marked.js.org/) – Markdown parsing
- [Highlight.js](https://highlightjs.org/) – Syntax highlighting in chat
- [Orphues AI](https://orpheus-ai.onrender.com) – Artificial intellegence
$\color{orange}\text{CDN Assets:}$
- Icons from [Icons8](https://icons8.com)
---
🔧 $\color{purple}\text{How It Works}$
* User writes code in a live editor
* User types a message or question in the chat input
* The assistant responds with suggestions and/or changes the code
* Code changes immediately reflect in the preview window
* Chat and code can be downloaded locally and uploaded again later.
---
$\color{cyan}\text{📦 How to Run}$
Simply open [`index.html`](index.html) in any modern browser:
```bash
git clone https://github.com/Sim3-14159/simplicode.git
cd simplicode/
open index.html # or double-click to open in browser
```
or, [click here](https://Sim3-14159.github.io/simplicode).
---
🗂️ $\color{brown}\text{File Tree}$
| Type | Name | Description |
|:---|:---|:-----|
|  | [`CODE_OF_CONDUCT.md`](CODE_OF_CONDUCT.md) | The code of conduct for contributing to **SIMpliCode** |
|  | [`CONTRIBUTING.md`](CONTRIBUTING.md) | A guide to how to contribute |
|  | [`LICENSE`](LICENSE) | Copyright |
|  | [`README.md`](README.md) | This **README** |
|  | [`favicon.ico`](favicon.ico) | The **SIMpliCode** icon: 
|
|  | [`index.html`](index.html) | `index.html` is where most of the action takes place; it's what will load if you visit **SIMpliCode** |
|  | [`style.css`](style.css) | Styles `index.html` |
|  | [`assets/`](assets/) | Contains most of the site assets |
||  | [`assets/og-image.png`](assets/og-image.png) • When you send a link on social platforms, this image will pop up |
$\color{pink}\text{📝 License}$
$\color{pink}\text{MIT}$ — feel free to use, modify, and share.