Build a Browser Code Editor in React (Monaco React Editor)

แชร์
ฝัง
  • เผยแพร่เมื่อ 19 ธ.ค. 2024

ความคิดเห็น •

  • @real23lions
    @real23lions 8 หลายเดือนก่อน +4

    3:00 start of Monaco code editor
    5:47 Language selector
    15:28 Output box

  • @ajaykris7
    @ajaykris7 10 หลายเดือนก่อน +8

    I have been looking for this the longest time.. great tuttorial!

  • @ejirothankgod6585
    @ejirothankgod6585 9 หลายเดือนก่อน +3

    This is Nice...I'd try it soon. Great Work Nikita!

  • @abhaykanwasi881
    @abhaykanwasi881 10 หลายเดือนก่อน +1

    Great content keep it bro... it's something totally new

  • @tokaa6762
    @tokaa6762 7 หลายเดือนก่อน +1

    When you import "editor" at 3:30, what do you do to show the little popup for import ?

    • @nikita-dev
      @nikita-dev  7 หลายเดือนก่อน +2

      ctrl + space

  • @ayushrajpanda8950
    @ayushrajpanda8950 9 หลายเดือนก่อน +2

    what are language versions for c and c++ sir

  • @vannakvy9109
    @vannakvy9109 6 หลายเดือนก่อน +2

    How do we handle input? for example: name = input("Enter the name: ")

    • @nikita-dev
      @nikita-dev  5 หลายเดือนก่อน +1

      Not sure I understand what you mean by this, can you explain more? Are you trying to prompt the user for input through the code written in the editor?

    • @vannakvy9109
      @vannakvy9109 5 หลายเดือนก่อน

      @@nikita-dev Thanks for the reply. I found the solution. I found they use xtermjs for making terminal on the browser and use websocket protocol.

    • @RahulKumar-jo1yq
      @RahulKumar-jo1yq 5 หลายเดือนก่อน +1

      @@nikita-dev Yes, How can we take input from user?

    • @satriarajendra462
      @satriarajendra462 หลายเดือนก่อน

      @@nikita-dev is there any answer for this? i also think maybe user write program that need input like simple temperature converter program

    • @karthikeya48
      @karthikeya48 หลายเดือนก่อน

      @@satriarajendra462 is piston api works ?? Have you tried ?? itz notworking for me

  • @nprn_x
    @nprn_x 6 หลายเดือนก่อน +1

    Really appreciated this! Keep up the great effort.

  • @harryshuman9637
    @harryshuman9637 8 หลายเดือนก่อน +1

    Can you also do a video explaining how to setup a basic project, what tools you use, what difference is between all the Angulars, JNodes, Reacts and whatchamacallits, etc.
    I'm an embedded systems developer, and web-development is like a whole different planet.

  • @deepakjoshi3347
    @deepakjoshi3347 10 หลายเดือนก่อน +3

    Hey bro really appreciate your content but can you tell me how to add c/c++ as they have not specified versions like other langugaes???😅😅

    • @AvikNayak_
      @AvikNayak_ 6 หลายเดือนก่อน

      Please tell me if you get a solution

    • @kunalpal3287
      @kunalpal3287 4 หลายเดือนก่อน

      @@AvikNayak_ add cpp version 10.2.0
      with below snippet
      cpp: `
      #include
      using namespace std;
      int main() {
      cout

  • @AmanKumar-mz3oc
    @AmanKumar-mz3oc 3 หลายเดือนก่อน +1

    Thanks man you helped me a lot!

    • @karthikeya48
      @karthikeya48 หลายเดือนก่อน

      Is piston api working ??

    • @AmanKumar-mz3oc
      @AmanKumar-mz3oc หลายเดือนก่อน

      @@karthikeya48 yup works well

  • @BishalLama-fh8bx
    @BishalLama-fh8bx 6 หลายเดือนก่อน +1

    How to add HTML and CSS??

    • @AvikNayak_
      @AvikNayak_ 6 หลายเดือนก่อน +1

      Did you figure it out?

    • @BishalLama-fh8bx
      @BishalLama-fh8bx 6 หลายเดือนก่อน +1

      @@AvikNayak_ no can you help me

  • @dnyaneshwarmuley
    @dnyaneshwarmuley 6 หลายเดือนก่อน +1

    Great work, How to add code auto complete feature just like java script for other languages ?

    • @nikita-dev
      @nikita-dev  6 หลายเดือนก่อน +1

      there are only a few languages that have intellisense supported out of the box, so there’s not an easy way to add it for other languages

  • @gamithuarunod4026
    @gamithuarunod4026 3 หลายเดือนก่อน +1

    please can you tell me if the code editor can get user inputs after executing the code. like using a Scanner in java to get keyboard inputs. can we do that with your code

    • @BullishMaze
      @BullishMaze 3 หลายเดือนก่อน +1

      no

  • @myke6972
    @myke6972 7 หลายเดือนก่อน +1

    is it possible to put like a file explorer? just like vscode? where you can drag and drop images, files, etc. also, is it also possible for monaco to run HTML CSS JAVASCRIPT and see the preview of the output?

  • @mahrus.rohisyam
    @mahrus.rohisyam 6 หลายเดือนก่อน +1

    Great video, Nikita, may I ask you? How do we enable the snippet when we are typing?

    • @nikita-dev
      @nikita-dev  6 หลายเดือนก่อน +1

      What do you mean by that? Are you talking about my VSCode editor, or the in-browser editor?

  • @vienong2772
    @vienong2772 6 หลายเดือนก่อน +1

    How to enter data from the keyboard?

  • @keshvi1699
    @keshvi1699 3 หลายเดือนก่อน +1

    Can python be included in language options?

  • @aakashrajbhar25
    @aakashrajbhar25 9 หลายเดือนก่อน +1

    How to take input and run the output

  • @aayushpatidar27
    @aayushpatidar27 8 หลายเดือนก่อน +1

    How can I get keyword suggestion of the selected language?

  • @frustratedsid2312
    @frustratedsid2312 9 หลายเดือนก่อน

    This tutorial is the best. Can you please make another video where we can change the highlighting of the code?

  • @ParthaSutradhar
    @ParthaSutradhar 8 หลายเดือนก่อน +1

    Can we do Javascript Debugging here within Manaco Editor?

  • @JohnsonThieu
    @JohnsonThieu 9 หลายเดือนก่อน +2

    Can this be done without using an API?

    • @sihamharimech1232
      @sihamharimech1232 7 หลายเดือนก่อน

      well I think you can do it but you will have to hardcode the execution and the compilation process for every langages and also you will have to implement security functions to prevent any injections

  • @rishisingh1034
    @rishisingh1034 8 หลายเดือนก่อน +1

    how can i include c++ language options??

  • @JaiminPatel-q8o
    @JaiminPatel-q8o 3 หลายเดือนก่อน +2

    great tutorial, but why the api is not working?

    • @karthikeya48
      @karthikeya48 หลายเดือนก่อน

      Is piston api working ??
      Not working for me

    • @KrishT0
      @KrishT0 3 วันที่ผ่านมา

      @@karthikeya48 its working for me, whats your issue tell me

    • @karthikeya48
      @karthikeya48 2 วันที่ผ่านมา

      @@KrishT0 Itz fine now..

  • @PRISM600
    @PRISM600 7 หลายเดือนก่อน +1

    How can i add C++ here? I tried with cpp different version but couldnt able to execute it for cpp,,it would be helpfull if you guide me with this..Thank you..

    • @sanvisingh9512
      @sanvisingh9512 4 หลายเดือนก่อน +1

      Found method to do this??

    • @PRISM600
      @PRISM600 4 หลายเดือนก่อน +1

      @@sanvisingh9512 i didn't implemented, But u have to create your own api for that, Create an api where all those languages are available snd loop through it just like the tutorial.
      Btw i added input section.

    • @sanvisingh9512
      @sanvisingh9512 3 หลายเดือนก่อน +1

      Use version 10.2.0 for cpp and it'll work
      const getRuntimes = async () => {
      const response = await API.get("/runtimes");
      console.log(response.data);
      }; and you cn run this to find all other available languages and their versions.
      Thank You!

    • @sanvisingh9512
      @sanvisingh9512 3 หลายเดือนก่อน +1

      @@PRISM600 Yepp Ithink so there is a feature in the API itself and it takes input using stdin in the API post call

  • @francopoffo
    @francopoffo 9 หลายเดือนก่อน +1

    does it work on next.js pages router?

    • @nikita-dev
      @nikita-dev  9 หลายเดือนก่อน

      yes, you’ll just need to add “use client” to the top of the file that uses the Editor component

  • @shwetanshu13
    @shwetanshu13 7 หลายเดือนก่อน

    Thank you so much for the tutorial bruv

  • @PawanSingh-i5e5g
    @PawanSingh-i5e5g 8 หลายเดือนก่อน +1

    How to give input in this ?

  • @frustratedsid2312
    @frustratedsid2312 9 หลายเดือนก่อน +1

    Heyy... Are there any limitations for the number of API requests that we can make ?

    • @nikita-dev
      @nikita-dev  9 หลายเดือนก่อน +1

      There probably is, I would check the documentation

  • @hwapyongedouard
    @hwapyongedouard 7 หลายเดือนก่อน +1

    nice nice, can we store the code as Jason or plain text ?

    • @nikita-dev
      @nikita-dev  7 หลายเดือนก่อน +1

      yes you can store it as plain text

  • @Omega23-mv9hx
    @Omega23-mv9hx 7 หลายเดือนก่อน +1

    bro but how we can take user input

  • @anasstber7584
    @anasstber7584 10 หลายเดือนก่อน +1

    Hey Nikita! Thanks so much for the videos, they are AMAZING literally! by the way, excuse that i will ask something outside of the scope of this video, and the reason is i wanna make sure you can see my comment, i just watched your custom Hook useQuery video (wonderful explanation), however what you did is very similar to the TansTack useQUery library, if you are familiar with it, and so that's why I'm confused, why would you build it instead of just doing Tanstack, there is definitely something you know that we may not. Please explain, thank so much in advance!!!

  • @Jay-pj7ob
    @Jay-pj7ob หลายเดือนก่อน

    Is there any way we can run the code of an external library, after installing it ?

    • @nikita-dev
      @nikita-dev  25 วันที่ผ่านมา

      what do you mean by that?

  • @harryshuman9637
    @harryshuman9637 8 หลายเดือนก่อน +1

    Very nice, thanks

  • @abhaytiwari6411
    @abhaytiwari6411 10 หลายเดือนก่อน +2

    hello broo can you make one video on how to make video transcoder using ffmpeg and nodejs. btw thanks for making great tutorial.

  • @aakashchaudhary2609
    @aakashchaudhary2609 2 หลายเดือนก่อน

    Can we add this project to our resume? This seems preety good project

  • @johnkucharsky6927
    @johnkucharsky6927 หลายเดือนก่อน

    i like how your voice sounds, how are you recording videos? my mic is shure pga58, but it sound awful. I'm thinking about adding compressor maybe...

    • @nikita-dev
      @nikita-dev  26 วันที่ผ่านมา

      thanks! i’m using OBS Studio with a blue yeti mic

  • @Jay-pj7ob
    @Jay-pj7ob หลายเดือนก่อน

    I cannot use the API mentioned, Please Help

    • @nikita-dev
      @nikita-dev  26 วันที่ผ่านมา

      Judge0 is a good alternative, they have a decent free tier or you can self host

  • @Shy_Dev
    @Shy_Dev 2 หลายเดือนก่อน

    hey can we add AI in this code editor and if poosible how can i add he AI in this code editor. If that was possible just imagine how cool will it be

    • @nikita-dev
      @nikita-dev  25 วันที่ผ่านมา

      it’s possible to send the current contents of the file editor to your backend, which calls the chat gpt API and returns the suggestions. although that would be a lot hits to your backend and would probably run up a big bill.

  • @misbahfatma5420
    @misbahfatma5420 7 หลายเดือนก่อน +1

    The Piston Api wont expire ever?

    • @Zina-ox2dm
      @Zina-ox2dm 5 หลายเดือนก่อน +1

      the endpoint is alrdy unavailable for me wbu?

    • @misbahfatma5420
      @misbahfatma5420 5 หลายเดือนก่อน

      @@Zina-ox2dm Nah its working for me.

  • @sajalmondal2057
    @sajalmondal2057 6 หลายเดือนก่อน +1

    Thanks ❤

  • @sumitsinha995
    @sumitsinha995 8 หลายเดือนก่อน +1

    Great man😊

  • @RahulJha-jv7gt
    @RahulJha-jv7gt 3 หลายเดือนก่อน +1

    till 16:00

  • @mystories878
    @mystories878 6 หลายเดือนก่อน +1

    take love bro

  • @abyan-majid
    @abyan-majid 6 หลายเดือนก่อน +1

    16:42

  • @parthjadhav3418
    @parthjadhav3418 8 หลายเดือนก่อน +1

    Is this API free or paid??

    • @nikita-dev
      @nikita-dev  8 หลายเดือนก่อน

      free

  • @sihamharimech1232
    @sihamharimech1232 7 หลายเดือนก่อน +1

    Thank u

  • @aleksey6151
    @aleksey6151 10 หลายเดือนก่อน +1

    W tutorial

  • @whizzie3367
    @whizzie3367 6 หลายเดือนก่อน +1

    Wow

  • @arupde6320
    @arupde6320 7 หลายเดือนก่อน +1

    be regular man .

  • @samuraijosh1595
    @samuraijosh1595 หลายเดือนก่อน

    why is our name indian?

    • @nikita-dev
      @nikita-dev  25 วันที่ผ่านมา

      it’s actually Ukrainian