editor docs

Editor

Next Generation live editor for Bolt Web Components

Published Last updated: 2.28.0 Change log Github NPM
Twig Usage
  {% set content %}
  <bolt-text>Hello World!</bolt-text>
{% endset %}

{% include '@bolt-components-editor/editor.twig' with {
  styles: ['/build/bolt-global.css'],
  scripts: ['/build/bolt-global.js'],
  content: content,
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
content *

HTML content to edit

string
styles *

URL paths to CSS files that the editable content requires

array
scripts *

URL paths to JS files that the editable content requires

array
id

ID for this content. Useful for saving back to a data store like Drupal by passing in the paragraph ID. ID emitted in save event.

string
Install Install
  npm install @bolt/components-editor
Dependencies @bolt/core-v3.x @bolt/lazy-queue detect-browser grapesjs param-case

editor simple

Edit
This is a Button; click "Edit" above to edit me

editor blockquote

Edit

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

editor modal

Edit
This is a Button triggering an on-page Modal This is a Link triggering an on-page Modal CTA Text
Edit
How Pega technology resolves Company

You are about to reach your monthly data limit...

Customer
To avoid costly calls to your service center (and keep customers happy), you need to stay one step ahead. That’s why Pega’s real-time monitoring and pattern detection lets you sense a potential billing issue, then send your customer a proactive notification. It’s not mind-reading. It’s signals