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

@dansophi/sidepanel

v0.2.0

Published

The settings page your codebase never had.

Vulnerabilities

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

Links

Git

Maintainers

dansophidansophi

Keywords

nextjsvitereactmetadataseodeveloper-toolscliapp-router

Readme

Sidepanel

The settings page your codebase never had.

Sidepanel gives coded websites a local visual interface for metadata, social previews, favicons, indexing, and other site settings.

No account. No cloud. No repository access. Your code stays on your machine.

Quick start

Once published, run this from an existing Next.js App Router or Vite + React project:

cd your-nextjs-project
npx @dansophi/sidepanel

Sidepanel scans the current working directory, starts a localhost-only interface on port 4242, and opens it in your browser. Use sidepanel --port 4321 to choose another port, sidepanel --no-open to skip the browser, or sidepanel audit for a terminal summary. The current release is package-ready but has not been published to npm yet.

Sidepanel runs entirely on your machine. Your source code is never uploaded anywhere.

Why Sidepanel?

When a site is built directly in code, changing a title, favicon, Open Graph image, canonical URL, or robots rule usually means opening a source file or prompting an agent. Sidepanel is the missing settings interface for that maintenance work. The source code stays the source of truth; Sidepanel only proposes and applies explicit, reviewable file changes.

Features

  • Next.js App Router route discovery
  • Source-aware root and page metadata
  • Static metadata editing for titles, descriptions, canonical URLs, Open Graph, Twitter, and indexing
  • Local search and social previews
  • Favicon and local image replacement with collision-safe targets
  • Robots and sitemap detection
  • Deterministic audit findings with concrete actions
  • Pending changes, readable diffs, and explicit Apply changes
  • Git branch and working-tree awareness
  • Light and dark themes

Supported frameworks

v0.2 supports Next.js with the App Router and Vite + React projects. React Router is detected inside Vite projects. Astro, Remix, Nuxt, and Next.js Pages Router projects are detected as unsupported rather than modified.

Vite + React support in v0.2 covers the common deterministic surface:

  • root index.html <title>, description, canonical, Open Graph title/description/image, Twitter/X card, and <html lang> metadata
  • favicon links pointing to local public/favicon.ico or public/favicon.svg
  • local Open Graph images, public/robots.txt, public/sitemap.xml, and linked or conventional manifest files for inspection
  • React Router detection and a normalized single-page / route
  • static literal React Helmet / Helmet Async <title>, <meta>, and canonical <link> values

Vite dynamic React metadata, runtime expressions, generated assets, and custom robots/sitemap implementations remain read-only. Sidepanel does not rewrite arbitrary React code.

How it works

The CLI selects a framework adapter, scans supported project files into a normalized project model, and serves a local React interface. Static export const metadata objects are parsed with the TypeScript compiler API. A mutation is only planned after the expected AST structure is confirmed, the transformed source parses cleanly, and a diff is available for review.

Dynamic generateMetadata functions, dynamic Helmet values, generated icon/OG files, and complicated robots or sitemap implementations are inspect-only in v0.2.

Privacy

Sidepanel binds to 127.0.0.1, has no account, makes no cloud requests, sends no source code to an LLM, includes no telemetry, and never reads .env, .env.local, or related environment files for display. It does not commit, push, change branches, or reset files.

Limitations

Reliability is prioritized over broad pattern coverage. Sidepanel does not execute application code or resolve runtime data. If a value cannot be safely located and transformed, the UI explains why and links to the source file.

Architecture

See docs/architecture.md for the project model, scanner, framework adapters, source tracking, mutation strategy, safety boundaries, and local server design.

packages/
  core/             normalized model and audit
  adapter-next/     Next.js App Router scanner and mutations
  adapter-vite/     Vite + React HTML scanner and mutations
  cli/              localhost server and terminal commands
apps/web/           React + Vite + Tailwind + shadcn primitives
fixtures/           representative Next.js projects
tests/              scanner and mutation tests

Contributing

npm install
npm test
npm run build

To exercise the CLI from the repository against the included fixture:

npm run sidepanel -- fixtures/next-basic --no-open --port 4242

The positional fixture path is a contributor convenience. End users do not pass a project path: npx @dansophi/sidepanel always treats process.cwd() as the target website.

Please add a fixture and tests for every new metadata pattern. Keep transformations conservative, source-aware, and independent of network services.

Publishing

Publishing is intentionally not performed by the repository's development workflow. The package is scoped as @dansophi/sidepanel for public npm access while its executable remains sidepanel.

After reviewing the package tarball, updating the name, and confirming npm authentication:

npm whoami
npm test
npm pack --dry-run
npm publish --access public

The package root owns the public sidepanel executable. prepack builds the CLI, adapter, core scanner, and web assets into dist/, which is the only runtime directory included in the npm tarball besides the README and MIT license.

Roadmap

  • More safe static patterns for Next.js metadata
  • Richer diff review and file opening integrations
  • Additional framework adapters after the Next.js adapter is mature
  • Expanded terminal audit output

License

MIT. See LICENSE.