Categories HTML - CSS, jQuery

Make a HTML, CSS, JS try it yourself editor

Updated: Comments Link46 Comments

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

46 COMMENTS

LEAVE A REPLY
  1. michael says:

    Hey Amit,

    This is a fantastic article on how to create a “try it yourself” editor using HTML, CSS, and JavaScript! As someone who is just starting out in web development, I found this guide to be incredibly helpful in understanding the process of building a functional and user-friendly editor.

    I appreciated the clear and concise way that you explained the different components of the editor and the step-by-step instructions for building each one. The use of HTML, CSS, and JavaScript to create this editor is a great example of how these languages can be used together to create powerful and interactive web applications.

    The section on adding features to the editor, such as the ability to toggle between dark and light mode, was particularly interesting and helped to illustrate how additional functionality can be easily added to the editor.

    Overall, this guide is a valuable resource for anyone looking to create a “try it yourself” editor using HTML, CSS, and JavaScript. Thank you for sharing your knowledge and expertise with us!

    Reply
  4. Pradeep says:

    Your demo has different code that will divide in single column in mobile phone devices, and the code in shown here is simple, i try to use bootstrap grid to divide it but it cant run properly

    Reply
    1. Amit Sonkhiya says:

      Hi

      There should be no problem in running the code while replacing the table with Bootstrap columns. I would suggest you to check for any error in the browser console while executing.

      Reply
  5. taha says:

    iframe = (iframe.contentWindow) ? iframe.contentWindow : (iframe.contentDocument.document) ? iframe.contentDocument.document :iframe.contentDocument;

    iframe.document.open();
    iframe.document.write(content);
    iframe.document.close();

    please explain it to me.

    Reply
    1. Amit Sonkhiya says:

      @taha

      In the first line, we’re trying to acquire the Window object of the iframe if it can be. Else trying to get the Document object. It’s a cross-browser implementation using the ternary operator.

      The open(), write() and close() are JavaScrit methods for opening, writing, and closing a document respectively.

      Reply
  6. 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
  8. 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
  15. 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
  17. 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
  22. 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
  23. Abhinav Singh says:

    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

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.