modern-slider-pro

A visual drag-and-drop slider/carousel builder and runner for React. Design animated slides with a full-featured editor, then embed the result anywhere with a single component.

Features

• 🖱️ Drag, resize and rotate elements on a canvas — 1:1 cursor tracking in slide logical coordinates (zoom-aware)
• 🎬 Per-element entrance animations (fade, slide, zoom, bounce…)
• 🗂️ Multi-slide support; layer panel tabs: Slides first, Layers second
• ▶️ Live preview with auto-play, navigation arrows and dots
• 🎨 Text, image, video, button and box elements (nested groups)
• 📐 Grid snapping, snap-to-element guides (guides while dragging; snap on release) and configurable canvas size
• 📏 Site height modes — fixed, responsive (aspect-ratio + max height), or fit background for contain images (no letterboxing on live site)
• 🖼️ Injectable media picker — wire your own file manager via onOpenMediaPicker (sidebar, slide background, image elements)
• 📐 Layer alignment — vertical / horizontal canvas alignment, 3×3 grid (element / group / canvas), multi-selection union snap with DOM refinement
• ➕ Center guides — optional vertical + horizontal lines at canvas center (Canvas settings)
• 📏 Optional Photoshop-style canvas rulers with live pointer readout on the rulers (Canvas settings)
• ⊞ Fit to viewport zoom in the canvas toolbar — scale the slide into the visible area
• 🌗 Dark / light theme ready — all styles scoped with msp- prefix (zero conflict)
• 💾 Versioned project JSON import / export — Monaco Editor in export/import dialogs
• ✏️ Rich text editing for text elements (Trumbowyg) in a modal with toolbar save/close; HTML renders in preview and SliderRunner
• 🔤 Google Fonts — search and apply font families from a bundled catalog; line height, letter spacing, font weight, and font size (px/rem) in the Font properties accordion; auto-loaded in editor and SliderRunner
• 🌐 Built-in EN / TR UI strings; LanguageProvider with optional storageKey and browser-language default
• 🌗 ThemeProvider follows OS light/dark until the user picks a theme; optional storageKey persistence
• ↩️ Undo / redo — slide-scoped history (other slides are unaffected); global undo for project-wide changes; Reset slide next to undo when the active slide has edits
• ↩️ Keyboard Ctrl+Z / Ctrl+Y (⌘ on macOS); layer selection is kept when the undo still leaves those elements on the slide
• 🔒 Rename, hide and lock layers
• 📦 CSS-isolated — all Tailwind utilities prefixed with msp-, safe alongside any other CSS

Installation

npm install modern-slider-pro
# or
pnpm add modern-slider-pro
# or
yarn add modern-slider-pro

Peer dependencies

npm install react react-dom framer-motion

Quick Start

1. Import the CSS (once, in your app entry)

import 'modern-slider-pro/style.css';

2. Use the editor

import { SliderEditor } from 'modern-slider-pro';
import type { SliderEditorSavePayload } from 'modern-slider-pro';

export default function App() {
  const handleSave = async (payload: SliderEditorSavePayload) => {
    await fetch('/api/sliders/homepage', {
      method: 'POST',
      body: JSON.stringify(payload),
    });
  };

  return <SliderEditor onSave={handleSave} saveButtonLabel="Save Slider" />;
}

3. Run a slider from saved project JSON

import { SliderRunner } from 'modern-slider-pro';
import type { SliderProject } from 'modern-slider-pro';

export default function Hero() {
  const savedProject = localStorage.getItem('my-slider');
  const project = savedProject ? (JSON.parse(savedProject) as SliderProject) : undefined;

  return project ? <SliderRunner project={project} width="100%" /> : null;
}

API

<SliderEditor />

Full drag-and-drop editor. No props required — manages its own state internally. Use onSave to receive the full project payload:

type SliderEditorSavePayload = {
  version: 1;
  slides: Slide[];
  settings: SliderSettings;
  canvasSettings: CanvasSettings;
};

The legacy onDemoSave(slides) callback is still supported for apps that only store slides.

<SliderRunner />

| Prop | Type | Required | Description | |------|------|----------|-------------| | project | SliderProject | No | Versioned payload produced by SliderEditor | | slides | Slide[] | No | Legacy slide-only data | | autoPlay | boolean | No | Overrides project autoplay setting | | interval | number | No | Autoplay interval in milliseconds when overriding | | showDots | boolean | No | Overrides project dots setting | | showArrows | boolean | No | Overrides project arrows setting | | width / height | string | number | No | Render size; defaults to project canvas size when project is provided |

<EditorProvider> + useEditor()

For advanced usage, wrap your own UI with EditorProvider and access the editor state via useEditor().

import { EditorProvider, useEditor } from 'modern-slider-pro';

function MyControls() {
  const { slides, currentSlideIndex, setCurrentSlide } = useEditor();
  return <div>{slides.length} slides</div>;
}

export default function Page() {
  return (
    <EditorProvider>
      <MyControls />
    </EditorProvider>
  );
}

Types

import type {
  Slide,
  EditorElement,
  ElementType,
  SliderProject,
  SliderEditorSavePayload,
  SliderSettings,
  CanvasSettings,
  AnimationConfig,
  ViewMode,
} from 'modern-slider-pro';

CanvasSettings includes grid, snap, canvas dimensions, canvasHeightMode (fixed | responsive | fitBackground), showRulers, showCenterGuides (center crosshair in the editor), and other toggles saved in project JSON.

Constants

import {
  DEFAULT_SLIDE,
  DEFAULT_SLIDER_SETTINGS,
  DEFAULT_CANVAS_SETTINGS,
  VIEWPORT_SIZE,
  ANIMATION_PRESETS,
} from 'modern-slider-pro';

CSS Isolation

All Tailwind utility classes used internally are prefixed with msp- (e.g. msp-flex, msp-text-sm). This means the package will not conflict with your own Tailwind setup or any other CSS framework.

You only need to import the bundled stylesheet once:

import 'modern-slider-pro/style.css';

Theme Variables

The package defines its theme variables inside .msp-slider-pro, so host apps do not need global theme patches.

No tailwind.config.js changes required in your project.

Dropdowns feel “dead” or close on first tap?

Portals attach to document.body with high z-index values (near 100 000+) so they sit above typical app chrome. If overlays still behave as if you clicked empty space, check the host layout for:

• another fullscreen or fixed layer with pointer-events: auto and a higher z-index capturing events
• a parent wrapping the editor with pointer-events: none without re-enabling them on interactive children

Changelog

0.13.0 — 2026-06-26

• Added: Line height and letter spacing controls in the Font accordion — compact range sliders with numeric input; reset button restores defaults.
• Added: Font size slider + input; click px / rem suffix to toggle units (fontSizeUnits.ts); rem values stored as e.g. 1.25rem, px as numbers.
• Added: Font weight range slider (100–900, step 100); Google Fonts stylesheet loads weights 100–900.
• Improved: Font panel UX — thinner size="sm" sliders; property labels use 36% width (was 40%) for more control room; slider + input + reset on one row.
• Improved: Font family label → Font Family (Google) / Font Ailesi (google); removed redundant Google Fonts hint text below the picker.
• Fixed: Text bounds (groupBounds) resolve rem font sizes correctly via fontSizeToPx.

0.12.0 — 2026-06-26

• Added: Font accordion in Properties (text & button) — Google Fonts search/select, font size, and font weight; GoogleFontsLoader injects stylesheets in editor and SliderRunner.
• Added: Bundled googleFontsCatalog.json (~1900 families) — avoids browser CORS on Google metadata API.
• Added: runnerBackgroundColor on CanvasSettings — outer slider container fill in editor/preview (default transparent); ColorPicker in Canvas settings.
• Added: PropertyField — horizontal Properties layout (label left, control right) across color, font, spacing, style, and slide background fields.
• Added: TextContentEditorModal — Trumbowyg opens in a modal; Save / Close on the editor toolbar; View HTML toggles WYSIWYG ↔ source.
• Improved: Properties accordion headers — tighter padding and 12px labels.
• Improved: Selecting a layer switches the right sidebar to the Layers tab and shows Properties.
• Improved: Layer panel list — name only (content preview line removed).
• Improved: Slide transparent background — empty/transparent color no longer falls back to white; runner/container color shows through (getSlideBackgroundColor, SliderRunner).
• Improved: Ctrl+C / ⌘+C with highlighted UI text copies the selection instead of copying the canvas layer (hasActiveTextSelection).
• Fixed: Trumbowyg View HTML mode and modal min-height/toolbar layout.

0.11.0 — 2026-05-19

• Improved: Demo/marketing site — shared header with npm and GitHub links; mobile hamburger menu, responsive layout on home, demo, docs, and footer.
• Improved: Docs page — horizontal section nav on small screens; tighter mobile padding via shared site container.
• Fixed: Library TypeScript declaration build (pnpm build:lib) — Trumbowyg jQuery plugin types, drawer portable exports, ES2020-safe string sanitization in TrumbowygTextEditor.

0.10.0 — 2026-06-24

• Added: Trumbowyg rich-text editor for text element content in the Properties panel; SliderRunner and canvas preview render HTML via TextElementContent.
• Added: Monaco Editor for JSON Export / Import dialogs (JsonCodeEditor); bundled worker setup via monacoEnv.
• Added: LanguageProvider storageKey — UI language defaults from navigator.languages; persisted only after the user explicitly switches language.
• Added: ThemeProvider improvements — useSystemTheme follows prefers-color-scheme (with live OS updates) until the user toggles theme; explicit choice stored under storageKey.
• Improved: SliderEditor — useSystemTheme defaults to true, defaultTheme to light, shared msp-theme / msp-language keys; themeStorageKey prop on embed.
• Improved: Editor performance — snap guides moved to SnapGuidesProvider; timeline panel lazy/deferred mount; canvas auto fit-to-viewport; lighter file watching in dev.
• Improved: Canvas keyboard shortcuts ignored while editing in Trumbowyg, Monaco, or contenteditable (editorKeyboardTarget).
• Improved: Button label field uses multiline Textarea; text HTML stripped for layout metrics in groupBounds.
• Fixed: Context menu stacking above nested dialogs/overlays (z-index + [data-radix-context-menu-content] CSS).
• Fixed: Properties content accordion could not close (forceMount removed).
• Fixed: Layer selection lost when deleting text inside Trumbowyg.
• Fixed: In-app toasts use package ThemeContext (dark/light aware).
• Demo site (dev app): shared SiteLayout (header/footer), TR/EN + theme on all pages, docs expanded, demo Save publishes slides to live SliderRunner preview, inline editor uses fullscreen shell (not modal) so portaled menus and Monaco work reliably.

0.9.0 — 2026-06-16

• Added: Button link support on slide buttons (buttonLink) with URL normalization in SliderRunner (auto-prefixes https:// when needed).
• Added: Button link target option (buttonLinkTarget) — choose same tab (_self) or new tab (_blank) from a dedicated Link accordion in Properties.
• Added: New Layout accordion in Properties; text alignment and element alignment controls moved from Content into this section.
• Added: Properties accordion state persistence — open/closed sections are saved and restored across reloads.
• Improved: Properties panel structure — content, layout, color, style, animation, spacing, and button link settings are separated more clearly.

0.8.0 — 2026-06-11

• Added: canvasHeightMode on CanvasSettings — fixed (default), responsive (aspect-ratio + max-height: canvasHeight), or fitBackground (shrink runner to contained image aspect ratio, capped at canvasHeight). Configured in Canvas settings → Site height behavior.
• Added: onOpenMediaPicker on SliderEditor — host apps inject a file manager; types MediaPickerHandler, MediaPickerRequest, context MediaPickerContext.
• Added: Helpers getCanvasHeightMode, getFitBackgroundHeight, resolveRunnerContainerStyle, normalizeCanvasHeightMode (exported from package root).
• Improved: SliderRunner — respects canvasHeightMode; preloads background image dimensions for fitBackground; height prop applies only in fixed mode (other modes use canvasHeight as max).

0.7.0 — 2026-06-01

• Added: Slide background sizing — per slide, set image/video fit to Cover, Fit (contain), Stretch (fill), or Original size (backgroundFit on Slide; helpers in slideBackground.ts).
• Added: Slide overlay — optional tint layer over the background with color and opacity (overlayEnabled, overlayColor, overlayOpacity); rendered in the editor, preview, and SliderRunner via SlideOverlayLayer.
• Added: Pause autoplay on hover — when autoplay is on, moving the pointer over the slider pauses slide advance and the progress bar; leaving resumes (SliderRunner + editor preview).
• Improved: SliderRunner — video backgrounds now respect backgroundFit; shared YouTube embed helper (getYoutubeEmbedUrl).
• Improved: Editor Properties (slide, no selection) — overlay controls below background tabs; background fit on image/video tabs.

0.6.3 — 2026-06-01

• Added: Progress bar scope — in Slider settings, choose Each slide (progressBarScope: 'perSlide') to refill the bar on every slide, or All slides ('allSlides') for one continuous bar across the deck.
• Added: Progress bar thickness — adjustable height from 1px to 5px (progressBarHeight, default 4).
• Improved: Slider and Canvas settings panels — thin dividers between each control for clearer grouping (SettingsPanelDivider).
• Fixed: Progress bar desync when using navigation arrows or dots — fill resets correctly on manual slide change (uniform scale + useLayoutEffect / remount on index change).

0.6.2 — 2026-06-01

• Fixed: SliderRunner typography distortion — slide stage now uses a uniform scale (min(scaleX, scaleY)) and centers content so text and assets are not stretched when the embed container aspect ratio differs from the editor canvas.
• Fixed: Editor context menu build error — removed unsupported controlled open on Radix ContextMenu root; rename still closes the menu via onSelect and deferred dialog open.

0.6.1 — 2026-06-01

• Fixed: SliderRunner responsive layout — when the embed container is wider or taller than the editor canvas (canvasSettings.canvasWidth / canvasHeight), slide content is scaled to fit (e.g. width="100%" on a 1920px page keeps centered layouts designed at 1280px). Uses getSlideStageScale() and a ResizeObserver on the runner container.

0.6.0 — 2026-06-01

• Added: Right sidebar tabs — Slides, Layers, Canvas settings, and Slider settings (moved from the top toolbar).
• Added: Progress bar — optional bottom bar with color, fill opacity, and track opacity (settings.showProgressBar, progressBarColor, progressBarOpacity, progressBarTrackOpacity).
• Added: Slide transition on/off switch in Slider settings (slideTransitionEnabled); style and duration apply only when enabled.
• Added: getSlideAutoplayDwellSeconds() — autoplay waits the timeline duration when it is longer than the autoplay interval, otherwise the autoplay interval.
• Added: Monaco-based JSON export / import dialogs (JsonCodeEditor); toolbar save label Export (EN) / Dışa Aktar (TR).
• Improved: Properties panel — hidden on Canvas / Slider settings tabs; on Layers, shown only when a layer is selected; slide background props on the Slides tab.
• Improved: Switching sidebar tabs clears layer selection to avoid cross-tab confusion.
• Improved: Loop with a single slide replays timeline / entrance animations each cycle; progress bar restarts via cycleKey / slideTimelinePlayToken.
• Improved: Slider chrome (arrows, dots, progress) visible in the editor when enabled and there is at least one slide (progress bar also when loop + autoplay on a single slide).
• Fixed: Toolbar preview not advancing to the next slide — slide-advance timer no longer cancelled by timeline play() re-renders; timeline no longer loops the same slide during full preview.
• Fixed: Context menu staying open when choosing Rename.
• Fixed: Timeline settings control moved into Canvas settings (timeline show/hide).

0.5.0 — 2026-06-01

• Added: Slide timeline — per-element entrance clips on a slide timeline (drag, trim, play / pause / stop, slide duration, Ctrl/Cmd + scroll to zoom the track).
• Added: Slide transitions — fade, slide, slide up, and zoom between slides in Slider settings; SliderRunner and editor preview use settings.slideTransition / slideTransitionDuration.
• Added: Timeline panel toggle — canvasSettings.showTimeline (toolbar Timeline settings); hide the panel while keeping the canvas layout; preview animations still run via a headless playback controller.
• Added: setResponsiveViewport() on the editor context — desktop / tablet / mobile toolbar buttons update both canvas view and properties mode together.
• Added: CanvasViewportContext — fit-to-viewport and center-canvas actions for the canvas zoom bar.
• Improved: Toolbar Preview stays in sync with the timeline playhead and loops element entrance animations on the active slide.
• Improved: Canvas zoom — fit / center on the bottom bar; viewport centering uses the visible scrollport; auto-fit on view / layout changes.
• Improved: Rulers remain available during preview (no longer forced off when playing).
• Fixed: Top bar desktop / tablet / mobile buttons not responding (overlay hit area / z-index).
• Removed: Duplicate fit / center controls from the top toolbar (kept on the canvas zoom bar).

0.4.0 — 2026-05-20

• Fixed: Elements lagging behind the cursor while dragging — position now follows slide-space pointer math (same as rulers), not react-rnd scaled deltas alone; grab offset preserved for nested layers.
• Fixed: Janky drag when snap to elements was on — snapping applies on release only; guide lines still show during drag.
• Fixed: Maximum update depth loops with rulers open (throttled ruler viewport + pointer updates).
• Fixed: Layer panel re-render storm when only x/y changed during drag.
• Fixed: Double-step “jump” on canvas alignment clicks — single DOM-aware update when possible.
• Improved: Row / column / multi-selection alignment controls with measured bounds (slideElementDomBox) for accurate edge snap.
• Improved: Properties panel — vertical alignment section above horizontal alignment.
• Improved: Radix portaled UI (nested popovers/selects) and theme classes for embedded hosts.

0.3.0 — 2026-05-19

• Added: Center guides (canvasSettings.showCenterGuides) — draws a + (vertical & horizontal) at the slide center when enabled in Canvas settings.
• Added: Ruler pointer indicators — when rulers are on, the top/left rulers show Photoshop-style hairlines and logical (px) coordinates following the cursor over the canvas.
• Added: Per-slide undo/redo — changing slides keeps separate stacks; Ctrl+Z on slide B does not undo edits made on slide A. Project-wide actions (canvas/slider settings, add/remove slide, JSON load) use a global history chain.
• Added: Reset slide control in the toolbar (left of undo) to jump the active slide back to its state before the first edit on that slide in the session (redo can restore).
• Improved: Undo/redo no longer clears the layer selection when the selected elements still exist after the operation (filterSelectionToSlideTree + drill reconciliation).
• Improved: Toolbar — desktop / tablet / mobile view toggles are visually centered in the bar.
• Improved: Layer panel — removed the disabled History tab; tab order is Slides then Layers (default open tab remains Layers).

0.2.3 — 2026-05-19

• Fixed: Embed apps with heavy z-index stacking (shells, navbars, layouts) stealing pointer events — all Radix portaled layers now use stacked semantic z-index tokens (~100 010–100 400) instead of z-50 / low hundreds.
• Fixed: data-radix-popper-content-wrapper often keeps a ~100 inline z-index; inner msp-z-overlay-* cannot raise the portal against host layers stack — added a scoped rule (:has([class*='msp-z-overlay-'])) so the wrapper is lifted to 100450, above host modals and MSP dialogs but below MSP toasts.

0.2.2 — 2026-05-19

• Fixed: Popovers and dialogs closing on the first click before a control could activate — caused by Radix overlays sharing the same z-index, and Tooltip + Popover nested on the same toolbar triggers. Layers are ordered (tooltip lowest, dialogs mid, selects/menus above dialogs); Canvas / Slider / App settings triggers use title/aria-label instead of nesting tooltip + popover.
• Fixed: Clicks on Select or Dropdown lists (portaled to body) being treated as “outside” the parent Popover/Dialog — onInteractOutside now ignores interactions that land on [role="listbox"] / [role="menu"].

0.2.1 — 2026-05-18

• Fixed: Radix UI portals (popover, dialogs, dropdowns, select, tooltip, context menu) rendered under document.body outside .msp-slider-pro, where theme CSS variables (--primary, --input, --border, …) are defined — switches and outline buttons could look invisible in settings and other overlays. Portaled surfaces now apply the scoped msp-slider-pro theme classes automatically.

0.2.0 — 2026-05-17

• Added: Canvas rulers — top and left pixel guides that sync with zoom and scroll; enable Show rulers in Canvas settings (toolbar grid icon). New field: canvasSettings.showRulers in saved JSON (default false).
• Added: Fit to viewport in the canvas zoom bar — scales the slide to fit the scroll area and recenters the view.
• Improved: Canvas viewport controls (center view, pan space, zoom UX) and editor translations.

0.1.6 — 2026-05-14

• Added: onSave(payload) API with versioned { slides, settings, canvasSettings } payload.
• Added: SliderRunner can render directly from project={payload} while preserving legacy slides.
• Added: Unsaved changes indicator, browser unload warning, undo/redo buttons and keyboard shortcuts.
• Added: Layer rename, visibility toggle and lock support.

0.1.5 — 2026-05-14

• Fixed: SliderEditor now mounts its own language, theme, published slides, editor, and tooltip providers.
• Fixed: Theme variables are scoped under .msp-slider-pro, so host apps do not need global theme patches.
• Improved: Public API now exports provider hooks and TypeScript types for advanced integrations.
• Fixed: Library declarations now expose the package API from dist/index.d.ts.

0.1.4 — 2026-05-14

• Fixed: Arbitrary CSS selectors with pseudo-classes (e.g., [&>span:last-child]) now correctly handle pseudo-classes without prefixing
  • Transform script now detects CSS selector syntax (&) and avoids prefixing selector parts
  • transform Token() improved to skip CSS selectors, leaving pseudo-classes intact
• Removed unnecessary vite post-build hook — transform script handles all CSS syntax correctly at source level
• Users no longer need any post-install patches!

0.1.3 — 2026-05-14

• Fixed: :msp-last-child CSS pseudo-class selector breaking Turbopack parser — now correctly emitted as :last-child (vite post-build hook)
• Fixed: usePublishedSlides now returns safe fallback when PublishedSlidesProvider is not mounted, preventing crashes
• Users no longer need the post-install patch script for these issues

0.1.2 — 2026-05-14

• BREAKING: Removed package-level :root and .dark CSS variable definitions — host app must provide theme variables
  • This allows seamless integration with host applications that have their own theme systems
  • Users no longer need the post-install patch to remove global theme pollution
• Added fallback implementations to context hooks (useEditor, useTheme, useLanguage) — components now render even outside providers
  • Prevents crashes when providers are accidentally omitted
  • Useful for testing or standalone component usage
• Enhanced onDemoSave callback — now receives edited slides payload as parameter
  • Host apps can now save the actual slide data when demo is updated
• Fixed CSS attribute selectors ([stroke='#ccc'], data-selected='true') — removed stray msp- prefixes that broke CSS parsing
• Clean build with zero CSS warnings

0.1.1 — 2026-05-14

• Fixed modal/dialog positioning — translate-x[-50%] / translate-y[-50%] classes were missing msp- prefix, causing dialogs to render off-screen
• Fixed double-prefix (msp-msp-) issues in 21 UI components (group-*, peer-*, has-[...], negative utilities)
• Canvas background area outside slides is now dark/light theme-aware
• Transform script is now fully idempotent — safe to re-run

0.1.0 — 2026-05-01

• Initial release
• Drag-and-drop editor with text, image, video and button elements
• Per-element animations with Framer Motion
• Multi-slide support, layer panel, live preview
• Full JSON import / export
• CSS-scoped with msp- Tailwind prefix

Development

# Install dependencies
pnpm i

# Start dev server
pnpm dev

# Build app
pnpm build

# Build npm library
pnpm build:lib

License

MIT © deneshiqua