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 🙏

© 2025 – Pkg Stats / Ryan Hefner

niance-editor

v1.0.3

Published

A fast and performant web-based code editor with autocomplete and syntax-highlighting out of the box

Downloads

15

Readme

A Code Editor with syntax highlighting from Scratch made in HTML, CSS and Javascript

Screenshot_2024-12-29_23-47-10

Live version here

Note:

  • Everything in the codebase has been written from scratch. No external 3rd party libraries or dependencies have been used. If you would like to contribute to this project, please do not use any 3rd party dependency in your code unless stated otherwise.
  • This project is not intended for production and thus may have unexpected behaviors. See section 'Known Bugs'.

Working Details

  • Uses Range and Selection API in Javascript to manage position of cursor/caret inside editor.
  • Each line of code is a block-display div. Now I know this is bad and I should have used a Rope/SumTree data structure as done by the devs of Zed, but since I did not do any kind of parsing, I felt this was okay.
  • I use regex rules to syntax-highlight the code. This is bad, I could have switched to my own custom lexer I wrote, but I had already spent a lot of time on the regex module so I used just that.
  • I wrote a simple Lexer for C++ which I then use to extract keywords, variables and datatypes.
  • I use Levenshtein edit distance algorithm for judging similarity of two strings. It is not very accurate because edit distance is not the only viable measure of similarity but it is decent enough. I can develop additional algorithms on top of Levenshtein's in order to improve it.
  • Use default tab navigation and some other nifty tricks in order to do the auto-complete trigger part.

Future todo stuff

  • Optimizing using Rope/SumTree or a more refined "one-div-per-keyword" model.
  • Embedding my own C Parser using WebAssembly inside the editor.
  • Remove Regex Portion. Fully depending ona lexer and a parser instead.
  • Refactor code and improve performance.
  • Fixing Caret bugs.

Credits

Zserge:- Blog Jsmith:- Simple VM C++ Code Wallpaper's Den:- OPM Wallpaper

Known Bugs

  • Backspacing on an empty line moves the caret to the end of the line above. Reproducible without any effort.
  • Sometimes pasting code causes extra empty lines in between across the whole code. No guaranteed steps known to reproduce as of now.
  • A lot more, just use it and you will them

Care to fix? I accept contributors.