Visual Editor

Visual Editing lets you craft stunning content experiences, all within a user-friendly interface.

Visual Editing experience offers:

Make changes to any document and see the impact reflected instantly across all connected content.
No more hunting for editable areas! Overlays act as visual cues that let you click and jump directly to the content you want to edit.

Sync Script

Add the next script to your HTML page, and by replacing <firebase-project-id> with your firebase project id:

HTML

<script type="text/javascript" async src="https://<firebase-project-id>.web.app/scripts/sync-v1.js"></script>

Listen for Events

Your application can subscribe to the Localess Visual Editor Events :

TypeScript

window.localess.on(['input', 'change'], (event) => {
  if (event.type === 'input' || event.type === 'change') {
    console.log(event.data);
    //Update your content data ...
  }
});

To highlight components in the Localess Visual Editor you will need to add data-ll-id attribute on the HTML tag with the content generated id, present under _id field for each generated schema:

HTML

<div data-ll-id="<schema id>">
  ....
</div>

Official Libraries

TypeScript

TypeScript is a free and open-source high-level programming language developed by Microsoft.