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

@owcs/ui

v0.1.11

Published

Open Web Component Specification UI - Web Component for rendering OWCS specifications

Downloads

218

Vulnerabilities

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

Links

Git

Maintainers

rakesh_pawarrakesh_pawar

Keywords

owcsweb-componentsopen-web-component-specification

Readme

@owcs/ui

A web component library for rendering OWCS (Open Web Component Specification) YAML files in a user-friendly, interactive format.

Features

  • 🎨 Beautiful UI: Professional, modern design with smooth animations
  • 🔍 Search & Filter: Quickly find components by tag name
  • 📝 TypeScript Code Generation: Automatically displays props and events as TypeScript code
  • ✅ Schema Validation: Built-in OWCS schema validation
  • 🌐 URL Support: Load YAML from URLs or inline strings
  • 📱 Responsive: Works on all screen sizes
  • ⚡ Fast: Built with Lit for optimal performance

Installation

pnpm add @owcs/ui

Or with npm:

npm install @owcs/ui

Usage

Basic Usage

<!DOCTYPE html>
<html>
  <head>
    <script type="module" src="node_modules/@owcs/ui/dist/owcs-viewer.js"></script>
  </head>
  <body>
    <owcs-viewer
      yaml="owcs: 1.0.0
info:
  title: My Components
  version: 1.0.0
components:
  webComponents:
    my-button:
      tagName: my-button
      props:
        schema:
          type: object
          properties:
            label:
              type: string
          required:
            - label
      events:
        click:
          type: CustomEvent"
    ></owcs-viewer>
  </body>
</html>

Load from URL

<owcs-viewer yaml-url="/path/to/owcs.yaml"></owcs-viewer>

Dynamic Updates

import '@owcs/ui';

const viewer = document.querySelector('owcs-viewer');

// Update YAML content
viewer.yaml = `owcs: 1.0.0
info:
  title: Updated Components
  ...`;

// Or load from URL
viewer.yamlUrl = 'https://example.com/owcs.yaml';

API

Properties

| Property | Type | Description | | ---------- | -------- | ----------------------------- | | yaml | string | OWCS YAML content as a string | | yaml-url | string | URL to fetch OWCS YAML from |

Display Features

Header Section

  • Shows title and description from the YAML
  • Displays OWCS version as a popover badge
  • Gradient background for visual appeal

Extensions

  • Displays all custom extensions (properties starting with x-)
  • Shown as key-value pairs in a grid layout

Search Bar

  • Real-time filtering of components by tag name
  • Sticky positioning for easy access

Components List

  • Accordion-style display for each web component
  • Tag name as the accordion header
  • Props displayed as TypeScript interface code
  • Events displayed as TypeScript type code
  • Syntax-highlighted code blocks

Tech Stack

  • Lit: Fast, lightweight web components
  • TypeScript: Type-safe development
  • Vite: Fast build tooling (library mode)
  • @owcs/api: OWCS parsing and validation
  • @owcs/schemas: OWCS JSON Schema

Development

Install Dependencies

pnpm install

Build

pnpm run build

Run Demo

cd apps/owcs-viewer-demo
pnpm run dev

Example Output

When rendering an OWCS specification, the viewer displays:

  1. Header: Title, description, and OWCS version
  2. Extensions: Any custom extensions defined in the spec
  3. Search Bar: Filter components by tag name
  4. Components: Expandable accordion for each component showing:
    • Component tag name
    • Props as TypeScript interface
    • Events as TypeScript type definition

License

MIT - see LICENSE for details.