All Collections
Classroom
Supporting Students
Embedding Student Sandbox Code Online
Embedding Student Sandbox Code Online

Use embed codes to help students share their JavaScript programs on an external website or blog.

Jeremy Keeshin avatar
Written by Jeremy Keeshin
Updated over a week ago
banner reads this is a free feature

Students can share their code online by creating and embedding an HTML file for their programs.

Creating an Embeddable HTML File

Programs that students create in the CodeHS Sandbox can be embedded on other sites. To embed a Sandbox program:

  1. Open the Sandbox program.

  2. Click Share at the top of the Code Editor, then Embed.

  3. Choose your settings, then click the green Copy button.

gif showing share > embed in IDE

The generated code will wrap your program in an iframe and can be embedded in any HTML document.


Viewing Your HTML file

There are a number of ways that students can embed their code:

On Your Computer

  1. Create a file called codehs.html on your desktop.

  2. Copy and paste the HTML code provided into that file.

  3. Double-click the file to open it in your browser. You now have a webpage running outside of CodeHS, locally on your computer!

Embed Code Online

  1. Create a file called codehs.html on your desktop.

  2. Copy and paste the HTML code provided into that file.

  3. Upload this file to the Internet

  4. Visit your webpage.

Using the codehs.me Homepage

While students can embed their HTML files on any website, they also have the option to create their own homepage hosted on codehs.me!

To do this, students can go to the Sandbox and click Edit My codehs.me Homepage

under heading Welcome to your Sandbox is a green Edit My codehs.me homepage

Here, students can paste in the embed code they previously generated. Their websites will be visible at [student username].codehs.me.
โ€‹
Check out this blog post to learn more about how this tool was built and how it works!


CodeHS Tutorial

Our team created a tutorial to show how you can use the CodeHS Graphics JavaScript library outside of CodeHS on any website. Check it out here:


Still have questions? Contact our team at hello@codehs.com to learn more!

Did this answer your question?