You could use iframes and adapt the 400 bytes of genius from https://github.com/umpox/TinyEditor to suit your needs. This editor has 3 text boxes along the top. One for each of html, css, and javascript. As you type in them, the results is rendered in the box at the bottom.
The TinyEditor code itself requires javascript. TiddlyWiki won't let you directly embed javascript, so two levels of iframe are needed. Here is some code you can pasted into tiddler in any TW and see the TinyEditor in action: \define iframehtml(content) <!--CSS from excellent article at https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/-- > <div style="position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden;"> <iframe style="position: absolute; top:0; left: 0; width: 100%; height: 100%;" src=<<makedatauri """$content$""" "text/html">>> </div> \end <$macrocall $name=iframehtml content=""" <!-- The 400 bytes of genius from https://github.com/umpox/TinyEditor --> <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%;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> """/> Your use case would require only the javascript textbox. The html would be hard-coded somehow to always display the output of the javascript from the textbox. Maybe this isn't the best approach, but it would allow you to quickly get a working prototype. Brian On Fri, May 15, 2020 at 5:16 PM Scott Sauyet <[email protected]> wrote: > My recent success dynamically building a stand-alone TW to document a > corporate system -- with many thanks due to helpful people here! -- has > made me want to revisit something > <https://groups.google.com/d/msg/tiddlywiki/2E5bvI1KI_E/hwJfG1oLAgAJ> I > stopped working on several years ago when I changed jobs. It's another bit > of documenting a system (this time a code library) by dynamically > generating a TW. I have most of the pieces in place given what I've done > recently. (It's behind a corporate wall, I'm afraid, so I can't share, but > it's working quite well.) > > But there is one piece that I haven't even considered yet. If you visit > the Ramda documentation <https://ramdajs.com/docs/>, you will see in the > top-right of the code examples the choice of visiting that example in Ramda's > REPL <https://ramdajs.com/repl/> or to open it inline. For the inline > part we're embedding <https://runkit.com/docs/embed> RunKit > <https://runkit.com/>. This is a nice feature for library > documentation. Sanctuary.js <https://sanctuary.js.org/> has something > even nicer. > > I have no problem trying to write my own version of something like this as > a TW plugin, but I was wondering if this has already been done. Searches > for REPL and Tiddlywiki turned up nothing useful. > > Are there any code sandbox / REPL plugins already available? Or is there > anything similar that I might look to for inspiration, some way to sandbox > some dynamic JS code away from the TW environment? > > Cheers, > > -- Scott > > -- > You received this message because you are subscribed to the Google Groups > "TiddlyWiki" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To view this discussion on the web visit > https://groups.google.com/d/msgid/tiddlywiki/101de743-eab4-45c7-a251-2ed782815e59%40googlegroups.com > <https://groups.google.com/d/msgid/tiddlywiki/101de743-eab4-45c7-a251-2ed782815e59%40googlegroups.com?utm_medium=email&utm_source=footer> > . > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CAO5X8Cx90Dris4GNWe_9SxSkRuDL1cA7Rkb-6gb7n0yDRNhiYQ%40mail.gmail.com.
