DEV Community

0 seconds of 2 minutes, 24 secondsVolume 90%
Press shift question mark to access a list of keyboard shortcuts
00:00
00:00
02:24
 
Lu-Vuong Le πŸš€
Lu-Vuong Le πŸš€

Posted on

23 7

Building a Code Editor for the Web - Introduction

In this video series, we're going to look at how to create our own simple code editor for the web or in the browser.

You'll see the process and tools we can use to make something like this as we replicate the code editor on the MDN Web Documentation as the goal.

If you'd like to see more of my videos, head over to Youtube! A follow/sub comes a long way to show support

Expect more content for this project so stay tuned! πŸ”₯πŸ”₯

Follow and connect with me on:

🐦 Twitter: https://twitter.com/coderarchive
πŸ“š Github: https://github.com/luvuong-le
πŸ’Ό LinkedIn: https://www.linkedin.com/in/lu-vuongle/
πŸ“· Instagram: https://www.instagram.com/coderarchive/
πŸ“ Dev.to: https://dev.to/coderarchive

Top comments (7)

Collapse
 
thenaman047 profile image
TheNaman047 β€’

Hey, I am looking for a way to provide code completion in Browser similar to how we get in VS Code. Currently for JS.

Can you just point me what to checkout to accomplish this.

Collapse
 
coderarchive profile image
Lu-Vuong Le πŸš€ β€’

There's a lot of different libraries for a code editor in the browser, I'll be making use of the Ace editor for these videos but what Jakub suggested is probably your best bet for what you're looking for

Collapse
 
jakcharvat profile image
Jakub Charvat β€’

Have a look at Microsoft’s Monaco editor, it’s what powers VSCode under the hood and should be embedable in a webpage. Haven’t tried it yet though

Collapse
 
streetcodernate profile image
Nate β€’

Will this tutorial be multiple posts here or do you have video tutorials?

Collapse
 
coderarchive profile image
Lu-Vuong Le πŸš€ β€’

I'll be posting it on both Youtube and Dev! πŸ‘

Collapse
 
sarashamsher profile image
Sara Shamsher β€’

Hi, I am looking for a code editor where I can use speech recognition while coding in python or in my any other language. So can anyone help me out in editor building where I can connect my work.

Collapse
 
leonllrmc profile image
leonllrmc β€’ β€’ Edited

Can you add French subtitles to your video, please

The best way to debug slow web pages cover image

The best way to debug slow web pages

Tools like Page Speed Insights and Google Lighthouse are great for providing advice for front end performance issues. But what these tools can’t do, is evaluate performance across your entire stack of distributed services and applications.

Watch video