For learning how to code, there’s nothing better than… coding!
I’ve been exploring the TutorialKit framework from StackBlitz lately. It lets authors create interactive courses mixing text content, a code base, and a live preview using webcontainer.
The cool thing is that webcontainer allows to run not only client-side technologies in your browser, but also server-side runtimes like Node.js and thus Next.js, with no install!
Each lesson is a programming pattern that you can reuse to solve various issues met in real life projects: streaming a file, avoiding UI layout shift, securing your app against CSRF vulnerabilities…
The format turned out to work very well. At the moment, the only issue is that the starting time is quite slow, due to Next.js downloading the Rust SWC lib that is reatively big, and doesn’t seem to be cached with this system. I hope Next.js 15 will run a bit faster, but otherwise it works smooth.
This is a fantastic idea! I’ll have to check out TutorialKit framework, hadn’t heard of it before but it feels like something that would’ve been useful to know a couple of years ago when I was teaching courses
@jazsouf they should support everything, it’s a real Node.js runtime
However in practice, Next.js process model in dev is so elaborate that it’s historically hard to support, I don’t know exactly why, I guess webcontainers are not made to run too many processes and highly dynamic apps like that. But 14.1 works relatively ok, I hope v15 will be supported later on.
This looks great! @eric-burel . Curious! have you tried using any database connections or external services in your lessons with webcontainer? How does it handle those kinds of integrations?
