Modules
A visual, drag & drop content builder for Phoenix LiveView.
Defines a block: a component that can be placed in a document, configured in the editor and rendered on your site.
Helpers imported into every block (use ElementorexCms.Block).
A property of a block: its type, default, label and editor control.
daisyUI collapse as an accordion (FAQ). Built on <details>, so it opens and
closes without JavaScript; with One at a time the browser closes the others.
daisyUI alert: an important message with icon, title, text and an optional button.
daisyUI avatar: photo or initials, with status and an optional name beside it.
daisyUI badge: a small label.
daisyUI button with link, colors, styles, sizes and a Heroicon.
Several buttons side by side, separate or joined (daisyUI join).
daisyUI card: image, badge, title, text and a button.
daisyUI carousel of images with scroll snapping (no JavaScript).
daisyUI chat bubbles: a conversation, a testimonial, a FAQ in dialogue.
Flexbox container: lays its children out in a row or a column, with gap, alignment and wrapping. Rows stack on mobile unless told otherwise.
daisyUI countdown to a date and time. The values are computed when the page is
rendered and kept ticking by the runtime script (elementorex_cms/runtime,
see the README); without it the countdown shows the values of the render.
daisyUI divider: a line, optionally with a text in it.
Icon box: an icon with a title and a text, on top or to the left.
Choice filter of a Filters form: the values of a field as a dropdown,
radio buttons, checkboxes (several at once) or buttons. The options are the
values the records have (ElementorexCms.Source.values/3, optionally with
how many records have each) or a list written in the editor.
Range filter of a Filters form: a minimum and a maximum for a number or a date field (a price between, a date from).
Search box of a Filters form: visitors look for a text in the searchable
fields of the loop grid's source (ElementorexCms.Source.searchable/1).
Sort of a Filters form: the visitor picks the order of the loop grid among the options written in the editor (a sortable field and a direction each).
Toggle filter of a Filters form: when on, only the items whose field has a
value (true by default) are shown. Only featured, In stock (a filter
of the source with logic of its own)…
Filters: a form with which visitors search, filter and order a loop grid of
the page (Loop grid, ElementorexCms.Blocks.Loop).
Grid of columns (CSS grid), with its own number of columns for desktop, tablet and mobile. New grids come with two columns.
A heading (<h1>-<h6>), editable by typing on the canvas.
daisyUI hero: a large area with an optional background image and overlay that centers its content. New heroes come with a heading, a text and a button.
Hand-written HTML, sanitized with the :html policy of
ElementorexCms.HTML.Sanitizer (no scripts, iframes, forms or event
handlers). Tailwind and daisyUI classes work if your CSS build includes them.
A Heroicon, with size, color and an optional circle behind it.
An image with optional link, caption, rounded corners, daisyUI mask and shadow.
daisyUI kbd: keyboard keys, e.g. ⌘ + K.
daisyUI link: a text link with color and hover underline.
List of items, each with a Heroicon (checks, benefits, steps...).
Loop grid: repeats its content for every item of a source (products, posts…)
in a responsive grid. The blocks inside bind their props to the fields of the
item (see ElementorexCms.Dynamic), so one card designed in the editor
becomes the card of every product.
daisyUI mockups: browser, phone or window frames around an image, or a code block.
Option lists shared by the built-in blocks (labels are translated when shown).
daisyUI progress bar or radial progress with its value.
A quote or testimonial with its author.
daisyUI rating (read only): stars or hearts, with halves.
The root of every document. It is not in the palette and cannot be removed; select it in the tree to style the whole document (padding, background...) or to write CSS for it.
A section of the page: full width or boxed, with its children stacked.
Empty vertical space.
daisyUI stats: figures with title, value, description and icon.
daisyUI steps: a process with done and pending steps.
daisyUI tabs with content, switched with radio inputs (no JavaScript).
Rich text: paragraphs, lists, links and formatting.
daisyUI timeline: dated milestones, vertical or horizontal.
A YouTube or Vimeo video (embedded with its canonical player URL) or a video
file (.mp4, .webm).
Builds documents in Elixir: for templates, seeds and tests.
Validation of the CSS that documents carry.
How the editor canvas looks: the stylesheets of your site, the attributes of
<html> and <body> and an optional frame around the content.
Components to show documents on your site.
The document: a tree of nodes stored as plain JSON (a jsonb column).
Dynamic content: props of a block bound to fields of a record.
Ecto type for documents, stored as a map (jsonb in PostgreSQL).
The visual editor, as a LiveComponent.
Undo and redo for the editor: snapshots of the document with a label.
Visitors' search and filters of loop grids.
Allow-list HTML sanitizer for the rich text and the HTML of documents.
Heroicons v2.2 rendered as inline SVG.
Translations of the editor interface and the built-in blocks.
A dictionary for one language: the English strings of the interface (and of your blocks) mapped to their translation.
Identifiers of document nodes.
Behaviour to connect the editor's image fields to your file storage.
The set of blocks a document can use.
Renders documents and nodes with the blocks of a registry.
What a block knows about where it is rendered
A collection of records that documents can show: products, posts, events, team members… (dynamic content).
A source (ElementorexCms.Source) from an Ecto schema. Its fields are read
from the schema when they are needed, so a field added to the schema (with
its migration) shows up in the editor without touching anything else.
A field of a source (ElementorexCms.Source): what the editor offers when a
prop of a block is bound to the data of an item.
What a loop asks a source for (ElementorexCms.Source.list/2)
The sources of dynamic content a document can use (see
ElementorexCms.Source), like ElementorexCms.Registry is for blocks.
Builds the stylesheet of a document from the styles of its nodes.
Ready-made sections the editor can insert (Templates panel).
Sanitizes the URLs that end up in href, src and CSS url().
Mix Tasks
Generates a block for the visual editor, with props for the inspector, its render function and a test.
Generates everything to manage pages built with the visual editor: migration, schema, context, an admin list, the editor page and the public page.
Generates a filter block: a field of the Filters form (the search and filters visitors use on a loop grid) written by you, and its test.
Generates a locale module (ElementorexCms.I18n.Locale) per language with
every string to translate: the labels, help texts, options and default texts
of your blocks, the names of your templates and the names of your sources of
dynamic content and their fields.
Generates a source of dynamic content (ElementorexCms.Source.Ecto) for an
Ecto schema, so the editor can list its records in loops and bind blocks to
their fields. The schema can come from mix phx.gen.live, mix phx.gen.schema
or a migration written by hand.
Generates a templates module (see ElementorexCms.Templates): sections that
the editor inserts from its Templates panel.
Checks the steps that connect ElementorexCms to a Phoenix app and prints the snippet for any missing one. It does not modify files.