Visual Editor | Visual Editor

Focus on the data

Instead of trying to give a full blown visual editor that has too much features `visual-editor` focus on the data. You choose what data you want and what kind of field you need for every block on your page. The user focus on the data while you can focus on the layout.

editor.registerComponent('hero', {
  title: 'Hero',
  category: 'Banner',
  fields: [
    Text('title', {multiline: false}),
    HTMLText('content'),
    Repeater('buttons', {
      title: 'Buttons',
      addLabel: 'Add a new button',
      fields: [
        ButtonFields()
      ],
    })
  ],
})

Framework agnostic

The editor does not care about the framework you use, you get the value and you are responsible of transforming the date into HTML. You can use any language / framework you want for rendering your page.

Based on the specs

The editor uses custom element and HTML Attributes so it can be easily inserted anywhere.

<visual-editor
  name="content"
  preview="https://renderer:8000/preview"
  iconsUrl="/icons/[name].svg"
  id="editor1"
  value=""
></visual-editor>