npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2026 – Pkg Stats / Ryan Hefner

@prismadelabs/prismaidtutorial

v1.0.7

Published

prismaid tutorial

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

prismadedevteamprismadedevteam

Keywords

Readme

PrismaID Tutorial

Version Size Types

Overview

The PrismaID Tutorial is intended to be used in a web application and it provides visual hints how to use a PrismaID tag.

Using this component

  • Put a script tag <script src='https://unpkg.com/@prismadelabs/[email protected]/dist/prismaidtutorial.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

Use Tutorial in HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <title>PrismaID Tutorial</title>
    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <script src="https://unpkg.com/@prismadelabs/[email protected]/dist/prismaidtutorial.js"></script>
</head>

<body style="margin: 0px">
    <prismaid-tutorial></prismaid-tutorial>
    <!-- you could specify parameters directly or later somewhere in script -->
    <!-- <prismaid-tutorial welcome-title="Hello Tutorial!"></prismaid-tutorial> -->
</body>

</html>

Use Tutorial in Javascript

Once included you could work with the tutorial component the same way as you do with other components.

const tutorialElement = document.querySelector('prismaid-tutorial')

tutorialElement.welcomTitle = "Hello Tutorial!"

tutorialElement.addEventListener('tutorialCompleted', () => {
    // do some action
})

Assets

Texture Packer

Properties

| Property | Attribute | Description | Type | Default | | ------------------- | --------------------- | -------------------------------------------------------------------------------------------------------- | --------- | ------------------------- | | finishButtonTitle | finish-button-title | Finish screen "FINISH" button title | string | "CHECK" | | finishText | finish-text | Finish screen "TEXT" - content | string | "Finish Screen Text" | | holdText | hold-text | Hold screen "TEXT" - content | string | "Hold Screen Text" | | nextButtonTitle | next-button-title | Welcome screen "NEXT" button title | string | "NEXT" | | placementText | placement-text | Placement screen "TEXT" - content | string | "Placement Screen Text" | | slideToPage | slide-to-page | Allows to scroll smoothly (false) or just by page - swipe gesture (true) | boolean | false | | swipeText | swipe-text | Swipe screen "TEXT" - content | string | "Swipe Screen Text" | | themeColor | theme-color | Color used to colorize buttons and background image, please use hex code format e.g. #043487 | string | "" | | useSlides | use-slides | Defines a set of slides to be used.Valid values are: welcome,hold,swipe,fingerplacement,finish,nosupport | string | "" | | videoUrl | video-url | Video path used on the finish screen | string | "" | | welcomeSubtitle | welcome-subtitle | Welcome screen "Sub Title" text | string | "Welcome to" | | welcomeText | welcome-text | Welcome screen "TEXT" - content | string | "Welcome Screen Text" | | welcomeTitle | welcome-title | Welcome screen "Title" text | string | "DEMO" |

Events

| Event | Description | Type | | ------------------- | -------------------------------------------- | ------------------- | | tutorialCompleted | Invoked after the "FINISH" button is pressed | CustomEvent<void> |