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

viewson

v1.1.0

Published

This package is a view engine which supports JSON and BSON data

Readme

This is a view engine in which you can write the html in a JSON or ~~BSON~~ format. You can also input a normal js object or a JSON string but that is not recommended.

Index:

How to enter tags
How to add attributes
How to close a tag
How to add dynamic content
How to add modules
What are the parameters of the render function
How can we enter a JSON string
How can we enter a Javascript Object as an input
Additional information

How to enter tags:

You can enter tags like this:

    {
        "html5":{
            "head":{
                "title":{
                    "content":"Document"
                }
            }
            "body":{
                "p":{
                    "content":"This is a paragraph"
                }
            }
        }
    }

Like this we can do nesting and add tags but this way is not preferred.

Preferred way of adding tags(can be used after v1.1.0 This method had bug on 1.0.1)

  {
      "html5":{
          "head":{
              "title":"Document"
          }
          "body":{
              "p":"Hello"
          }
      }
  }

In this we have removed the content part. To add attributes you will have to use the content option. For more details refer to this. Also if you want multiple elements in a element you can use a array like this:

    {
        "html5":{
            "head":{
                "title":"Document"
            }
            "body":{
                "div":[
                    {"p":"In a array"},
                    {"p":"second element of a array"},
                    {"img":{
                      close:false
                      attributes:[
                        {"src":"hello.jpg"},
                        {"pre":"the is an image"}    
                      ]
                    } 
                  }
                ]
            }
        } 
    }      

You can also write the tag as array. In that you can write a array after it if you don't want it to be nested in div or something.

How to close a tag

In this the default way a tag closes is like this: <tag sttributes> content </tag> to close a tag like this: <tag attributes />, you will have to define the close property as false

We can also add attributes like this:

    {
        "html5":{
            "head":{
                "title":{
                    "content":"Document"
                }
            },
            "body":{
                "p":{
                    "content":"This is a paragraph",
                    "attributes":[{"style":"{color:red;}"},{"class":"paragraph1"}]
                }
            }
        }
    }

There is one more way to do nesting: We can also make content a object and put tags in it.

This package also supports dynamic content.

In the last parameter of the compile function we can add the dynamic content, specify the content like you do in the JSON file but it should be in a JS object. Click here to get more information about the parameters of the compile function. In the json or bson file write dynamic as a key instead of content and write the key in the content which you specified in the dynamic content parameter.

For eg. this is the dynamic content we passed:

  {
      yay: {
        content: "This is dynamic!",
        attributes: [{ class: "highlight" }]
      }
  }

And we can use it as this in our json file:

{
  "html5": {
    "head": {
      "title": {
        "content": "Test Page"
      }
    },
    "body": {
      "h1": {
        "p":{
          "content":"Nested"
        }
      },
      "p":{
        "dynamic":"yay"
      }
    }
  }
}

How to add a module(1.1.0 onwards)

This view engine supports modules. You can use modules like this:

{
  "html5": {
    "head": {
      "title": { "content": "Test Page" }
    },
    "body": {
       "h1": { "content": { "useModule": "E:\Desktop\yay.json" } } ,
    }
  }
}

For this you would need the exact path.

The information element(1.1.0 onwards)

This view engine has information option along with html5. It will be adjecnt to html5 and not in its children. In this we have 2 options for now. One is path and the other is include.

Path: This is used to set a definate path like if you are using many modules so instead of writing the starting path(if same) again and again, you can write the common one in the path option.

Include: In this if you write bootstrap it will add it for you automatically

Parameters of the render function (This is the function for JSON file)

How to use it: render()

|Parameter name | Use | |---------------|------------------------------------------------------------------------------------------------| |filename |The filepath of the file where you have written your json. | |res |The response object. | |have |The basic dependencies the project uses like express. | |dynData |The dynamic data. For more information click here|

render with JSON

How to use it: renderWithoutFilename()

|Parameter name | Use | |---------------|------------------------------------------------------------------------------------------------| |filename |The JSON string. | |res |The response object. | |have |The basic dependencies the project uses like express. | |dynData |The dynamic data. For more information click here|

render with Javascript Object

How to use it:renderObject()

|Parameter name | Use | |---------------|------------------------------------------------------------------------------------------------| |filename |The Javascript object. | |res |The response object. | |have |The basic dependencies the project uses like express. | |dynData |The dynamic data. For more information click here|

Additional information

License

This project is licensed under the BSD 3-Clause License
© 2025 Aarav Garg. All rights reserved

Third-Party Dependencies and Dev-Dependencies

This project makes use of the following open-source package:

Please refer to each dependency’s repository and license for more information.