Widget Engine

Overview

Widgets system is a new solution for managing the content of a webpage. Think of widgets as a block of content on a page:

a paragraph
a slider
a hero image/banner
article/news
etc...

It puts a lot of power into the hands of content creators to control page structure and allows for the reuse of existing content elements.

Instead of filling out dozens of fields inside your content type, jumping around between editorial tabs and trying to find the necessary field to upload images for a slideshow, site builders can create or choose existing necessary parts of page that will be immediately displayed with live preview in ONE field. Content creators can reuse that part of a page (widget) in future pages, again and again.

Spending time on creating/editing and the complexity of the editorial page provides ample opportunity for mistakes during the editing process. These problems are related to the site builders UI and are one of the aspects you can improve using the widget module:

Using integration with the Inline Entity Form module. If you are a fan of table viewing and editing - this is exactly what you want. Simple Entity Reference for selecting existing widgets and editorial form of widget inside your main editorial page form - this is IEF way.
Using double integration with Inline Entity Form and Entity Browser modules. Modal windows (or simply pop ups) are are helpful in keeping users engaged (in our case it is editing page). A simple interface with two tabs for selecting existing widgets (with Views and selection support) and creating new widgets respectively (separate buttons for each widget type) - this is Entity Browser way.

One of the features of the Widget engine module is generating a live-preview image of newly created widgets, the preview is updated in realtime as updates are made. This has been achieved by using html2canvas JS library and basic Drupal Entity API. In case of that you can create new widgets bundles, update their fields structure, creates separate display modes that can be used for rendering widgets on your page and especially for live-preview of widget on editorial step. Creating twig templates for each widget bundle and adding different CSS/JS libraries also possible.

When to use

For one column template page
For pages with unfixed structure
For flexible landing pages

Features

Allows for the creation of pages with widgets (pre-existing block templates)
Reuse existing widgets
Live-preview of widgets in Back Office
User friendly Widget Selector
Bundling of widgets and full Drupal Entity API support
Customizable UI for editorial pages with IEF support
Exportable configuration for widget bundles and UI settings
Domain access support (in progress)

List of available modules in the package

Node Type Custom Page. An example module that provides new Node content type with minimal setup of the widget field.
Widget engine entity form. This module provides integration with the Entity Browser module and allows the user to choose a new selector plugin (2 tabs support).

Also, you can find a little bonus: SVG icons pack, that you can use on your project, especially like each widget type icon.

Alternative solutions

Paragraphs

Main Alternative for Widgets is a Paragraphs ( see https://www.drupal.org/project/paragraphs )
It’s provides pretty similar solution. However Paragraphs module: