@university/liascript-interactive-components (0.0.7-build.36)

Published 2026-04-08 10:18:40 +00:00 by can.celik

Setup this registry in your project .npmrc file:

@university:registry=

To install the package using npm, run the following command:

npm install @university/liascript-interactive-components@0.0.7-build.36

or add it to the package.json file:

"@university/liascript-interactive-components": "0.0.7-build.36"

For more information on the npm registry, see the documentation.

LiaScript Interactive Components

Custom components for LiaScript built with the Web Components API.

🚀 Quick Start

Using the Components

Import all components in your LiaScript course:

import: https://raw.githubusercontent.com/[your-repo]/dist/all-components.md

Note: Replace [your-repo] with your actual repository path before publishing.

Or import individual components:

import: https://raw.githubusercontent.com/[your-repo]/dist/components/flashcard.md

📦 Components

Comprehensive suite of interactive components available:

Component	Macro	Description	Use Case
Accordion	`@accordion`	Collapsible content sections	FAQs, course modules
Category Sorter	`@categorize`	Drag items into correct categories	Classification, grouping
Comparison	`@comparison`	Side-by-side comparison table	Evaluating trade-offs, pros/cons
Content Explorer	`@content_explorer`	Interactive expandable cards	Revealing detailed content
Content Slider	`@contentslider`	Slide through HTML content	Storytelling, timelines, presentations
Contrast Split	`@contrast_split`	High-end "Before vs After" comparison	Old vs New, Legacy vs Modern
Fill Blanks	`@fillblanks`	Drag words into sentence gaps	Language learning, comprehension
Flashcard	`@flashcard`	Single card - click to flip	Quick Q&A, definitions
Flashcard Deck	`@flashdeck`	Multiple cards with navigation	Study decks, vocabulary lists
Flow Circuit	`@flowcircuit`	Visual pipeline of lifecycles	Workflows, data pipelines
Hero Banner	`@herobanner`	Image-heavy hero section with blur effect	Chapter intros, narrative entrance
Interaction Center	`@interactioncenter`	Command lab terminal visualizer	Terminal commands, system logic
Labeled Image	`@labeledimage`	Interactive image with clickable hotspots	Diagrams, anatomy, maps
Level System	`@levels`	3D layered exploration	Stacks, architecture, layers
Logic Mapper	`@logicmapper`	Map code to explanations	Code analysis, detailed breakdowns
Memory Match	`@memory`	Flip cards to find matching pairs	Associations, vocabulary
Quote	`@quote`	Visually styled quote	Key takeaways, citations
Refractive Split	`@refractive_split`	Split layout with glass overlay	Pedagogical resonance, visual authority
Roadmap	`@roadmap`	3D perspective roadmap	Learning paths, milestones
Scenario Chat	`@scenario_chat`	Branching dialogue simulator	Soft skills, roleplay
Sequence Quiz	`@sequence`	Drag to order items correctly	Processes, timelines, rankings
Stage Scroller	`@stagesyncedscroller`	Scrollytelling visualizer	Storytelling, progressive explanation
Stage Transition	`@stagetransition`	Perspective transition between stages	Evolution, scaling, growth
Tabs	`@tabs`	"Command-Deck" style tabbed content	Code examples, rich HTML content
Timeline	`@timeline`	Visual chronological timeline	History, project milestones
YouTube Card	`@YouTubeCard`	Styled YouTube link card	Video links, resources

🛠️ Development

Build Commands

# Build all components + combined file
npm run build

# Dev mode + watching for changes
npm run dev:all

That's it! Just two simple commands.

Development Workflow

Edit source files in src/components/[component-name]/
- index.html - Web component JavaScript
- styles.css - Component styles
- template.md - LiaScript wrapper
Build components
```
npm run build
```
Test in LiaScript LiveEditor
- Copy content from dist/ or examples/
- Test all features
- Verify on mobile

See CONTRIBUTING.md for detailed guidelines.

📖 Documentation

Component Library - Component source code with README for each
Example Demo - Comprehensive showcase of all components
LiaScript Docs - LiaScript information
Macros Guide - LiaScript macro system
Contributing - How to contribute

🎓 Adding New Components

Create component folder in src/components/my-component/
Add index.html, styles.css, template.md, README.md
Build with npm run build
Test in LiaScript LiveEditor

See CONTRIBUTING.md for details.

🤝 Contributing

Contributions are welcome! Please see CONTRIBUTING.md for guidelines.

📝 License

MIT License - feel free to use in your projects!

🙏 Acknowledgments

Built for LiaScript - an open-source Markdown interpreter for creating interactive educational content.

Ready to build amazing interactive courses? Import the components and start creating! 🚀

For questions or issues, please open an issue.

Development dependencies

ID	Version
npm-run-all	^4.1.5

Details

npm

2026-04-08 10:18:40 +00:00

Stackit Components Team

MIT

133 KiB

Assets (1)

liascript-interactive-components-0.0.7-build.36.tgz 133 KiB

Versions (10) View all

0.0.7-build.39

2026-04-27

0.0.7-build.38

2026-04-17

0.0.7-build.36

2026-04-08

0.0.7-build.35

2026-04-02

0.0.7-build.34

2026-03-31