Annotate
Code walkthrough builder for devrels, educators, and engineers
Open-Source Projects
Discover top open-source software, updated regularly with real-world adoption signals.
Discover top open-source software, updated regularly with real-world adoption signals.
Build interactive coding tutorials that drive framework adoption
TutorialKit lets you author live, browser‑based coding tutorials with zero setup, using WebContainer to run real code instantly, helping users learn and adopt your UI library or design system.
TutorialKit is aimed at framework authors, design‑system teams, technical writers, and educators who want to provide hands‑on, interactive experiences without managing servers or complex build pipelines.
The library leverages the WebContainer API to execute real Node.js code directly in the browser, supporting TypeScript, Astro, and common UI libraries out of the box. Authors can define step‑by‑step flows, customize the UI, and embed live editors that give instant feedback. Because it runs entirely client‑side, tutorials are portable and can be hosted on any static site.
With a simple npm install and a few configuration files, TutorialKit can be integrated into existing documentation sites or deployed as a standalone tutorial portal. The MIT‑licensed package works on modern browsers that support WebAssembly, ensuring a frictionless experience for end users.
When teams consider TutorialKit, these hosted platforms usually appear on the same shortlist.
Looking for a hosted option? These are the services engineering teams benchmark against before choosing open source.
Onboarding new developers
Accelerates learning by letting developers write and run code instantly within the docs.
Showcasing UI component library
Provides interactive demos that users can tweak and see results live.
Teaching language fundamentals
Enables step‑by‑step exercises with immediate feedback in the browser.
Running design system guidelines
Allows designers to experiment with tokens and styles directly in a live tutorial.
No. TutorialKit runs all code client‑side using the WebContainer API.
Any modern browser that supports WebAssembly (e.g., Chrome, Edge, Firefox, Safari).
Yes. The package works on any static hosting platform.
It spins up a WebContainer instance that emulates a Node.js environment directly in the browser.
Yes. It is released under the MIT license.
Project at a glance
StableLast synced 4 days ago
