FlowDrop 1.4.0: Customize Your Settings, Reclaim Your Canvas

FlowDrop 1.4.0 is out. This release is about two things: giving integrators more control over how FlowDrop looks and behaves, and giving end users more room to work.

Customize the settings modal — no Svelte required

If you embed FlowDrop with mountFlowDropApp, you can now pass settingsTitle, settingsDescription, and settingsFields directly as options. Your settings panel can match your product’s domain without writing a single line of Svelte.

This matters because FlowDrop is a drop-in component. The people embedding it shouldn’t need to adopt a framework just to change a modal title or add a configuration field.

A UI that follows your theme

The logo, canvas controls, and minimap now pull their colors from skin tokens (--fd-logo-* and the existing --fd-* variables). Switch between light and dark mode, or apply a branded skin, and every piece of the UI adapts automatically.

Previously, the xyflow controls and logo used hardcoded colors that would clash with custom themes. That’s gone — if you’ve already set up skin tokens, 1.4.0 just works.

Collapsible sidebar for more canvas space

The component sidebar now collapses fully to zero width. A floating toggle button on the canvas lets users bring it back when they need it. On large workflows, every pixel of canvas counts — especially on smaller screens where the sidebar was eating into the working area.

Dynamic ports on every node type

In 1.3.0 we gave you control over port visibility and ordering. In 1.4.0, SimpleNode and SquareNode now support dynamicInputs and dynamicOutputs in their config. Users can add custom ports at runtime through the config form, without needing to switch to a WorkflowNode.

This means simpler node types can grow with user needs. Start with a basic node, let users add the ports they need — no predefined schema required.

Polished edges and responsive navigation

Edge arrowheads now align precisely with the curve direction at connection points, fixing subtle visual glitches on curved edges. The navbar adapts gracefully to smaller viewports with icon-only breadcrumbs and a compact logo, keeping action buttons accessible at any screen size.

Upgrading

npm install @flowdrop/flowdrop@1.4.0

No breaking changes. Existing configurations continue to work as before.