Better embeds (runnable, logs, snippet, and editable)

[jhildenbiddle]

I would like to use Val Town to provide runnable code snippets for open source project documentation (e.g., Mergician). Unfortunately, embedded vals currently cannot be run (only forked) which limits their usefulness.

Ideally, I would love to see Val Town provide the following:

1. A "Run" button for embedded vals
2. Logs for embedded vals
3. A ready-to-go embed snippet for quick copy/paste (<iframe>, <script>, etc.)
4. Ability to edit embedded vals (changes are not saved -- for demo purposes only)

For context, I previously used RunKit for this purpose. Unfortunately, it seems that RunKit is no longer maintained. I learned about Val Town from a comment in the RunKit forums and hoped it could be a drop-in replacement.

[pomdtr]

Also, it would be nice to have a readonly version (maybe trough a ?readonly query param)

[stevekrouse]

Thanks @jhildenbiddle for this lovely feature request! We definitely want to build this sort of thing out. Having it as a proper feature request will let us understand the demand for it and prioritize it accordingly

[jhildenbiddle]

Excellent. Happy to help with the effort as well, @stevekrouse.

[stevekrouse]

Thanks! If you have any screenshots or videos of how it worked with Runkit, that'd be helpful

A big question for us is how permissioning for vals should work when they're not attached to a user, ie "anonymous" usage. Are they discarded when the page is reloaded? Who can view them? etc

[stevekrouse]

cc @boucher who founded Runkit and is now an investor+advisor in Val Town :)

[boucher]

Embeds on runkit are all anonymous, they intentionally don't interact with your account. If I remember correctly, they're garbage collected after some period of time.

[easrng]

This used to be a feature, they removed it with the v3 runtime. You could fake it with the eval api (make sure to not use ur token!)

[stevekrouse]

Boom! https://discord.com/channels/1020432421243592714/1020432421243592717/1215210572287574046

[jhildenbiddle]

Thanks, @easrng. I was unaware of the eval API.

I could make that work, however it would be so much nicer to just allow runnable and editable (non-saving) embeds. 🤞

[stevekrouse]

I'm at coffee with @boucher from Runkit now! We're brainstorming ways to solve this for ya.

One question is to what extent you want the whole Val Editor experience in an embed context. Our Val Editor is fairly heavyweight, with many features (autocomplete, type checking, log history, html preview, etc). We're competing with VSCode - it's a lot. We also change our UI fairly frequently.

On the other hand we could build a separate, slimmed-down Val Embed component, maybe that's fully OSS, which would have a much more limited subset of features but loads more quickly and is more stable.

When you say "it would be so much nicer to just allow runnable and editable (non-saving) embeds" do you mean that it'd be nicer if the whole vale editor was embedded-able or that you don't want to have to build this OSS component yourself? Want to get on a call to discuss? :)

[jhildenbiddle]

Happy to get on a call to discuss further. In the meantime, a short explanation:

• Runnable embeds so site visitors can look at code, run it, and see the results.
• Editable embeds so site visitors can make temporary unsaved changes to the code, run it, and see the results.

RunKit did both of these things well. It was essentially a node-powered CodePen, JSFiddle, JSBin, etc. To that end and for my own use case, I wouldn't expect the full-featured editor to be available for embeds. A basic editor with syntax highlighting and auto-indentation would be sufficient. Others may want to embed the full-featured editor so it may be worth consider if/how that would work. Perhaps v1 editable embeds offer only the "light" editing experience and v2+ provides an option to choose between the light and full-featured editing experience on a per-embed basis.

Really appreciate the time being given to this request. Happy to help with the effort however I can.

Thanks!

[pomdtr]

Hey @jhildenbiddle !

I've been working on a web component to cover this exact usecase. See: https://www.val.town/v/pomdtr/vt_playground_demo

To use it, you need to:

1. add a script to your head
2. add a vt-playground tag anywhere you want you want the playground to appear.

I would love to get your feedback on it.

[pomdtr]

Fixed the web component on firefox and safari!

[jhildenbiddle]

That's great! Well done, @pomdtr!

The code is open for contribution. I'm not familiar with custom properties yet, I'll tag you as a reviewer once I have a first version ready.

Sounds good. If you'd like me to take the first crack at it since I'm comfortable with the styling task, just say the word. For what it's worth, I think what you have plus the ability to do basic styling would make for a fantastic v1 release.

By lazy loading, do you mean only loading the script once the content enter the viewport?

Correct. For me, this functionality is a nice-to-have but not a must-have. It would make an excellent post-v1.0 enhancement.

The idea would be to load a lightweight script first which displays a placeholder in the DOM until the element meets or exceeds some viewport proximity threshold (perhaps configurable via an attribute), then load the full playground script and render the element. For example:

<!-- Initialize immediately -->
<vt-playground>...</vt-playground>

<!-- Show placeholder, lazy load and render using default viewport threshold -->
<vt-playground loading="lazy">...</vt-playground>

<!-- Show placeholder, lazy load and render when element is <= 200px from viewport boundary -->
<vt-playground loading="lazy" threshold="200px">...</vt-playground>

Additionally, allowing users to initialize the component (loading and rendering) by clicking a button in the placeholder would provide an efficiency-first option (similar to CodePen's "Click-to-Load" embed option):

<!-- Show placeholder, lazy load and render on click -->
<vt-playground loading="user">...</vt-playground>

Thanks again for your efforts, @pomdtr. Good stuff.

[pomdtr]

Go ahead with the styling task, I'm sure you'll do a better job than me :)

For the light / dark theme, I propose to use a theme attributes.

<vt-playground theme="dark"></vt-playground>
<vt-playground theme="light"></vt-playground>
<vt-playground theme="auto"></vt-playground>

with a default value of auto.

[jhildenbiddle]

Sounds good, @pomdtr.

I have created separate issues for each of these feature requests in the repo so we can reduce the noise in this thread and track them properly. I can take care of the CSS-related issues (val-town/val-town-playground#1 and val-town/val-town-playground#2) in the next few days. I am also happy to assist with the lazy loading enhancement as well if you like.

[pomdtr]

Thanks @jhildenbiddle, go ahead. The whole project need is quite messy, so feel free to refactor / cleanup stuffs.

I'm not satisfied with how logs are displayed right now, so I'll probably focus on this area.

[pomdtr]

I just created PR for the val.town docs including those new embeds: val-town/val-town-docs#146

@jhildenbiddle you should take a look at it!

[jhildenbiddle]

Will do!

[onurpolattimur]

Is this feature removed? https://api.val.town/v1/eval responds with 404 status.

[stevekrouse]

Yes, we deprecated our eval endpoints a couple weeks ago.

Now the way to run arbitrary code on Val Town is by making your own code runner on Val Town, like @maxmcd documents here: https://blog.val.town/blog/val-town-town/