Skip to content

CodeSafe is a web-based code editor with live preview, syntax highlighting, and seamless import/export for HTML, CSS, and JavaScript.

Notifications You must be signed in to change notification settings

AkshatJ2002/Live-Code-Editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🚀 CodeSafe

Check out Now

CodeSafe is a powerful, web-based code editor designed to make your development process smooth and efficient. With its built-in syntax highlighting, live preview, and seamless import/export functionalities, CodeSafe is your go-to tool for writing and testing HTML, CSS, and JavaScript code all in one place.

🌟 Features

  • 💻 Syntax Highlighting: Built-in syntax highlighting for HTML, CSS, and JavaScript using CodeMirror, making your code easy to read and debug.
  • ⚡ Live Preview: Instantly see your code in action within the built-in preview pane, powered by a secure iframe and Blob URLs.
  • 📂 Import/Export: Effortlessly import and export your code snippets:
    • Import HTML, CSS, and JavaScript files separately with a click.
    • Export your code snippets as individual files.
  • 🎨 Customizable UI: Sleek, dark-themed interface with Font Awesome icons for an intuitive user experience.
  • 💾 Persistent Code: Your code stays in the editor even after reloading the page, so you never lose your progress.

🛠️ How It Works

  1. Write Your Code: Use the editor to write HTML, CSS, and JavaScript code.
  2. Live Preview: Your code is rendered in real-time in the preview pane.
  3. Import Code: Easily import existing code files with the upload button ().
  4. Export Code: Save your code by exporting HTML, CSS, and JavaScript files with the download buttons ().

🔧 Tech Stack

  • HTML5: The foundation of the web content.
  • CSS3: For styling and layout.
  • JavaScript: The brains behind the editor's functionality.
  • CodeMirror: Provides syntax highlighting and code editing features.
  • Font Awesome: Icon library used for a modern and clean UI.
  • Blob URLs: For secure and isolated code execution in iframes.

💡 Future Enhancements

  • Version Control: Integrate with GitHub for version control and code sharing.
  • Collaboration: Real-time collaborative editing.
  • Themes: Add more themes for personalized user experience.

📬 Contact

For any inquiries or suggestions, feel free to reach out via Akshat Jain or open an issue on GitHub.

About

CodeSafe is a web-based code editor with live preview, syntax highlighting, and seamless import/export for HTML, CSS, and JavaScript.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published