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

Published 2026-04-17 11:31:04 +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.38

or add it to the package.json file:

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

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	HTML Tag	Description	Use Case
Accordion	`<accordion-element>`	Collapsible content sections	FAQs, course modules
Category Sorter	`<category-sorter-element>`	Drag items into correct categories	Classification, grouping
Comparison	`<comparison-element>`	Side-by-side comparison table	Evaluating trade-offs, pros/cons
Content Explorer	`<content-explorer-element>`	Interactive expandable cards	Revealing detailed content
Content Slider	`<content-slider-element>`	Slide through HTML content	Storytelling, timelines, presentations
Contrast Split	`<contrast-split-element>`	"Before vs After" comparison	Old vs New, Legacy vs Modern
Fill Blanks	`<fill-blanks-element>`	Drag words into sentence gaps	Language learning, comprehension
Flashcard	`<flashcard-element>`	Single card - click to flip	Quick Q&A, definitions
Flashcard Deck	`<flashcard-deck-element>`	Multiple cards with navigation	Study decks, vocabulary lists
Flow Circuit	`<flow-circuit-element>`	Visual pipeline of lifecycles	Workflows, data pipelines
Hero Banner	`<hero-banner-element>`	Image-heavy hero section with blur effect	Chapter intros, narrative entrance
Interaction Center	`<interaction-center-element>`	Command lab terminal visualizer	Terminal commands, system logic
Labeled Image	`<labeled-image-element>`	Interactive image with clickable hotspots	Diagrams, anatomy, maps
Level System	`<levels-element>`	3D layered exploration	Stacks, architecture, layers
Logic Mapper	`<logic-mapper-element>`	Map code to explanations	Code analysis, detailed breakdowns
Memory Match	`<memory-element>`	Flip cards to find matching pairs	Associations, vocabulary
Quote	`<quote-element>`	Visually styled quote	Key takeaways, citations
Refractive Split	`<refractive-split-element>`	Split layout with glass overlay	Pedagogical resonance, visual authority
Roadmap	`<roadmap-element>`	3D perspective roadmap	Learning paths, milestones
Scenario Chat	`<scenario-chat-element>`	Branching dialogue simulator	Soft skills, roleplay
Sequence Quiz	`<sequence-quiz-element>`	Drag to order items correctly	Processes, timelines, rankings
Stage Scroller	`<stage-synced-scroller-element>`	Scrollytelling visualizer	Storytelling, progressive explanation
Stage Transition	`<stage-transition-element>`	Perspective transition between stages	Evolution, scaling, growth
Tabs	`<tabs-element>`	"Command-Deck" style tabbed content	Code examples, rich HTML content
Timeline	`<timeline-element>`	Visual chronological timeline	History, project milestones
YouTube Card	`<youtube-card-element>`	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-17 11:31:04 +00:00

Stackit Components Team

MIT

136 KiB

Assets (1)

liascript-interactive-components-0.0.7-build.38.tgz 136 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