Make a HTML, CSS, JS try it yourself editor

Making a try it yourself editor is a very easy and 5 minutes task if you know the concept behind it. Here I’m telling you step by step to create a try it yourself editor like w3 schools that would be able to run your HTML, CSS and javascript code online and display the result in iframe.

VIEW DEMO

HTML, CSS, JS try it yourself editor

The idea behind a try it yourself editor is more simpler than your thought. We just create a button, textarea and a iframe on the page and on click event of the button, load the content of textarea to iframe using JavaScript and all is done! So simple, let’s do it…

Create a html page in your favourite code editor and place the following CSS into head section of page:

Now inside body tag we need a textarea on left of the page to let visitors type their code and iframe where they can see his code functional after clicking run code button. So we have created all them inside a table.

The last part is to define runCode() function into script. It’s the most important part where most tutorials on the internet are failed to show in correct manner. Hence people complaint!

You can’t directly copy textarea content to iframe. Use the code below to perform the same in correct way. Write these code just before the end of body:

So the complete code to make a HTML, CSS, JS try it yourself editor is here:

VIEW DEMO

You Might Interested In

38 COMMENTS

  1. Dan Brooks says:

    Thank you so much! I never realized how simple this was to make. I just pasted it to one of my offline pages I’m working on and it works great. Thanks again!

    Reply
      1. Dhaanappagouda Patil says:

        Reply
  2. LP says:

    html and style outputs are working but script not working. When i use script tag in code box, output does not come. i used alert for testing.

    Reply
      1. Amit Sonkhiya says:

        Hello LP,

        alert() is JavaScript method so it worked while ready() is jQuery method. Add jQuery library for that, try and let me know

        Reply
  3. Salahaldin says:

    thank you , is there any way to add it to word press website
    or i do not want only to display the code i want to display its value inside wordpress post or at least to add button which will open new tab with the code inside just as w3 try it yourself ?

    Reply
  4. jo says:

    is this patented? can I put this on a website that I’m working on? It is a non profit website but it may have google adds on it

    Reply
  5. iciyas says:

    Thank you VERY much Sir,

    I’m a beginner web learner and this will spare me a lot of time saving and launching in my browser.
    all happens on the same page. it’s wonderful.
    I add your name to the persons I follow I’m sure I’ll learn well with you.

    thank you again.

    Reply
  6. It is just amazing
    It worked perfectly, I had gone many sites but they not working at all
    and yours worked perfectly. Please post more like these
    And one last thing can you tell me which syntax highlighter are you using I liked your syntax highlighter too
    Please tell me

    Reply

Leave a Reply