Creating A Lightweight Code Editor Using Vanilla Js
Somnath Pan
Posted on October 4, 2024
Hey there!👋🏼
I am excited to share my new project,NEXON,a simple frontend code editor,
Which i built using vanilla js.
Introduction
Nexon,is a simple & lightweight online code editor, which allows you to write frontend code online,
It also provides a robust project Management,where you can save your projects,edit them & also you can download your projects in .html format!
features
- project management
- live code preview
- download feature
- simple & intuitive UI
technologies & libraries used
- html
- javascript
- litestyle.css
- FileSaver.js
Check out my project
the idea
Yesterday,boredom struck & i decided to build something and thus,NEXON was born
the process
So firstly,i designed the UI,I planned to use litestyle.css,Which is a css framework I built a few months ago, because I wanted to check it's capabilities,
& Then i wrote the js,for this,
I've used a simple iframe and an textarea,where the value of the textarea is set as the srcdoc of the iframe,whenever you type.
I leveraged local storage,for storing user data.
challenges faced
Implementing,the download feature,proved to be tricky,so I used FileSaver.js to overcome this challenge
lessons learnt
Building NEXON was a great learning experience.
Building NEXON,helped me to solidify my JAVASCRIPT knowledge,
& Also I have learnt the importance of writing modular code.
Conclusion
Building NEXON,marks a significant milestone in my front end journey, showcasing the power of vanilla JS.
Posted on October 4, 2024
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
February 16, 2024