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

@relax.js/docking

v0.2.0

Published

Native Web Components for docked app layouts: resizable split panes, a closable and draggable tab strip, an editor area of splittable tab groups, and an IDE-style workbench.

Vulnerabilities

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

Links

Git

Maintainers

jgauffinjgauffin

Keywords

web-componentscustom-elementsrelaxjsdockingsplit-panetabsworkbench

Readme

@relax.js/docking

Native Web Components for apps laid out the way code editors are: panes the user resizes, tabs they close and drag, an editor area they split, and side bars and a panel they dock views into.

A workbench with side bars, an editor area and a panel

They are made for Relax.js apps and look like @relax.js/components, but every one is a plain custom element.

| Element | What it is | |---------|------------| | r-split | Panes side by side or stacked, divided by draggable, keyboard-operable dividers | | r-tab-strip | Tab headers without panels: closable, draggable, with icons, counts and an unsaved-changes dot | | r-editor-grid | Tab groups split side by side or stacked, with tabs dragged between groups or onto an edge to split | | r-workbench | An app frame: title bar, activity rail, editor area, two side bars, a bottom panel and a status bar, with views docked by dragging |

Each element keeps its layout as plain data (layout) and reports every change the user makes with an event carrying the whole layout, so an app keeps it and hands it back on the next start.

Demos

Three small apps show the elements in the kinds of app they are made for: a code editor, a mail client and a log console. Clone the repository and run npm install and npm run demo; demo/README.md has the rest.

| Code editor | Mail client | Log console | |-------------|-------------|-------------| | Code editor | Mail client | Log console |

Install

npm install @relax.js/docking @relax.js/components @relax.js/core
import '@relax.js/docking';
@import "@relax.js/components/theme.css";

Importing the package registers every tag. One element alone is import '@relax.js/docking/split', and the same for tab-strip, editor-grid and workbench. The elements take their colours, spacing and shape from the components' theme, so a page built from both looks like one product; see Customizing.

Words

The words the elements write (accessible names, button titles, region names) come from the Relax.js i18n namespace r-docking. English and Swedish ship with the package; an app rewords them by registering its own r-docking namespace.

Failures

A wrong attribute value is reported through the Relax.js error channel as <tag>: <what is wrong>, never thrown, so it reaches onError(), window.relaxErrors and captureRelaxErrors(). A method given an id the element does not hold throws an error naming the element.

License

MIT