Up next in 10
Build React W3Schools & Codepen Clone HTML,CSS & JS Code Editor in Browser Using CodeMirror Library
Jun 3, 2025
Buy the full source code of application here:
https://procodestore.com/index.php/product/build-react-w3schools-codepen-clone-htmlcss-js-code-editor-in-browser-using-codemirror-library/
Watch My Visual Studio Code IDE Setup Video For Fonts,Themes & Extensions
https://youtu.be/Bon8Pm1gbX8
Hi Join the official discord server to resolve doubts here:
https://discord.gg/cRnjhk6nzW
Visit my Online Free Media Tool Website
https://freemediatools.com/
Buy Premium Scripts and Apps Here:
https://procodestore.com/
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video So
0:02
in this video I'll show you uh I built
0:05
this ReactJS uh code pan or W3 schools
0:09
code editor right in the browser itself
0:11
So you can see it is running inside the
0:13
browser We are running it on local host
0:16
I've also deployed this website on my
0:18
website freemediatools.com You can check
0:21
out the live demo as well It's a simple
0:24
HTML CSS and JavaScript code editor
0:29
sim uh particular useful for building
0:31
web
0:32
applications So it's similar to the
0:34
interface of code pen which is a very
0:37
popular website If you visit
0:39
codepen.io here you can actually create
0:42
a simple HTML CSS or JavaScript file
0:46
It's similar to this So you write we
0:48
have this area for writing HTML code
0:51
Then we have area for writing CSS and
0:53
then we have the area for writing
0:54
JavaScript
0:56
So if I write here HTML code here you
0:59
will see it will automatically as I am
1:01
writing the code it is automatically
1:03
compiling the
1:06
code You will see the output appearing
1:09
right in the bottom
1:10
here You can apply the CSS here We can
1:13
target this H1
1:19
element So we can change the
1:22
color to red You can apply a background
1:25
color
1:31
property You can see that we
1:34
can target the entire
1:40
body So in this easy way this is
1:42
actually a HTML CSS and JavaScript
1:45
editor So it's similar to codepan or
1:48
w3schools.com And you can even visit my
1:50
website to check out the live demo So
1:53
this is the tool here which is react
1:55
code editor Simply go to this You can
1:58
try
1:58
this If you are interested in purchasing
2:01
the full source code of this project
2:03
guys So the link is given in the
2:04
description You can go to my website
2:06
procodestore.com So you will get the
2:08
full source code After you purchase it
2:11
you will get this full directory
2:13
structure which will contain you will
2:16
get it this uh zip file You just need to
2:18
extract this uh this will contain the
2:21
full ReactJS project which is built
2:24
using JSX You will see each component is
2:27
divided into its own component file
2:29
which is built using JSX And if I show
2:32
you the package JSON file you will see
2:34
we are using the latest version of React
2:36
which is 18.2.0
2:39
And for building this uh code syntax
2:42
highlighting for doing the syntax
2:43
highlighting we are actually using this
2:46
uh library called as code
2:50
mirror So code mirror is a very popular
2:54
open-source package for syntax
2:56
highlighting if you are building any
2:58
sort of coding related application So
3:00
it's used for syntax highlighting
3:02
purposes So we using this open source
3:04
package inside ReactJS So there is this
3:07
package here react code
3:09
mirror So you can see this is a
3:12
fullyfledged application If you want to
3:14
run this application locally you just
3:16
need to execute the command npm run
3:18
start So this will start your
3:20
application locally at localhost 3000 So
3:23
this is actually the project here The
3:25
link is given in the description guys
3:28
You can also open this project locally
3:30
So now this will open this project
3:33
locally on this and then you can repeat
3:40
this You can have a button
3:48
here So you can see the syntax
3:51
highlighting So here you will do your
3:54
can bind a simple
4:03
a
4:04
function to this button right here So
4:06
when we click this button we are
4:08
executing this function So we can now
4:10
define this function inside our
4:18
JavaScript So now what happens if you
4:20
click the button you will see
4:23
this function will execute
4:32
So I think the spelling of on
4:37
click So this is you can try this You
4:40
can make it you can resize the windows
4:42
here accordingly If you want more space
4:45
you can do this like
4:47
this So the layout you can control it
4:50
accordingly So before purchasing it you
4:53
can try this tool on my website which is
4:55
hosted here
4:57
freemediatools.com/reactcode editor On
4:59
the checkout page also I've given this
5:01
link So if you're interested guys this
5:03
is a fullyfledged project If you are a
5:05
student or applying for a job this will
5:07
be a great project to get started You
5:09
will get to know how I executed or built
5:12
this project And once you get the source
5:14
code you can also modify the source code
5:17
as well So thank you very much for
5:19
watching this video and uh I will be
5:22
seeing you in the next
#Scripting Languages