Back to LearnInteractive tutorial
Interactive tutorial — template
A copy-me reference for building interactive TuyaOpen tutorials. It shows the hero, sticky contents, callouts, code blocks, and a small live widget — all in the shared style.
Introduction
Interactive tutorials are plain React pages. Because they render inside TutorialShell, they automatically match the markdown tutorials — same hero, same typography, same dark mode.
Prefer the shell helper classes over custom CSS. That is what keeps every tutorial looking like it belongs to the same set.
Steps
Numbered steps use the shell’s step list so spacing and colour are consistent:
- Copy this file and rename it to your tutorial slug.
- Update the bilingual `content` object with your copy.
- Add matching <section id> blocks and TOC entries.
- Register the tutorial in src/data/tutorials.js.
Show commands with the shared code block:
cp interactive-template.jsx my-tutorial.jsx
# then edit content{} and register it in src/data/tutorials.jsLive widget
This is the part markdown cannot do — real interactivity. Pick a board and the flash command updates instantly.
Next steps
When your tutorial is ready:
- Verify it renders in both English and 简体ä¸æ–‡.
- Confirm the card shows up under the right filter on /tutorials.
- Ask for review before publishing.