@dolphinspired/solid-stage #

Editor-chrome primitives for SolidJS — collapsible side panels, collapsible sections, a multi-layer canvas stage, a compact form control set, and app-level overlays (tooltip / modal / toast). Built for property-heavy editor UIs: a canvas in the middle, dense settings down the sides.

Browser-only. Solid 1.9+ peer dependency.

Install #

pnpm add @dolphinspired/solid-stage

On Vite, also set optimizeDeps: { exclude: ['@kobalte/core'] } (why).

import { EditorPanels, Section, TextField } from '@dolphinspired/solid-stage';
import '@dolphinspired/solid-stage/styles.css';

function App() {
  return (
    <div class="stage-root">
      <EditorPanels
        center={<MyCanvas />}
        leftPanel={
          <Section title="Settings">
            <TextField name="Name" value={name} onChange={setName} />
          </Section>
        }
      />
    </div>
  );
}

Documentation #

Full docs live in docs/:

• Quick start and Concepts — start here.
• Reference: controls & fields, layout, state, overlays, drag/dock/float, theming, icons.
• Guides — custom controls, validation, custom search, deep-linking.

The docs are the source of truth for the feature set — this README stays intentionally thin.

Using an AI agent with this library? Point it at AGENTS.md — a compact briefing of the conventions and the assumptions it can safely make.

License #

MIT. Bundled icons are vendored from Phosphor under its MIT licence (see NOTICE).