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.
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...).
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).
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.
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.
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
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 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.