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

search-dinamic-sheet-wromo

v1.1.2

Published

A universal saas widget with Data from Sheets delivered via CDN integration.

Vulnerabilities

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

Links

Git

Maintainers

wromnprwromnpr

Keywords

searchproductsblogproductwidgetsheetscdn

Readme

search-dinamic-sheet-wromo

Search bar data Website from Spreadsheet Google Only with url ID from Spreadsheet

v1.1.2

Each new version is different: use the version that suits yor team. What's coming in v1.1.2 : Besides a new search bar design connected with Google sheet, we added shop page products with dynamic pagination, and blog page + single blog page on click. it is still in its early stages and is not yet complete but each version will get closer to completion.

Each version will bring new improvements. The direction of Studio Wromo for dynamic html saas design: for json data formats.

Each new piece in this design pyramid will bring huge value over time. Our models do not need packages that can change or the next day bring errors, and are static models dynamically packaged that serve forever.

For excellent security I suggest to add the SRI integrity code:

For example, you search for it through https://registry.npmjs.org/sheet-search-wromo : the correct "integrity hash" according to the version

<script 
  src="https://cdn.jsdelivr.net/npm/[email protected]/wromo-assets-injector-sheet.js" 
  integrity="sha512-ibkZQQ3DGVDGnDhgsrCMZoi1WTRy7KfDvIvKy4t24zpfmO7GpnffzpAhuMo8D32qdDjhWcjI2Z2cwX2Q1XikLw==" 
  crossorigin="anonymous" defer>
</script>

Installation

  • dynamic CDN installation:

  • For ALL HEAD WEBPAGE


		  <!--Google font-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&amp;display=swap" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/wromo-assets-injector-sheet.js"></script>
</head>
<body>

  • For BODY SEARCH WEBPAGE


<div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 col-md-10">
        
<div
	  style="position: relative; z-index: 99999;"
      data-product-search-sheet
      data-product-search-sheet-id="1StUxxxxxxxxxxx-IUaB8l_uPPhs, 1AUsTBP9VfYBosxxxxxxxxxxxxxTrRucpC29LkU"
      data-product-search-sheet-name="Sheet1"
      data-product-search-map="web"
      data-product-search-placeholder="Search the sheet catalog..."
      data-product-search-min-chars="3"
      data-product-search-limit="40">
    </div>

      </div>
    </div>
  </div>

  • For BODY PRODUCTS WEBPAGE


<section style="padding: 60px 0; background-color: #f8f9fa; min-height: 80vh;">
  <div class="container">
    
    <div
      data-product-shop-grid
      data-product-search-sheet-id="1StUxxxxxxxxxxx-IUaB8l_uPPhs, 1AUsTBP9VfYBosxxxxxxxxxxxxxTrRucpC29LkU"
      data-product-search-sheet-name="Tabell1"
      data-product-search-map="web"
      data-product-shop-limit="12">
    </div>

  </div>
</section>

  • For BODY BLOG WEBPAGE

SHEET MAPS: Id: 0, // Column A Title: 1, // Column B Summary: 2, // Column C Full_description: 3, // Column D Source: 4, // Column E Media_url: 5, // Column F Date: 6, // Column G Url_single_page: 7, // Column H Author: 8, // Column I

<div
      data-blog-grid
      data-blog-sheet-id="1StUxxxxxxxxxxx-IUaB8l_uPPhs, 1AUsTBP9VfYBosxxxxxxxxxxxxxTrRucpC29LkU"
      data-blog-sheet-name="Date_Publice, Date_Private"
      data-blog-map="blog"
      data-blog-limit="8">
</div>

  • For BODY BLOG - SINGLE BLOG PAGE

Important: the single page is located in the /single/ folder and enter the following in index.html

<section style="padding: 60px 0; background-color: #f8f9fa; min-height: 80vh;">
  <div class="container">
    
    <div
      data-blog-single
      data-blog-sheet-id="1StUxxxxxxxxxxx-IUaB8l_uPPhs, 1AUsTBP9VfYBosxxxxxxxxxxxxxTrRucpC29LkU, 13KqImbDxxxxxxxxxxxxxxx-GXZzxrm-sIICC5ZE"
      data-blog-sheet-name="Date_Publice, Date_Private"
      data-blog-map="blog"
    </div>

  </div>
</section>

  • For END BODY SCRIPT JS + MAPS = PRODUCTS

<script src="https://cdn.jsdelivr.net/npm/[email protected]/maps.js"></script> // <!-- maps.js for Shop / mapsblog.js blog -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/js/sheet-search-wromo.js" defer></script>

</body>

  • For END BODY SCRIPT JS + MAPS = BLOG

 <script src="https://cdn.jsdelivr.net/npm/[email protected]/mapsblog.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/wromo-blog-widgets.js" defer></script>

</body>

v1.1.2 Shop + Search v1.1.2 Blog + Search + Single page

v1.0.4

improvement - depends on the theme, the div can be placed as desired - body or header:

<div class="container">
    <div class="row justify-content-center">
      <div class="col-lg-8 col-md-10">
        
        <div
	  style="position: relative; z-index: 99999;"
      data-product-search-sheet
      data-product-search-sheet-id="YOUR_SHEET_ID"
      data-product-search-sheet-name="Sheet1"
      data-product-search-map="web"
      data-product-search-placeholder="Search the sheet catalog..."
      data-product-search-min-chars="3"
      data-product-search-limit="8">
    </div>

      </div>
    </div>
  </div>

Body v1.0.4

<script src="https://cdn.jsdelivr.net/npm/[email protected]/maps.js"></script>
<script 
  src="https://cdn.jsdelivr.net/npm/[email protected]/sheet-search-wromo.js" 
  integrity="sha512-[HASH_NEW_GENERATED_HERE]"
  crossorigin="anonymous" defer>
</script>

v1.0.4 v1.0.4 General access "Anyone with the link" Sheet public Link

v1.0.3

In version v1.0.3, the star list view data sheet was added to the search bar and other pages. Removing the button, and clicking on the entire product portion to reach the single product page.

v1.0.3 Add the possibility of requesting data for the shop page or single product page: infoAdvanced ID is exactly for advanced details on the single page where it is attached under the product as advanced details and you can add a simple info text or an html URL where the advanced data with images and explanations about a product listed.

v1.0.2

Added data points (Rating & Single page info product):

ratingStars: 7, // Column H

ratingText: 8, // Column I

ratingUser: 9, // Column J

infoAdvanced: 10 // Column K

Style search bar for your website Mobile Style search bar for your website

The following steps must be followed to add a search bar with your own data from your own Google Spreadsheet:

It can be installed as an NPM package or added as a static url

npm i search-dinamic-sheet-wromo

For any installation method, the following DIV point must be added to the header:

<div
  data-product-search-sheet
  data-product-search-sheet-id="INSERT_YOUR_SHEET_ID_HERE"  // <-- Change to INSERT_... from URL Sheet!!! -->
  data-product-search-sheet-name="NumeleTabuluiDacaEnevoie" // <-- Change to INSERT_... Name Sheet!!! -->
  data-product-search-sheet-map="web"
  data-product-search-placeholder="Search the sheet catalog..." // <-- Change to INSERT_... Name Bar search!!! -->
  data-product-search-min-chars="3"
  data-product-search-limit="8"
></div>

</header>

Add the following CDN url to the end of the body (Only for Static webpage) (For NPM packages: only need maps.js):

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/maps.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/[email protected]/sheet-search-wromo.js" defer></script>

    </body>

Spreadsheet google products

example product sheet:

									
productId	title	imageUrl	pageUrl	description	price	keywords	

orion-desk-lamp	Orion Desk Next	https://images.unsplash.com/photo-1505693416388-ac5ce068fe85?auto=format&fit=crop&w=900&q=80	/products/orion-desk-next	A brass desk next with warm LED light and a dimmable touch base for focused workspaces.	$256.00	next, desk, next, space, orion	

luma-office-chair	Office Desk Next	https://images.unsplash.com/photo-1505843513577-22bb7d21e455?auto=format&fit=crop&w=900&q=80	/products/or-desk-new	Now modern office interiors without overwhelming the layout, next type.	$421.00	office, desk, next, space, orion	

atlas-walnut-desk	New Desk Next	https://images.unsplash.com/photo-1518455027359-f3f8164ba6bd?auto=format&fit=crop&w=900&q=80	/products/ion-desk-ne	Compact wireless speaker tuned for clear remote meetings in medium-sized workspaces.	$625.00	new, desk, next, space, orion	

orion-desk-lamp	Now Desk Next	https://images.unsplash.com/photo-1497366754035-f200968a6e72?auto=format&fit=crop&w=900&q=80	/products/ozn-desk-blue	Eight adjustment, quiet motor control, and a wide surface for dual-monitor setups.	$198.00	now, desk, next, space, orion

halo-monitor-stand	Monitor Desk Next	https://images.unsplash.com/photo-1485955900006-10f4d324d411?auto=format&fit=crop&w=900&q=80	/products/ovo-desk-test	Ilhouette built for long professional sessions for focused workspaces.	$296.00	monitor, desk, next, space, orion	

terra-planter-set	Terra Planet Next	https://images.unsplash.com/photo-1497366412874-3415097a27e7?auto=format&fit=crop&w=900&q=80	/products/lup-desk-man	Screens to eye level while adding hidden storage for notebooks, cables, and accessories.	$366.00	terra, desk, next, space, orion	

folio-storage-unit	Folio Storage Next	https://images.unsplash.com/photo-1516321318423-f06f85e504b3?auto=format&fit=crop&w=900&q=80	/products/ner-desk-beb	Ceramic planters that soften modern office interiors without overwhelming the layout.	$544.00	folio, desk, next, space, orion

The search is performed using "keywords".

Each sheet row is prescribed according to maps as the products are written: id, title, image url, description, price, and keywords

productId	
title	
imageUrl	
pageUrl	
description	
price	
keywords

Other specifications according to statics webpages:

Use cdn url with SRI "integrity" id format:

## Version 1.0.0 
<script 
  src="https://cdn.jsdelivr.net/npm/[email protected]/sheet-search-wromo.js" 
  integrity="sha512-[HASH_NEW_GENERATED_HERE]"
  crossorigin="anonymous" defer>
</script>

Good luck with the sheet search bar!

Original example Sheet:

By Wromo Iulian Ghepes