A Codepen clone built using Vue 3 ( Composition API ), Tailwind CSS, Splitpanes and Monaco Editor
📌 Playlist – https://www.youtube.com/playlist?list=PLpM_sf_d5YTOsK3tblHW7RkVB8QUfFEEv
📌 Code – https://github.com/mohitkumartoshniwal/codepen-clone-vue
📌 Live – https://codepen-clone-vue3.vercel.app/
Social Media Links:
🎯 https://www.linkedin.com/in/mohitkumartoshniwal/
🎯 https://twitter.com/MohitKumarTosh1
#codepen #tailwindcss #vue #vue3 #monacoeditor #vueproject #typescript #splitpanes #vueuse
Welcome back to my YouTube channel in this video we’ll be building a basic uh Cod pin clone using V3 tailin CSS and Monaco editor as you can see the demo of this cman clone we have H1 tag we can write H1 tag here and we can give some color
Also it’s going to give us Auto completion which we normally get in vs code and other than that I have written some JavaScript also which is going to basically take the hello world and it’s going to convert to high there as you can see if you have not noticed it this
Hello world after 5 seconds is going to converted get converted to hi there and I’m persisting also using local s so when if you refresh it’s going to be there I’m persisting it using some of the keys code JavaScript code HTML which contains respective code for each of
These one acquir data instances so I think without further thing we getting started now so I’ve already went ahead and created a basic project using white and I’ve already went ahead and configured Tailwind as well as install dependencies so for the Tailwind I some basic uh stuff which you can just follow
From the docs and for dependencies I went to package you can check the package of Jon I have viuu score I’m using it Monaco editor as well as split pains let me tell you if I forgot to tell it basically we can resize it also all these sections as well as the iframe
Below we can expand it also if you’re interested in this feature let me just yeah so this is powered by split pains and I’ve just added a type split pains for it that’s it for dependencies so and I since since we’ll be using View and we’ll be creating everything in
Components let me discuss the components which we’ll be creating the first component will be the top nav bar the second would be the each of these editors these are going to be reusable and the third is going to be the container which is going to contain
This inst these editors as well as uh this if frame so let me create this components first of all by the way in the main. CSS also I have done the tailin stuff and other before starting with the compon let me create some of the things
I’ll be using a couple of types I’ll just create them and I’ll be creating one function which I’ll be using to generate the markup which will be required to be shown in the if frame which I’ll be creating .ts so first for the types let me create an enim type of
Languages this is going to have HTML CSS JavaScript and just a short GS for showing display name instead of showing complete JavaScript here for the storage names I’ll be using Code this I’ll be using for writing local storage Keys then I’ll be needing a payload type
Which I’ll be using in some other place which will become clear in due time which going to contain the code string as as it is going to have the type of languages this is for the types now for the utils it’s going to have a generate function HTML let me export it
Also this is going to have the types of like HTML Cs and JavaScript so let me write them also these are just going to be strings so just write like this instead just writing it out let me just copy paste it to unne time let me explain
You so this is basically going to have the HTML markup and it’s going to have a header tag it’s going to have the Styles as well as a script the style is going to have the CSS and the script is going to have the JavaScript and the body is
Going to have the payload hm this is the the basic stuff so now I think we can get started with the running it also we run it so let me give a body color of something let me create a CSS variable I’ll be using this to decide the height for this Cod
Pen as well as the rest of the height the Cod pen is clone is going to have an height of 4.2 R and the rest is going to have the 100 pH Port minus the 4.2 R so let me close this now let me come to Navar and just add couple of
Template just one template obviously instead writing this basic St I just copy it from here let’s see how it looks okay it’s not going to look anything because I have to replace in COD pen clone kunar let me replace this view also refresh so what weird happen this let’s see if there’s an
Error if this is make sure to extrude it from the component okay I don’t know why not help me out as you can see it works fine where is it never and I need to give it some specific height so for that I’ll use St scope
I’ be using CSS variable I could have went with uh life SC itself but I just wanted to explore just wanted to add CSS variable no specific reason as such for that let’s see what it looks fine or not let me refres it once yeah it works fine so now we need
To come to editor component so for editor Let Me Explain the first of logic what we’ll be having so editor component is going to have get couple of props which is which which are going to be display name as well as the language it’s going to emit an event called code
Change and whatever component which in our case is going to be the main container is going to listen for the changes from past emitted basically by the editor component and based on whatever changes it finds it’s going to basically recall the function this function which we have in the
.ts and it’s going to pass us the J HTML CSS JavaScript whatever it changes and it’s going to basically create a markup for it and it’s going to P it to the if frame which is going to be the main container if some of the things bounced
Off just now then don’t worry I’ll just be writing code and tend to become clear what I me here so we’ll start now first you going to have template template is going to have a diff tag let me again be somewhat lazy and just copy paste some of this stuff
So what I’ve done is here is like I think nothing’s going to be ented now for now but anyway what I’ve done is like I’ve created basic uh div tag which is going to have the display name as the first div and the second div is going to
Be the container which is going to be used by our editor editor Monaco editor instance and we’ll be using ref so that we get a Dom element access because monac edor will need it so that’s it and for the script we can start writing now I’ll using typ script so I’ll use language
TS let me first try to Define props I’m using typescript here it’s up to you if you want to use direct like how we had in V2 but I’m using T script mostly in this project think type should be the better name here I think instead of type let me give language
I basically taken the props and I’ve just D basically created into reactive variables using TS and this display name is going to be used in this T tag let me add it now itself if I it’s better to have it now itself so let me
Have now now we need to write an event image basically we need to write the image also which is going to be the syntax is somewhat weird if you it’s first time seeing it but I think it should be I think you can get us stra later
On like I told you I’ll be using payload here me one thing let me me just close the side and decrease save uh the syntax will be somewhat weird for the first time if you’re seeing it it’s basically I’m defining event which is going to be the
The event name is going to be code change and it’s going to have it’s going to basically send a payload of type this type and the language will be code will be this code and that’s it so we can add it here now so now we need to create container
Which is going to refer the um this container Dom element so we need to add F it’s going to be an HTML element and we need to add editor we need to create an editor variable also uh before that let me import Monaco standard code editor so we’ll be basically writing
Some code in the unmounted hook as well as on the UN on unmounted hook it’s not required as much because we already uh by default this simple application but I’ll be having that also so on the unmounted H basically what I’ll do is like I’ll write I’ll Bic create editor editor equal to
Monaco editor create this is going to get the Dom element and this is going to be in our case container value and and I’ll write as HTML element because if there’s a chance of it to be undefined I’ll be very sure I’ll tell TPT to just ignore it for now and
For uh some options I’ll be having language I guess I already have language I’ll just write language value anyway I think in the P will be using type so it’s better to keep it type only so sorry for this many name changes type. value and the theme will be the Dark
Theme so now I think I forgot to do one more thing like how we have local storage for the local St you need to write the logic in the editor component itself so the local I write a Cod variable I’ll be using used local storage composable provided by view use
Core I need to give it a key the key I’ll be using is like uh it will be storage names do code hyphen the type and default value of empty string so by default it’s going to have an empty string as a value but if it has some other value for some
Reason if there’s some other value instead of string then what I’ll do is like I’ll be emitting the event code change I’ll pass the payload here which will be type will be type. value and the next thing was I guess quod which is going to be the code. value
Because see the thing what happens on the first time in the uh when this editor component gets mounted if it by default it doesn’t have the code it’s okay well and good but if it has the if it has the code then we would like to basically render that code and hence I’m
Doing this by default I’m just emitting a code change event for the first time when the component gets mounted post that there’s something called uh I think editor dot on model change on did change model content so the editor. on Change Model content is the thing is like what
Happens is like we have editor State as well as the view state so we need to sync it up so there are some life you can say life cycle hooks or you can say whatever you name you would prefer basically this matter is going to tell us like when the model content has
Changed and whenever it changes we need to basically update the main content which is going to be listening to all this editor component that something has changed inside it and that’s we need to do that I guess so let me write a code for this I think I did a mistake here
Somewhere this code do value if the code do value is there this emit needs to be in anywhere if the code value is there then what we need to do is like we need to write editor dot set value I guess yeah give code. value so
What happens is like by default when we get mounted and if there is something in theod local storage then we need to first set the editor state so the thing is like editor and the view is going to be somewhat have different states here
So Ed editor is going to have its own uh you can say methods or functions which you can call or listen to so that you know that something has changed in the editor and we need to communic communicate back to the view uh life view basically okay so here uh when any
Editor on Change Model content has been called that means we need to first check if the code got value if it’s not equal to editor. get value if that is the case then we would like to first of all update the code not value to the this is basically we syncing it
Up we’re syncing up uh views representation of the editor component as well as the Monaco instance whatever it actually has and we again teamate the event I’ll just copy this so This should work fine now this function is going to be called um for all of those keystrokes unnecessary keystroke which we might
Type on our Cod plan so it’s better debounce this function I’ll not be going too much in depth of what debounce is as such but I’ll be using a function which already provided a vi vi code Library so I’ll just call it I’ll give it 500 maybe 500 so I’m basically debouncing the
Function for 500 seconds milliseconds I think so yeah so this should do it and one more thing is like I’ll be showing it in a demo itself uh but for now what I’ll do is let just trust me on trust me for this what happens is like whenever we
Resize some like here so what happens is like we would like uh the we would need to basically tell the editor also editor instances that uh something has the basically the viewport has changed on the browser so that it can basically update itself so to do that we’ll be
Using something called use resize obser which is going to listen for the changes of the browser and we need to basically just call call a functioned by editor editor. layout oh yeah I think I missed out you need to tell the what it’s going to listen to it’s going to be continue for
Our case and I think we need to write it also so that we can unmount it Al when when the component when this editor component gets unmounted we would like to first of all dispose this editor instance oh yeah and we would like to stop this also stop resizing listening basically
Stop I think this should be most of the code and let I think yeah if there’s any change we can come back to it anyway so now main contain is going to be the main nity for this application so I think we can get started
Now let me add a template tag for this also and again a scrip tag for the script tag I’ll be using split planes I’ll be adding the CSS here this is going to have some complimentary stuff one is going to be the split pains another is going to have the
Pain so let me just close this and let me just show you to show it to you so first is going to be the main split we’ll be the nice thing of split panes is that you can do nestings because what happens here is like we have couple of
Things we would like a nting we would like suppose the first container is going to basically we would like it to allow us to resize this container as well as all these three containers or edor components you can see so first let me write a template tag let me have the
Basic Market them more clear I’m going to have a main tag which is going to have split pains then it’s going to have first pain which is going to contain our all of our editor components the second pane which is going to contain our if
Frame if frame is also going to have a ref container ref so that we can access it it’s going to have allow scripts I think scripts going have sandbox equal to allow scripts so is going to allow our script to run but it’s not going to
Allow I guess and split pains the first and inside the first pain we’ll have again split pains so that’s what I’m talking about like we can do nesting here then it’s going to have the DAT components let me give the type I guess yeah the first one is going to have type as
HTML I think it’s we need to have the first I have to give a bind using colon then I can use languages do HTML then we are going to have display name is again going to have HTML so for the second one is going to be CSS
Display name is also going to be same third is going to be JavaScript we’ll write JavaScript or what JS you can see the type it should be GSS okay this is going to be GS and the display name is going to be short GS and like I told you previously we’ll be
Having code change function we’ll be only calling one function which is we’re going to write now on change let me copy paste for of them let me add a function for it also it should be in here function on change is going to take get a payload let me copy the payload from
Here so you’re going to have the type now and we need to write if payload do type if it’s equal equal to the first one we be checking if HTML payload then writing some stuff for the HTML else if before that I think it’s better for me
To write couple of things let HTML code similarly I’ll be having CSS code similar I’ll be having GS code I’ll also be having I frame HTML iame element let me import ref also so now I’ll write it here so it Mak sense to you now so I’ll be taking a
Type if the type is HTML and I just update the HTML code similarly let me just copy paste it and just change them so suppose if the type is CSS I’ll be updating a CSS code if the type is Javascript I’ll be updating a JavaScript code and this should make sense for you
Now so whenever any of these changes like I told you previously whenever any of these changes I’ll be basically updating the Source doc of the if frame which is going to be using generate HTML it’s going to get HTML second is going to be CSS thir is going to be JavaScript and I think Ty is going to complete now I’m just keeping typescript somewhat happy using this so anyway I frame is changing so let us see now something should be coming up now at least so nothing is coming because you
Have not added in your main container let’s see now the errors I guess so there are couple of Errors you regards to web workers so let me fix that I went ahead and fixed it using something uh I imported a couple of libraries B I’ve I basically imported a couple of
Things in this component like editor worker Json worker and I just pasted this spp of code uh honest speaking I’m not completely aware I think it does something with regards to web worker so I’ll not be explaining in depth here but it fixes the issue and there’s some
Other issue which is coming for split pains I think this should fix after we write start writing proper code because currently what I’ve done is like I have not given any kind of uh height to the main itself so we need to do that so for that we’ll write Style
Scoped this should give a some high to the main now as you can see now we have something here and it should do it but let me if I missed out like the split print is required you need to import this also for the CSS to
Work okay we’ll be adding it now and for split me let me first do a couple of things so let me first of clarify uh there’s some kind of terminology where you can say it’s better intuition if you would like the split P like how we have in here
It’s kind of a column you can imagine like two Dives are there one and two we have a column selection and so we are going to be using horizontal now here and similarly for a second one for a second we’ll be having suppose Row one hence we’ll be using vertical so what we
Just giving trying to give an intuition and we need to give width and height to all of them first one should be here let me copy this and give it to all of them weird it’s still not fixed okay I understood the issue the issue was with that each of the
Components whichever whenever you’re putting inside split pan need to be wrapped inside P we have done for the upper level but we have not done for the lower level so have to WRA with all of the editor components also pain I had missed it out I that’s what it was the was coming
Anyway from the sprit P anyway hopefully the error goes now let me as you can see there is some output but it’s not looking like how we have in here so let me do something let me first of all paste this part this is basically going to allow us to give some Min
Height to the bottom resizer and some height or some width to the vertical splitter as you can see it’s saying splitter horizontal splitter pains it’s going to basically Target here this element and this sud this elector is BIC going to Target these Dev elments and the reason it’s not working is like I
Have to remove scope from here as you can see it’s working fine I guess and I think I had given some border here also to make it look some better let me add add here also I’ll just copy it from NAA well I think it looks fine I
Guess now let me see the output whether everything works fine or not as you can see HTM is working fine let me one here hello world weird it’s not working I think the issue is with editor I guess on the Chain model content this should get a listener by default okay
Let me do one thing I’ll just try to remove this and see that work sign save refresh let us see again now for body I’ll give background color of white yeah it’s somewhat working but there’s some issue with I frame I guess now so I frame also I need to give it a
Width of full and a height of full save now I can just copy all of the stuff which you already have here and just see whe it works fine or not yeah it’s working fine let me open the application Tab and see the local stores it’s storing it
Also okay I think this is work fine I guess so this was it and now we can basically do that also yeah let me show you one I think I missed out to tell you like whenever you zoom out it’s going to basically expand it and I think it might
Be annoying I guess so to avoid this you need to give to it let me come here and for each P I need to give Min size equal to 20 here also I need to give men size equal to five at least just copy it for all of them past
Refresh now let’s see it works fine or not yeah as you can it’s working fine this is also working fine yeah so I think this was it for this whole videos and hope to see in other videos also because I’m planning to have a lot more
Videos on V3 so that’s it I guess for this video and bye