Interesting idea! Currently we don't have any ways how to do this out-of-the-box.

What you could do now, is to create virtual navigation bar in your src/templates/** that is shown for each lesson. Simply rendering the window.location.pathname and creating buttons for controlling History API should be enough.

Having the preview's navigation bar to be part of TutorialKit's UI as built-in component might be difficult to implement. It's not simple to control the preview ifream outside it.

Hi @AriPerkkio, thanks for getting back to me.

I thought of creating a virtual navigation bar, the challange is that I want it to navigate to urls that are outside the hot reload of vite (an api url, or other server urls) - As soon as I navigate to these, I'll be outside of that navigation panel that'll be in the app.tsx ( I think) or would you recommend opening another IFrame there?
p.s
Really appreceate your work and responsiveness on this.

p.s.2
I there a showcase of existing tutorials - both to learn from and to post mine as soon as its ready?

Hi @AriPerkkio

I just had another look at the sveltekit tutorial, and they do have that feature:
image

Can we take it from there?

Hey @noam-honig! The way svelte implement this is by having the iframe send a message to the parent page. You can view the logic here. So the rendered page is in charge of informing of the current URL to the parent.

This only works if the iframe is rendering html. If the content is an image or any non-text/html mime type then this cannot be used.

We should be able to do something though at the WebContainer level though. This has been mentioned several times in the past and it keeps coming up.

In the meantime, we could expose a way to customise the rendered Preview component so that you could render a custom path and update the path manually ala svelte using a postmessage or any other way (an alternative would be a server printing the current path in its output and read this to update the path).