Styling Recipes

This page shows practical styling patterns built from the shipped SCSS API.

Recipe: minimal editor styling

Use this when your editor needs the standard flow shell, nodes, connectors, connections, and helper plugins:

That is the same base stack used by the default theme, except that it is connected explicitly in your stylesheet.

grouping() is separate because not every editor supports drop-to-group UX.

This adds styling for the runtime classes used during drag-to-group:

Customize them with:

If you use palette drag-and-drop or create nodes from external items, add:

This covers:

The external-item classes are usually rendered outside f-flow, so this styling is often placed at the application level.

Use $selectorless: true when you want the shipped node frame on a custom host selector:

That pattern is useful when your node body is built from Angular Material, custom cards, or a more application-specific component shell.

The same pattern works for groups:

If you want an editor-specific theme inside a component stylesheet:

If you would rather avoid ::ng-deep, move the mixins to a global stylesheet or use ViewEncapsulation.None.

Use the connection layers independently when your editor needs more explicit edge affordances:

This is more explicit than connection-all() and makes it obvious that always-visible drag handles are part of the intended UX.