Intorial (game of words: In (tu)torial and into real) is a native web components library designed to help you create interactive tutorials with ease. With Intorial, you can create modular, reusable, and encapsulated tutorials that can be used on any page.
First of all you can install Intorial via npm:
npm i intorial
# Or you can use other package managers
pnpm add intorial # PNPM
yarn add intorial # Yarn
bun install intorial # BunYou can use Nuxt Content MDC or Next.js MDX for creating pages with tutorials:
import "intorial" // Needed for side-effects
const Page = () => {
return (<>
<intorial-page>
<intorial-section>
<intorial-theory>
Information about topic, some minimal examples
</intorial-theory>
<intorial-practice>
Code blocks, notes and other stuff
</intorial-practice>
</intorial-section>
<intorial-page>
</>)
}You can also use Intorial with html, without any framework:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- WARN: You should import intorial before using this components -->
<script>
import "intorial"
</script>
<intorial-page>
<intorial-section>
<intorial-theory>
Information about topic, some minimal examples
</intorial-theory>
<intorial-practice>
Code blocks, notes and other stuff
</intorial-practice>
</intorial-section>
</intorial-page>
</body>
</html>You can import all components from intorial via simple:
import "intorial"You can also use separate imports, to import components, that you need:
import "intorial/theory" // Theory, hint, diagram, tyan components
import "intorial/practice" // Practice, math, code components
import "intorial/quiz" // Quiz and question components
import "intorial/control" // Control component
import "intorial/section" // Theory, practice and section components (without any content components)TODO
| Component Name | Description |
|---|---|
| intorial-page | Page component, used when creating a full-page tutorial |
| intorial-section | Section component, used when creating a dedicated section about one topic in a tutorial |
| intorial-control | Control component, used when creating more than one section |
| intorial-theory | Theory component, used to create a topic theory, which will be placed in the left part of the screen |
| intorial-practice | Practice component, used to create a topic practice content. You can place codeblocks, code editors, and more practice content in this component. |
| intorial-code | Codeblock component, used to paste theory/practice code |
| intorial-math | Math component, LaTeX rendering block |
| intorial-diagram | Diagram component, use can use mermaid syntax to show your ideas in diagrams |
| intorial-hint | Hint component, used to provide hints for theory content |
| intorial-quiz | Quiz component, used to create quizzes |
| intorial-question | Question component, used to create questions for quizzes |
| intorial-tyan | Girl mascot component, you can use it in hints |
Coded by tokiory with ❤️
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent