4 ms·

I made this html editor with instant preview and it turned out useful when I show friends how make their very first html page: https://no-gravity.github.io/htm

• xp84 2y ago
  Oh, this thing is perfect. Thank you.
• egeozcan 2y ago
  This is great, but maybe you can add a sandbox to that iframe you use for displaying? Nothing to do with security, just that people copy pasting snippets can actually lock the page up with broken scripts. I speak from experience :) https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#sandbox https://developer.mozilla.org/en-US/docs/Web/HTML/Element/if...
  • mg 2y ago
    A sandbox could be an interesting idea. Especially as a dropdown with options what should be blocked. I am not sure if anything should be blocked by default, because that could always end in frustration when something that should work does not for mysterious reasons. But it might make a good default to block all external requests when the editor gets a feature to link to code directly. Like ...html_editor/?code=<!doctype html><html>... Then it could display an info box like "Initial code was loaded from your link and the sandbox was activated. Use the Sandbox menu to enable more features the code can use" There was a bit of a discussion about this on HN two months ago here: https://news.ycombinator.com/item?id=42448964 https://news.ycombinator.com/item?id=42448964 The editor is open source, so if you like, you can add the features you have in mind: https://github.com/no-gravity/html_editor https://github.com/no-gravity/html_editor
• harry8 2y ago
  Elegantly cool. Good job.
• sumo89 2y ago
  It's the same reason I always recommend people to start with CodeAcademy if they want to start learning web dev. The interactive, live preview is perfect and the UI is nice enough to outsiders. There are other sites with preview boxes but they look very code-y. Once they can see how setting a background colour or adding a new <p> works in real time it helps the beginning of understanding.
• croisillon 2y ago
  i use this: data:text/html,<body oninput="i.srcdoc=h.value+'<style>'+c.value+'</style><script>'+j.value+'</script>'"><style>textarea,iframe{width:100%;height:50%}body{margin:0}textarea{width:33.33%;font-size:18}</style><textarea placeholder=HTML id=h></textarea><textarea placeholder=CSS id=c></textarea><textarea placeholder=JS id=j></textarea><iframe id=i>
  • mg 2y ago
    That is pretty nifty! My problem with 'data:' urls is that I have never found a way to add them to the homescreen on Android.
• manuel_w 2y ago
  Pretty cool, nice job! And wouldn't it be semantically more correct to put the <style> tag into the <head> and turning the <span> into a <p>aragraph? Since this is targeting beginners I'd think it's important to convey such fundamentals. But it might as well be that the HTML rules have changed since I left the game. It has been many years for me!
  • deleted 2y ago
    [deleted]
  • mg 2y ago
    I would say <style> in the body is so widely used that one can call it "generally accepted". Google, Amazon, Wikipedia ... look at the source of any website, and you will see a lot of <style> elements in the body. The reason is that it often makes the structure of websites much more logical. Often you want to define a piece of content, its layout and behavior in one specific place, not spread out across multiple places. Then the best solution is to have a <style> element right before the other DOM elements for that piece of content. And for the html editor, it saves the user from thinking about one more element (<head>) which does not do anything that is visible to the user.