Work in progress, not ready for usage

Prototype Slides

A small npm package that adds a draggable floating circle to any website. Clicking the circle expands it into a fullscreen slide editor with per-slide text color, slide color, text size, bold text, and list controls.

The package is framework-agnostic at its core, with an optional React entrypoint.

What It Does

• Renders a floating launcher above any web product
• Lets the user drag the launcher anywhere on screen
• Expands into a fullscreen editor when clicked
• Supports bold text plus bulleted and numbered lists
• Stores one shared slide deck per branchKey
• Works in plain JavaScript and React
• Keeps styles isolated with Shadow DOM

Install

npm install prototype-slides

JavaScript Usage

import { createSlideWidget } from "prototype-slides";

const branchKey = window.__APP_BRANCH__ ?? "local";

const widget = createSlideWidget({
  branchKey,
  title: "Product Slides",
  defaultTheme: {
    textColor: "#111827",
    slideColor: "#ffffff",
    fontSize: 20
  }
});

widget.open();

React Usage

import { SlideWidget } from "prototype-slides/react";

export function App() {
  return (
    <SlideWidget
      branchKey={window.__APP_BRANCH__ ?? "staging"}
      title="Product Slides"
      defaultTheme={{
        textColor: "#0f172a",
        slideColor: "#f8fafc",
        fontSize: 20
      }}
    />
  );
}

API

createSlideWidget(options)

Creates and mounts the widget immediately.

Options:

• branchKey: required string used to scope storage
• mountTo: optional mount element, defaults to document.body
• defaultTheme: optional { textColor, slideColor, fontSize }
• storage: optional custom storage adapter
• zIndex: optional z-index override
• launcherSize: optional closed-circle size in pixels
• initialPosition: optional { x, y } for the floating launcher
• title: optional label shown in the expanded editor
• onChange: optional callback fired after a deck save

Returned controller:

• open()
• close()
• destroy()
• getDeck()
• setDeck(deck)

Storage Model

The default storage is browser localStorage.

• Key pattern: prototype-slides:{branchKey}
• Scope: one deck per branch key
• Not page-dependent
• Saves automatically after edits

This version does not write to git or GitHub directly. To make content truly branch-backed later, keep the widget UI as-is and swap in a custom storage adapter.

Passing A Branch Key

The host app is responsible for passing the branch key into the package. A browser package cannot safely detect the current git branch by itself.

Common approaches:

• Inject a branch name into window.__APP_BRANCH__ at deploy time
• Expose the branch through your app config
• Use a staging-specific constant for the first version

Local Development

npm install
npm run build
npm run typecheck

Build output goes to dist/.

Local Demo

Run the built-in demo with:

npm run demo

That will build the package and start a tiny local server at http://localhost:4173/demo/.

The demo lets you:

• mount the widget locally
• change the branchKey
• change default text and slide colors
• verify that content is stored per branch in localStorage

The examples/ directory contains simple usage references:

• examples/vanilla/index.html
• examples/react/App.tsx

The demo/ directory is the contributor-friendly local preview:

• demo/index.html
• demo/main.js
• demo/server.mjs

Publish To npm

1. Build and typecheck the package
2. Log in with npm login
3. Publish with npm publish --access public
4. Install the package in a separate app and verify it there

Future Upgrade Path

The next clean step is a remote storage adapter. That would let the exact same package save decks to:

• your own API
• a GitHub-backed file store
• an environment-specific staging service

That keeps the npm package universal while storage becomes deployment-specific.