DEV Community

Somnath Pan
Somnath Pan

Posted on

2 1 1 1 1

Creating A Lightweight Code Editor Using Vanilla Js

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.

Top comments (8)

Collapse
 
ashutosh_dev profile image
Ashutosh_dev β€’

Nice try if you're a beginner. I even made my own code editor back in high school. Check out tonyedit.netlify.app (UI copied from an app).

Collapse
 
codevsom profile image
Somnath Pan β€’

I am currently in high schoolπŸ˜…

Collapse
 
ashutosh_dev profile image
Ashutosh_dev β€’

That's great.
Last year, I passed 12th and am currently preparing for JEE in my drop year

Thread Thread
 
codevsom profile image
Somnath Pan β€’

Oh wow! That's really great!
I'm currently in grade 8,
I also want to prepare for JEE
Sorry, previously I said I am in high school,I am actually in 8th grade

Thread Thread
 
codevsom profile image
Somnath Pan β€’

If you don't mind,can you please tell me what was your JEE rank in your first attempt? Please...

Thread Thread
 
ashutosh_dev profile image
Ashutosh_dev β€’

I think we should talk somewhere else
Let's talk on Telegam
Here is My telegram

Collapse
 
codevsom profile image
Somnath Pan β€’

I checked your code editor, it's really amazing 😍
You've really built a great web app!
Well,can you please tell me how you made the python editor?

Thread Thread
 
ashutosh_dev profile image
Ashutosh_dev β€’

I used skulpt.js for python
Here is the documentation skulpt.org