$$\color{blue}{\text{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.

Important

SIMpliCode is a work in progress, and is not finished yet. Therefore, some features may not work yet:

To Do:

• Get Settings button to work
• Use better AI API
• Add console.
• Make all buttons in sidebar work
• Get Find, Replace, etc. buttons above codespace to work
• Add char count.
• Let AI edit code in codespace directly
• Fix Code Mirror highlight color
• Add cursor position and line number status.
• Change "New Chat" to "Reload Page"
• Remove unneccessary buttons above codespace
• Sanitize output from AI

---

✨ $\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, 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 – Live code editing
• Marked.js – Markdown parsing
• Highlight.js – Syntax highlighting in chat
• Orphues AI – Artificial intellegence

$\color{orange}\text{CDN Assets:}$

• Icons from Icons8

---

🔧 $\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 in any modern browser:

$ git clone https://github.com/Sim3-14159/simplicode.git
$ cd simplicode/
$ open index.html # or double-click to open in browser

or, click here.

---

$\color{pink}\text{📝 License}$

$\color{pink}\text{MIT}$ — feel free to use, modify, and share.