Editor Presets — 10 pre-composed editor configurations for common use cases.
Each preset composes the lower-level PhiaUI editor components into a ready-to-use editor with opinionated defaults. Import one preset component and drop it into your LiveView for an instant editing experience.
Presets
Original (v0.1.17)
simple_editor/1— minimal editor with bold/italic/link/lists toolbararticle_editor/1— Medium-style editor for blog posts and articlesdocument_editor_full/1— full document shell with header/footer/sidebaracademic_editor/1— academic editor with citation toolbaremail_composer/1— email-style editor with To/Subject/Signature
v2 Presets (v0.1.17)
notion_editor/1— Notion-style: slash commands, drag, block toolbarsgoogle_docs_editor/1— GDocs: menu bar, A4 pages, track changesmedium_editor_v2/1— Medium: floating toolbar, clean reading, imagescode_notes_editor/1— Dev notes: syntax hl, code sandbox, markdowncollaborative_editor/1— Full collab: presence, cursors, comments sidebar
Usage
# In your LiveView template:
<.simple_editor id="my-editor" value={@content} />
# Or for a full document experience:
<.document_editor_full id="doc" title="Q4 Report" />Summary
Functions
Renders an academic editor with citation toolbar and formatting for papers.
Renders a Medium-style article editor with heading selector, image support, and embeds.
Renders a developer-focused notes editor with syntax highlighting, code sandbox blocks, and markdown input shortcuts.
Renders a full collaborative editing experience with presence indicators, cursor tracking, comments sidebar, and version history access.
Renders a full document editor with header, toolbar, content, sidebar, and footer.
Renders an email-style composer with To, Subject, body, and signature fields.
Renders a Google Docs-style editor with a full menu bar, toolbar, A4-formatted pages, and optional track changes mode.
Renders a Medium-style writing experience with floating toolbar, clean reading typography, and image-focused layout.
Renders a Notion-style editor with slash commands, drag handles, and per-block floating toolbars. Minimal chrome, maximum content focus.
Renders a minimal editor with a compact toolbar (bold, italic, link, lists).
Functions
Renders an academic editor with citation toolbar and formatting for papers.
Includes a citation style selector, footnote insertion, bibliography tools, and standard text formatting. The toolbar is tailored for academic writing.
Example
<.academic_editor id="paper" citation_style={:mla} value={@paper_content} />Attributes
id(:string) (required)value(:string) - Defaults to"".citation_style(:atom) - Defaults to:apa.on_update(:string) - Defaults to"editor:update".class(:string) - Defaults tonil.- Global attributes are accepted.
Renders a Medium-style article editor with heading selector, image support, and embeds.
Features a full toolbar with text formatting, heading levels, lists, blockquotes, code blocks, and media insertion. Ideal for blog posts, documentation, and long-form content.
Example
<.article_editor id="blog-editor" value={@draft_content} />Attributes
id(:string) (required)value(:string) - Defaults to"".on_update(:string) - Defaults to"editor:update".class(:string) - Defaults tonil.- Global attributes are accepted.
Renders a developer-focused notes editor with syntax highlighting, code sandbox blocks, and markdown input shortcuts.
Features: code blocks with language detection and highlighting, inline code formatting, monospace-friendly layout, markdown shortcuts.
Example
<.code_notes_editor id="dev-notes" value={@notes} />Attributes
id(:string) (required)value(:string) - Defaults to"".on_update(:string) - Defaults to"editor:update".class(:string) - Defaults tonil.- Global attributes are accepted.
Renders a full collaborative editing experience with presence indicators, cursor tracking, comments sidebar, and version history access.
Designed to integrate with PhiaUI's Collab Suite (CollabRoom, CollabPresence, etc.) for real-time multi-user editing.
Example
<.collaborative_editor
id="collab-doc"
title="Team Notes"
collaborators={@online_users}
/>Attributes
id(:string) (required)value(:string) - Defaults to"".title(:string) - Defaults to"Shared Document".on_update(:string) - Defaults to"editor:update".collaborators(:list) - Defaults to[].class(:string) - Defaults tonil.- Global attributes are accepted.
Renders a full document editor with header, toolbar, content, sidebar, and footer.
This is the most complete preset — a Google Docs-like experience with title bar, save status, collapsible sidebar, word count footer, and full formatting toolbar.
Example
<.document_editor_full id="report" title="Q4 Report" value={@content} />Attributes
id(:string) (required)value(:string) - Defaults to"".title(:string) - Defaults to"Untitled".on_update(:string) - Defaults to"editor:update".class(:string) - Defaults tonil.- Global attributes are accepted.
Renders an email-style composer with To, Subject, body, and signature fields.
The body uses the rich editor with a compact toolbar. The signature is appended below the editor as a preview.
Example
<.email_composer
id="email"
to="user@example.com"
subject="Meeting Follow-Up"
signature="Best regards,\nJohn"
/>Attributes
id(:string) (required)value(:string) - Defaults to"".to(:string) - Defaults to"".subject(:string) - Defaults to"".signature(:string) - Defaults to"".class(:string) - Defaults tonil.- Global attributes are accepted.
Renders a Google Docs-style editor with a full menu bar, toolbar, A4-formatted pages, and optional track changes mode.
Features: document title, save status, full formatting toolbar, A4 page layout, word count footer, track changes toggle.
Example
<.google_docs_editor id="doc" title="Q4 Report" track_changes={true} />Attributes
id(:string) (required)value(:string) - Defaults to"".title(:string) - Defaults to"Untitled Document".on_update(:string) - Defaults to"editor:update".track_changes(:boolean) - Defaults tofalse.class(:string) - Defaults tonil.- Global attributes are accepted.
Renders a Medium-style writing experience with floating toolbar, clean reading typography, and image-focused layout.
Features: floating selection toolbar, large headings, wide image support, drop cap option, distraction-free writing.
Example
<.medium_editor_v2 id="story" value={@story_content} />Attributes
id(:string) (required)value(:string) - Defaults to"".on_update(:string) - Defaults to"editor:update".class(:string) - Defaults tonil.- Global attributes are accepted.
Renders a Notion-style editor with slash commands, drag handles, and per-block floating toolbars. Minimal chrome, maximum content focus.
Features: block-level operations, drag reorder, "/" command palette, markdown input shortcuts (via v2 engine).
Example
<.notion_editor id="notes-editor" value={@content} />Attributes
id(:string) (required)value(:string) - Defaults to"".on_update(:string) - Defaults to"editor:update".class(:string) - Defaults tonil.- Global attributes are accepted.
Renders a minimal editor with a compact toolbar (bold, italic, link, lists).
This is the simplest preset — ideal for comments, short notes, and forms where a lightweight rich text input is needed.
Example
<.simple_editor id="comment-editor" placeholder="Add a comment..." />Attributes
id(:string) (required)value(:string) - Defaults to"".placeholder(:string) - Defaults to"Start writing...".on_update(:string) - Defaults to"editor:update".class(:string) - Defaults tonil.- Global attributes are accepted.