OPEN SOURCE · DEVELOPMENT PREVIEW

One toolbar.
Every interface.

A lightweight, framework-independent toolbar for modern web apps. Start simple; adapt as you grow.

Get started Explore the live dock

The package is in active development and is not yet published.

01 / 03

Easy to start.

Easy to use.

Powerful to master.

The dock at the bottom is the actual workspace library.

A TOOLBAR THAT FITS YOUR PRODUCT

Keep the anchors.
Change the context.

Choose a page context to update the real dock. This demo uses the SDK's current action configuration and host dispatch APIs—not a visual stand-in.

SELECT A CONTEXTLIVE SDK UPDATE

Explore the product story, setup, and Studio roadmap.

CONFIGURATION PREVIEWWebsite

Selecting a preset calls toolbar.update() with this action set:

Homehome
Exploreenvironments
Get startedquick-start
Studiostudio

The host maps every action to an existing section; no app commands or permissions are simulated.

Context changes are deliberate. The dock won't change just because you scrolled into another section.

VISUAL CONFIGURATOR · LOCAL PREVIEW

Tune the draft.
Keep every action explicit.

Edit supported configuration fields, validate against the package schema, and apply a real toolbar preview. Drafts stay in memory and are never uploaded or saved.

LIVE PREVIEWCONTAINER-FRAMED

The preview is confined to this sample frame. The generated configuration retains the selected placement mode.

TYPESCRIPTtoolbar.config.ts

import type { ToolbarConfigurationInput } from "@moorkyz/toolbar";

export const toolbarConfiguration: ToolbarConfigurationInput = {
  "schemaVersion": "1.0",
  "features": {
    "search": true,
    "ai": false,
    "tasks": false,
    "notifications": false,
    "discovery": false,
    "platform": true,
    "customize": false,
    "spatialCoordination": false,
    "offline": false,
    "diagnostics": false,
    "advancedGestures": false,
    "experimental": false
  },
  "actions": [
    {
      "id": "docs",
      "label": "Documentation"
    }
  ],
  "placement": {
    "mode": "container",
    "anchor": "bottom"
  },
  "theme": "signature",
  "colorScheme": "system",
  "renderMode": "light",
  "label": "Preview toolbar"
};

COMPONENT LAB · REAL SDK STATES

Try the controls.
See the state change.

Switch between repeatable component scenarios, test native overflow controls, open local search, or collapse the live toolbar. Every preview uses the workspace library.

A compact action row with manual collapse.

Choose a scenario, then interact with the real toolbar.

SCENARIO LAB · DETERMINISTIC SIMULATION

Change the context.
Replay the outcome.

Simulate viewport, time, host authorization, and action failures against a real toolbar. Snapshots stay in memory and copied JSON never executes.

Simulated contextSimulated viewportSimulated time: 00:00Host allows navigationSimulate host action failure

Adjust the simulation; no host application or network is connected.

THEME DESIGN STUDIO · BUILT-IN TOKENS

Inspect the palette.
Check the contrast.

Browse the built-in themes, inspect their actual SDK tokens, validate contrast, and copy a versioned token file. This preview does not change the portal theme or edit runtime styles.

Built-in theme

Built-in themes are previewed locally; no theme is applied to the portal.

Token validation passed. Text contrast: 16.27:1; focus contrast: 5.84:1.

BUILT-IN THEME PREVIEWsignature

background: #FFFFFF
foreground: #172033
border: #D6DAE2
hover: #E9EDF4
focus: #315BD6
accent: #315BD6

JSONtheme.tokens.json

{
  "version": 1,
  "theme": "signature",
  "tokens": {
    "background": "#FFFFFF",
    "foreground": "#172033",
    "border": "#D6DAE2",
    "hover": "#E9EDF4",
    "focus": "#315BD6",
    "accent": "#315BD6"
  }
}

A SMALL, EXPLICIT START

Start with actions.
Keep your app in charge.

The host handles navigation and decides what each action is allowed to do. The toolbar provides accessible controls and dispatches the action ID.

Read the current contract draft

TYPESCRIPTtoolbar.ts

import { createToolbar } from "@moorkyz/toolbar";

const toolbar = createToolbar(
  {
    actions: [{ id: "docs", label: "Documentation" }],
  },
  {
    dispatchAction: (id) => {
      document.getElementById(id)?.scrollIntoView();
    },
  },
);

const mounted = toolbar.mount(document.body);
if (!mounted.ok) {
  throw new Error(mounted.error.message);
}

window.addEventListener("pagehide", () => toolbar.dispose(), { once: true });

pnpm add @moorkyz/toolbar

Install command shown for the planned public release. Until then, use the repository's workspace consumer examples.

BUILT AROUND CONTROL

Useful by default.
No hidden authority.

Framework independent

A TypeScript package with no React or Next.js runtime dependency. This portal is a separate consumer.

Host-controlled actions

The SDK dispatches an action ID; your application retains navigation, data access, and permission authority.

Accessible foundations

Semantic toolbar controls, keyboard navigation, visible focus, manual collapse, and reduced-motion styling are in the current implementation.

Optional work stays optional

Search and spatial coordination are not activated by this preview. There are no analytics or remote service calls.

Read the security and trust model

YOUR CANVAS, YOUR PREFERENCE

Light by default.
Dark when you want it.

Switch the portal between light and dark. The dock is the same library instance, mounted in its supported light-DOM mode so its presentation follows this site.

The SDK includes built-in token families and contrast validation. Custom theme authoring remains in the Studio roadmap.

DEVELOPMENT STUDIO

A deeper workspace
is on the roadmap.

A schema-validated configurator, a component lab, and a deterministic scenario simulator are available below. The full Studio will add themes and starter generation; those tools remain on the roadmap.

View development roadmap Try the local configurator Explore the Component Lab Try the Scenario Lab Inspect built-in themes

STUDIO MODULESIN PROGRESS

Visual configurationAvailable preview
Component LabAvailable preview
Scenario LabAvailable preview
Theme Design StudioAvailable preview
Extension StudioPlanned
Code and starter generationPlanned

Configurator drafts are local, and built-in theme tokens can be inspected and exported. Custom theme authoring remains planned.

FOLLOW THE WORK

Documentation that tells you what exists.

The public contracts are still drafts. Browse the source of truth and follow implementation as the SDK takes shape.

01SDK and schema draft 02Product architecture 03Implementation status

OPEN SOURCE · APACHE-2.0

Built in the open.
Released with care.

The code and development decisions are public. This repository is a work in progress; no package or website release is implied.

Repository ↗Apache-2.0 license ↗Issues and discussion ↗

MOORKYZ TOOLBAR

Make your interface
more capable.

Start with a toolbar. Build an experience.

Explore the SDK View on GitHub

One toolbar.Every interface.

Keep the anchors.Change the context.

Tune the draft.Keep every action explicit.

Try the controls.See the state change.

Change the context.Replay the outcome.

Inspect the palette.Check the contrast.

Start with actions.Keep your app in charge.

Useful by default.No hidden authority.