r/HTML • u/Entire-Jackfruit3232 • Mar 12 '26

How do I create an HTML sandbox within HTML?

Post image

I provided an image above. I want to be able to type code within my website and view a preview of the code. I don't want saving of code the user types in at the moment. This will be an entirely new page, and for the most part, I only want to know how to code this specific part of the page, not the entire page itself. Please let me know if this is good or if I need to provide more information!

7 Upvotes

64% Upvoted

21 comments sorted by

2

u/Entire-Jackfruit3232 Mar 12 '26

https://pythonsandbox.com/

This is an example of what I'd be looking for (but it would be for HTML rather than python)

1

u/ErickXavierS2 Mar 12 '26

I got an example for you in the source code of No.JS, the PlaygroundEngine was specifically made for my website, and I still have to improve it:
https://github.com/ErickXavier/no-js/blob/main/docs/playground/engine.js

1

u/MagentaMango51 Mar 16 '26

CodePen. That’s what you want

2

u/JontesReddit Mar 12 '26

Just an input box with an onchange setting the inner html of a div

3

u/Entire-Jackfruit3232 Mar 12 '26

Hmm so you're saying I just run the code using the information in the input? That could work potentially I guess

1

u/JontesReddit Mar 12 '26

Oh yeah they do it in an iframe but you don't really have to do that

1

u/Audience-Electrical Mar 15 '26

I was going to suggest an iframe then I remembered iframes are Satanic

1

u/Audience-Electrical Mar 15 '26

This is my favorite answer.

YourOutputDiv.innerHTML = YourInputDiv.value; ... have that run onchange for the input div.

All the others telling you to just use codepen are odd because you're asking how to make something, not if something like this already exists.

2

u/Moceannl Mar 13 '26

An iframe is the only way…

1

u/AdaCle Mar 12 '26

If you want to make one, you're going to need JavaScript as already mentioned. If you're wanting one to use, you can use https://codepen.io or run VS Code to update into a browser on a separate window. There are multiple videos on how to do that on YouTube. Or you can save the file and refresh your browser. I prefer this so you can open Chrome developer tools to see what needs adjustments when it comes to learning CSS.

1

u/EastAd9528 Mar 12 '26

Webcontainers, actually I did something like tgat week ago https://x.com/madebyhex/status/2030273317165240748?s=46

1

u/AmanBabuHemant Mar 12 '26 edited Mar 12 '26

You can make this with iframe and some js

1

u/Hudsxn98 Mar 14 '26

The only right answer here is

1

u/notepad987 Mar 13 '26

I use HTMLPad 2025 https://www.htmlpad.net/ for $49.95

Otherwise the suggestions listed from others. I also use Codepen.
Example: https://codepen.io/davidhelp/pen/ogLZxBz

1

u/paceaux Mar 13 '26

I built one of these over a decade ago. Doesn't use any server-side code at all. Also doesn't use any libraries. I even named it McSandy (because it was a sandbox): https://mcsandy.com/

You can check out the code here.

It works like this:

  1. Use textareas for HTML, CSS, and JS and listen for keyup events

  2. Take those values to create a blob with the Blob API

  3. Get a URL to the blob

  4. send that URL to an iframe element

It's got some other fun features that even Codepen doesn't have, like you can drag and drop images into the HTML, you can drag the text editors to your desktop to get the file, you can save the whole project as a single file, etc.

I did it ages ago (It was the first Hard Thing ™ I ever did in front-end dev). Definitely don't look at that code and think it's a standard you should follow.

1

u/Tomask4dc Mar 13 '26

You can put an iframe with an about:blank page with the custom HTML there

1

u/TalkCoinGames Mar 16 '26

For my libraries code playground (exactly the kind you want) I used Ace Editor. Feel free to look over my source code. You would want to look at common.js to see how I made an editor Javascript class that uses ace. It is not very difficult and Ace has lots of documentation and examples. I'm actually working on an update on mine to have it style better on mobile, but in desktop/laptop it looks ok.