@sendsay-ru/guidely-editor

Browser-based visual editor for @sendsay-ru/guidely configs.

The editor is intended for development, staging, internal admin tools, and guided-tour authoring workflows. It mounts a small overlay inside the host application, lets authors pick real interface elements, create steps, preview the selected flow through the core Guidely renderer, and export the resulting config.

The GUI covers the public Guidely config schema: default locale, attribute prefix, flow id, flow start date metadata, manual, route, or target triggers with priority, blocking or interactive highlights, highlight padding, step id and type, content, targets, placement, actions, target-event advancement, target waiting, and timeout behavior. For hotspot steps, authors can also choose whether the beacon tooltip should be open immediately.

Install

npm install @sendsay-ru/guidely @sendsay-ru/guidely-editor

yarn add @sendsay-ru/guidely @sendsay-ru/guidely-editor

@sendsay-ru/guidely is a peer dependency and provides config validation, the runtime engine, and the renderer used for previews.

Usage

import { createGuidelyEditor } from "@sendsay-ru/guidely-editor";

const editor = createGuidelyEditor({
  config,
  locale: "en",
});

editor.mount();

Authors can copy the current JSON config directly from the editor UI. Pass onChange only when you want to autosave drafts or integrate with local storage, an API, or an internal admin tool:

const editor = createGuidelyEditor({
  config,
  onChange(nextConfig) {
    localStorage.setItem("guidely-config", JSON.stringify(nextConfig));
  },
});

Editor drafts can be temporarily invalid while authors are creating a flow, for example when a new flow has no steps yet. Validate before using the config in the runtime, not before saving a draft.

Targeting

When a picked element already has data-guidely-id, the editor creates a stable data-id target. If the attribute is missing, it generates a CSS target so preview works immediately, then recommends adding a data-guidely-id in the application code before shipping the tour.

API

const editor = createGuidelyEditor({
  config,
  locale,
  container,
  onChange,
});

editor.mount();
editor.unmount();
editor.startPicking();
editor.stopPicking();
editor.preview();
editor.copyConfig();
editor.getConfig();
editor.setConfig(nextConfig);
editor.destroy();

mount() accepts an optional container and falls back to options.container or document.body. getConfig() returns a cloned draft config. setConfig() replaces the draft with a normalized config and selects the first flow. preview() validates the selected flow and starts it with the core renderer. copyConfig() writes formatted JSON to the clipboard when the Clipboard API is available.

The editor panel's close button collapses it into a small launcher button. Use unmount() or destroy() when you want to remove the editor from the page completely.