editor docs


Next Generation live editor for Bolt Web Components

Published Last updated: 5.8.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 %}
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

styles *

URL paths to CSS files that the editable content requires

scripts *

URL paths to JS files that the editable content requires


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.

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

editor simple

editor blockquote

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

editor modal

How Pega technology resolves Company

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

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