Skip to content

README.md

Latest commit

 

History

History
66 lines (49 loc) · 3.17 KB

README.md

File metadata and controls

66 lines (49 loc) · 3.17 KB
Raw

@mdwrk/mdwrkspace

MdWrk browser client package for markdown authoring, previewing, extension hosting, theme switching, responsive workspace layout, and retained-version PWA delivery.

Hits Downloads Node License: Apache-2.0

@mdwrk/mdwrkspace packages the client surface that MdWrk uses in the browser and desktop shell. It includes the workspace chrome, editor and preview surfaces, bundled first-party extensions, responsive viewport contract, and the mount function used by embedders.

Why

Use it when you need the MdWrk client itself rather than one of the lower-level editor, renderer, theme, or extension packages. The package gives consumers the runnable workspace shell while keeping deeper architecture details linked to the repo docs.

What

  • A workspace shell with header, action rail, explorer/sidebar, stage, and footer regions.
  • Built-in authoring, preview, theme, language, extension, and Git-adjacent surfaces.
  • A single viewport contract shared across all themes, with theme-specific styling layered on top.
  • A package-level mountMdWrkSpace entrypoint for embedding the client surface.

Installation

Node.js 20.x through 22.x, matching the workspace engine contract in the root package manifest.

npm install @mdwrk/mdwrkspace

Usage

Use the published package when you want the client surface itself.

import { mountMdWrkSpace } from "@mdwrk/mdwrkspace";

const root = document.getElementById("root");

if (!root) {
  throw new Error("Missing MdWrk root element.");
}

const unmount = mountMdWrkSpace(root);

Run it from the workspace while iterating on the repo.

npm install
npm run dev:client
npm run build -w apps/client
npm run screenshots:matrix -w apps/client

The canonical viewport contract lives in client/public/css/base/viewports.css, and themes are expected to preserve that structural contract while restyling the bands.

How

  • Run npm run dev:client for local client iteration.
  • Run npm run screenshots:matrix -w apps/client when you need full theme and viewport coverage artifacts.
  • Use the extension family packages to understand the bundled runtime and first-party panels.

Related